原生JavaScript实现AJAX、JSONP

相信大部分前端开发者经常会用jquery的ajax方法与后台进行交互，但是有些时候，我们只需要用到ajax请求数据，而其他的功能几乎用不到，所以就需要知道原生js的ajax请求方法。

ajax简介

ajax描述了一种主要使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载，ajax的核心是XMLHttpRequest对象，它定义了用脚本操纵HTTP的API！
具体来说，ajax包括以下步骤：

创建ajax对象（实例化XHR对象）
发起HTTP请求（指定请求方式、设置请求头、发送请求）
接收服务器传回的数据（接收服务器传回的数据）
更新网页数据（获取数据，渲染页面）

GET和POST请求差别：

传数据方式不同
- GET: xhr.open( type, url + ‘?’ + data, true );
- POST: xhr.send( data );
post需要设置请求头,GET不需要

ajax请求过程

创建ajax对象

var xhr = new XMLHttpRequest();

建立连接

创建XMLHttpRequest对象后，就可以调用XMLHttpRequest对象的open()方法去指定这个请求的两个必需部分：方法和URL。

调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。

有三个参数：

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步），默认false

  xhr.open(type, url, true);xhr.open(type, url + '?' + data, true); //data是name=hh&age=11格式

设置请求头

post方式必须设置请求头（在建立连接后设置请求头）

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

Content-type查询: http://tool.oschina.net/commons/

发送请求

xhr.send();//GET请求
xhr.send('name=teswe&ee=ef');//post请求

接收服务器传回的数据

监听响应，只要readyState的值变化，就会调用readystatechange事件
当readyState=4的时候，表示已经接收到全部响应数据
当status(响应的HTTP状态码)的值以2开头的时候都是成功

xhr.onreadystatechange = function() {if(xhr.readyState == 4) {   var status = xhr.status;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);}};
};

ajax的jsonp

同源策略 – 对JavaScript代码能够操作哪些Web内容的一条完整的安全限制

AJAX之所以需要“跨域”，罪魁祸首就是浏览器的同源策略。即，一个页面的AJAX只能获取这个页面相同源或者相同域的数据。如何叫“同源”或者“同域”呢？——协议、域名、端口号都必须相同。例如：

http://example.com 和 https://example.com 不同，因为协议不同；
http://localhost:8080 和 http://localhost:1000 不同，因为端口不同；
http://localhost:8080 和 https://example.com 不同，协议、域名、端口号都不同，根本不是一家的。

JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特性，由其 src 属性发送请求到服务器，服务器返回 JavaScript 代码，浏览器接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。

JSONP由两部分组成：回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，但客户端和服务器端的名称一定要一致）。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回。

JSONP的请求过程：

请求阶段：浏览器创建一个 script 标签，并给其src 赋值(类似 http://example.com/api/?callback=jsonpCallback）。
发送请求：当给script的src赋值时，浏览器就会发起一个请求。
数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: ‘abc’})”)返回。当浏览器接收到了响应数据，由于发起请求的是 script，所以相当于直接调用 jsonpCallback 方法，并且传入了一个参数。

 var head = document.getElementsByTagName('head')[0];var script = document.createElement('script');script.src = params.url + '?' + data;

封装ajax方法(包含jsonp)

function ajax(params) {params = params || {};   params.data = params.data || {};var json = params.jsonp ? jsonp(params) : json(params);// 判断是ajax请求还是jsonp请求function json(params) { // ajax请求   params.type = (params.type || 'GET').toUpperCase();params.data = formatParams(params.data);  // 避免有特殊字符，必须格式化传输数据   var xhr = null;    // 第一步：实例化XMLHttpRequest对象   if(window.XMLHttpRequest) {   xhr = new XMLHttpRequest();   } else {xhr = new ActiveXObjcet('Microsoft.XMLHTTP');//IE6及其以下版本      }; /*第二步：指定请求* open([请求方式],[URL],[boolean(同步或异步请求，默认false)]);* 调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。* * 第三步：设置请求头(post请求)* 第四步：发送请求* */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);}// 第五步：监听响应，只要readyState的值变化，就会调用readystatechange事件 xhr.onreadystatechange = function() {  //readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据if(xhr.readyState == 4) {   var status = xhr.status;if(status >= 200 && status < 300) {    //status：响应的HTTP状态码，以2开头的都是成功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);   }   };   }; }  // jsonp请求   function jsonp(params) {   //创建script标签并加入到页面中   var callbackName = params.jsonp;   var head = document.getElementsByTagName('head')[0];   // 设置传递给后台的回调参数名   params.data['callback'] = callbackName;   var data = formatParams(params.data);   var script = document.createElement('script');   head.appendChild(script);    //创建jsonp回调函数   window[callbackName] = function(json) {   head.removeChild(script);   clearTimeout(script.timer);   window[callbackName] = null;   params.success && params.success(json);   };    //发送请求   script.src = params.url + '?' + data;    //为了得知此次请求是否成功，设置超时处理   if(params.time) {   script.timer = setTimeout(function() {   window[callbackName] = null;   head.removeChild(script);   params.error && params.error({   message: '超时'   });}, time);}};//格式化参数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);   }
}