原生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请求过程

1. 创建ajax对象

var xhr = new XMLHttpRequest();

2. 建立连接

创建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格式

3. 设置请求头

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

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

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

4. 发送请求

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

5. 接收服务器传回的数据

监听响应，只要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);   
  }
}