Ajax技术详解

Ajax技术：Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构，它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换，不会导致页面重载。Ajax的核心是JS的XMLHttpRequest构造函数，它定义了用脚本操纵HTTP的API。

 

XMLHttpRequest构造函数：每new一个XMLHttpRequest构造函数返回的对象都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。需要注意的是当你重用已存在的XMLHttpRequest，这将会终止之前通过该对象挂起的任何请求。

 

案例：创建一个HTTP API

    //该构造函数返回的对象API能够操作HTTP请

    var xhr = new XMLHttpRequest();

 

 

HTTP API的open()方法：创建了HTTP API后的下一步就是调用open()方法。这个方法有三个参数，参数一指定HTTP请求的方法，GET、POST、DELETE、HEAD、OPTIONS和PUT都能用。参数二指定了请求的URL，但URL不能是跨域的URL。参数三指定了这个请求是否异步进行，true表示异步，false表示同步。

 

案例：open()方法的调用

    var xhr = new XMLHttpRequest();

    var URL = "lookup.php?name=csh&sex=男&ie=utf-8";

    xhr.open('GET', URL, true);

 

 

onreadystatechange事件：调用了open()方法后的下一步就是监听onreadystatechange事件，这个事件主要用于监听请求返回时的状态码(status属性)和返回数据的情况(readyState属性)。当status和readyState属性符合需求的时候调用回调函数。

 

readyState属性：readyState属性的值是一个整数，它指定了HTTP请求的状态。

0表示open()尚未调用

1表示open()已调用

2表示接收到头信息

3表示接收到响应主体

4表示响应完成

理论上，每次readyState属性改变都会触发readystatechange事件，但实际中当readyState改变为0或1时可能没有触发这个事件。当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发readystatechange事件。

 

status属性：readyState属性的值是一个整数，它指定了HTTP的状态码。

常见的HTTP状态码：

HTTP: Status 200 – 服务器成功返回网页

HTTP: Status 404 – 请求的网页不存在

HTTP: Status 503 – 服务不可用

案例：监听onreadystatechange事件

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
     //2xx状态与表示从缓存中直接取出的304可以看是成功的，IE(非原生的XHR对象)中会将204设置为1223，opera会在取得204时设置为0
     if (xhr.readyState == 4 && ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0)){
          options.callBack(converter[dataType].call(this, xhr.responseText, xhr.responseXML));
     }

};

 

 

HTTP API的send()方法：这是HTTP请求的最后一步，调用这个方法把请求发送到服务器。send()有一个可选参数，GET请求的时候为null，POST请求的时候为传给后台的数据

案例：调用send()方法

    var xhr = new XMLHttpRequest();

    xhr.send(null);

 

 

HTTP API的setRequestHeader()方法：该方法用于设置HTTP头信息。而在POST请求时就必须要设置HTTP头信息的Content-Type属性，用于告诉服务器发送给它的数据的MIME类型。如果调用setRequestHeader()多次，新值不会取代之前旧的值，相反，HTTP请求将包含这个头的多个副本或这个头将指定多个值。

 

编码请求主体：HTTP POST请求包括一个请求主体，它包含客户端传递给服务器的数据，请求主体除了是简单的文本字符串之外，还可能是复杂的数据。在Ajax应用中，一般情况下发送到服务器的很可能是一个JS对象(即把数据存放到一个对象里面，直接把这个对象发送给服务器，也就是说这个对象就是请求主体)。

案例：使用JSON编码主体来发起HTTP POST请求

function postJSON(url, data, callback){
     var request = new XMLHttpRequest();
     request.open('POST', url); //对指定URL发送POST请求

     request.onreadystatechange = function (){};

     request.setRequestHeader("Content-Type", "application/json");
     request.send(JSON.stringify(data));//data对象要转换为json类型

};

 

 

案例：发送一个GET请求

/**
* GET请求
* @param options  【该参数是一个object】
* {url: 'http://www.plateno.com/index.html, data: {name: 'luke'}, callBack: function(data){}}
*/
function get(options){
     var xhr = new XMLHttpRequest(),
          async = options.async || true;
     try{
          //判断是否传参数
          var data = '', n = 0, a = '';
          if (options.data){
               data = '?';
               for (var name in options.data){
                    n == 0 ? a = '' : a = '&';
                    n++;
                    data += a + name +'='+ encodeURI(options.data[name])
               }
          }

          //判断是否缓存
          var cache = '&' + new Data().getTime();

          if (!options.cache){cache = '';}

 

          xhr.open('get', options.url + data + cache, async); //设置请求数据

          xhr.send(); //发送请求

          //监听请求过程
          xhr.onreadystatechange = function (){
               //2xx状态与表示从缓存中直接取出的304可以看是成功的，IE(非原生的XHR对象)中会将204设置为1223，opera会在取得204时设置为0
               if (xhr.readyState == 4 && ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0)){
                    options.callBack.call(this, xhr.responseText, xhr.responseXML);
               }

          }

     }catch(e){throw new Error('GET请求失败');}

}

 

 

案例：发送一个POST请求

/**
* POST请求
* @param options  【该参数是一个object】
* {url: 'http://www.plateno.com/index.html', data:{name: 'luke'}, callBack: function(data){}}
*/
function post(options) {
     var xhr = new XMLHttpRequest(),
          async = options.async || true;
     try{
          //判断是否传参数
          var data = '', n = 0, a = '';
          if (options.data){
               for (var name in options.data){
                    n == 0 ? a = '' : a = '&';
                    n++;
                    data += a + name +'='+ options.data[name]
               }
          }

          xhr.open('post', options.url, async); //设置请求数据
         
          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //设置请求头

          xhr.send(data); //发送请求

          //监听请求过程
          xhr.onreadystatechange = function (){
               //2xx状态与表示从缓存中直接取出的304可以看是成功的，IE(非原生的XHR对象)中会将204设置为1223，opera会在取得204时设置为0
               if (xhr.readyState == 4 && ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0)){
                    options.callBack(converter[dataType].call(this, xhr.responseText, xhr.responseXML));
               }
          }
     }catch(e){throw new Error('POST请求失败');}

}