相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。
其实，原生JavaScript实现AJAX并不难，这篇文章将会讲解如何实现简单的AJAX，还有跨域请求JSONP！
一、AJAX
AJAX的核心是XMLHttpRequest。
一个完整的AJAX请求一般包括以下步骤：
实例化XMLHttpRequest对象
连接服务器
发送请求
接收响应数据
我将AJAX请求封装成ajax()方法，它接受一个配置对象params。
function ajax(params) { params = params || {}; params.data = params.data || {}; // 判断是ajax请求还是jsonp请求 var json = params.jsonp ? jsonp(params) : json(params); // ajax请求 function json(params) { // 请求方式，默认是GET params.type = (params.type || 'GET').toUpperCase(); // 避免有特殊字符，必须格式化传输数据 params.data = formatParams(params.data); var xhr = null; // 实例化XMLHttpRequest对象 if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // IE6及其以下版本 xhr = new ActiveXObjcet('Microsoft.XMLHTTP'); }; // 监听事件，只要 readyState 的值变化，就会调用 readystatechange 事件 xhr.onreadystatechange = function() { // readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据 if(xhr.readyState == 4) { var status = xhr.status; // status：响应的HTTP状态码，以2开头的都是成功 if(status >= 200 && status < 300) { var response = ''; // 判断接受数据的内容类型 var type = xhr.getResponseHeader('Content-type'); if(type.indexOf('xml') !== -1 && xhr.responseXML) { response = xhr.responseXML; //Document对象响应 } else if(type === 'application/json') { response = JSON.parse(xhr.responseText); //JSON响应 } else { response = xhr.responseText; //字符串响应 }; // 成功回调函数 params.success && params.success(response); } else { params.error && params.error(status); } }; }; // 连接和传输数据 if(params.type == 'GET') { // 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)； xhr.open(params.type, params.url + '?' + params.data, true); xhr.send(null); } else { xhr.open(params.type, params.url, true); //必须，设置提交时的内容类型 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); // 传输数据 xhr.send(params.data); } } //格式化参数 function formatParams(data) { var arr = []; for(var name in data) { // encodeURIComponent() ：用于对 URI 中的某一部分进行编码 arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name])); }; // 添加一个随机数参数，防止缓存 arr.push('v=' + random()); return arr.join('&'); } // 获取随机数 function random() { return Math.floor(Math.random() * 10000 + 500); } }
在上面的代码中readyState的值表示请求/响应过程的当前活动阶段，其值得含义如下：
0：为初始化。尚未调用open()方法。
1：启动。已经调用open方法，但尚未调用send()方法。
2：发送。已经调用send()方法，但尚未接受到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，并且可以在客户端使用
使用实例：
ajax({ url: 'test.php', // 请求地址 type: 'POST', // 请求类型，默认"GET"，还可以是"POST" data: {'b': '异步请求'}, // 传输数据 success: function(res){ // 请求成功的回调函数 console.log(JSON.parse(res)); }, error: function(error) {} // 请求失败的回调函数 });
二、JSONP
同源策略
AJAX之所以需要“跨域”，罪魁祸首就是浏览器的同源策略。即，一个页面的AJAX只能获取这个页面相同源或者相同域的数据。 如何叫“同源”或者“同域”呢？——协议、域名、端口号都必须相同。例如
和 https://example.com 不同，因为协议不同；
:8080 和 https://example.com 不同，协议、域名、端口号都不同，根本不是一家的。
当跨域请求时，一般都会看到这个错误：
XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
那如何跨域请求呢？这时，JSONP就登场了！