【浅入AJAX二】AJAX的使用&封装&JQuery中的AJAX

AJAX（二）

1.AJAX的使用

1.1 响应数据的格式

我们从服务端接收到的数据需要JavaScript解析才能被我们展示在页面上。

1.1.1 XML

一种数据描述的方式，现在几乎没人不用了，数据冗余太多，所以被淘汰了。

在执行响应的后续逻辑时，可以用过

  //this.responseXML专门用于获取服务端返回的XML数据，操作方式就是通过DOM的方式操作
    //但是在服务端的响应头中的Content-Type必须是application/xml
    console.log(this.responseXML.documentElement);//再进行相应的节点操作即可拿到想要的数据

这种方式不用特意掌握，了解即可。

1.1.2 JSON

JSON：JavaScript 对象表示法（JavaScript Object Notation），JSON 是存储和交换文本信息的语法。类似 XML，JSON 比 XML 更小、更快，更易解析。

JSON这里就不进行更详细的介绍了，只需知道服务端用JSON格式返回数据，客服端就采用JSON格式解析数据。

1.2 Ajax的兼容处理

XMLHttpRequest 在老版本浏览器（IE5/6）中不支持，需做兼容处理。

  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

2.AJAX封装

最终封装的ajax方法，参数应该有请求方法，请求地址，请求参数，请求成功的函数。

封装的方法很多，封装的目的是方便我们的使用。下面两种作为参考：

2.1 普通封装

 /**  
     * 发送一个 AJAX 请求  
     * @param  {String}   method 请求方法  
     * @param  {String}   url    请求地址  
     * @param  {Object}   params 请求参数  
     * @param  {Function} done   请求完成过后需要做的事情（委托/回调）  
     */ 
    function ajax (method, url, params, done) { 
      
      // 统一转换为大写便于后续判断   
      method = method.toUpperCase();   
      
      // 对象形式的参数转换为 urlencoded 格式   
      var pairs = [];   
      for (var key in params) {     
        pairs.push(key + '=' + params[key]);   
      }   
      var querystring = pairs.join('&');     var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new  ActiveXObject('Microsoft.XMLHTTP');     xhr.addEventListener('readystatechange', function () {     if (this.readyState !== 4) return;  
      
      	// 尝试通过 JSON 格式解析响应体     
        try {       
          done(JSON.parse(this.responseText));     
        } catch (e) {       
          done(this.responseText);     
        }   
      });     
      
      // 如果是 GET 请求就设置 URL 地址 问号参数   
      if (method === 'GET') {     
        url += '?' + querystring;   
      }     
      xhr.open(method, url);   
      
      // 如果是 POST 请求就设置请求体   
      var data = null;   
      if (method === 'POST') {     
        xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded');     data = querystring;   
      }   
      xhr.send(data); 
    }   

2.2 对象作为参数封装

   function ajax(json){
      //将参数用一个对象储存
      var method = json && json.method || "GET";
      var url = json && json.url || "";
      var data = json && json.data || "";
      var fnSucc = json && json.fnSucc || function(){};//请求成功执行函数
      var fnFaild = json && json.fnFaild || function(){};//请求失败执行函数
      
      var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObjext("Microsoft.XMLHTTP");
      if(method=="GET"){
        xhr.open(method,url+"?"+data,true);
        xhr.send();
      }else{
        xhr.open(method,url,true);
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(data);
      }
      xhr.onreadystatechange = function(){
        (xhr.readyState == 4 && xhr.status == 200) ? fnSucc(xhr.responseText) : fnFaild();
      }
    }

3. JQuery中的AJAX

3.1 $.ajax()：执行一个异步的HTTP（Ajax）的请求

常用选项参数介绍：

• url：请求地址
• type：请求方法，默认为 get
• dataType：服务端响应数据类型
• contentType：请求体内容类型，默认 application/x-www-form-urlencoded ，也可以指定为text/plain、application/json
• data：需要传递到服务端的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
• timeout：请求超时时间（以毫秒计算）
• beforeSend：请求发起之前触发
• success：请求成功之后触发（响应状态码 200）
• error：请求失败触发
• complete：请求完成触发（不管成功与否）
• jsonp：在一个 jsonp 中重写回调函数的字符串。来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:‘onJsonPLoad’}会导致将"onJsonPLoad=?"传给服务器。（query实现跨域方法）
• jsonpCallback：在一个 jsonp 中规定回调函数的名称，也就是替换"callback=?"中的问号

  $.ajax({   
      url: './get.php',   
      type: 'get',   
      dataType: 'json',   
      data: { id: 1 },   
      beforeSend: function (xhr) {     
        console.log('before send');   
      },   
      success: function (data) {     
        console.log(data);   
      },   
      error: function (err) {     
        console.log(err);   
      },   
      complete: function () {     
        console.log('request completed');   
      } 
    })

3.2 $.get()

   $.get(url,data,success(response,status,xhr),dataType);

3.3 $.post()

  $.post(url,data,success(data, textStatus, jqXHR),dataType);

3.4 $.getJSON()

    $.getJSON(url,data,success(data,status,xhr));