簡(jiǎn)單介紹不用庫（框架）自己寫ajax

平常會(huì)使用ajax來請(qǐng)求數(shù)據(jù)，加載一個(gè)庫(框架)，或許僅僅maybe就使用了它的ajax部分。

　　寫個(gè)ajax，一來可以經(jīng)歷一下處理問題的過程，提升技術(shù)能力，二來工作中有時(shí)真的用不著這么大的一個(gè)庫(框架)，用自己寫的，何樂不為呢。

　　先來看看流行的jQuery是怎樣調(diào)用ajax的

$.ajax({
  url:    'test.php',   //發(fā)送請(qǐng)求的URL字符串
  type:    'GET',     //發(fā)送方式 
  dataType:  'json',     //預(yù)期服務(wù)器返回的數(shù)據(jù)類型 xml, html, text, json, jsonp, script
  data:    'k=vk=v',   //發(fā)送的數(shù)據(jù) 
  async:   true,      //異步請(qǐng)求 
  cache:   false,     //緩存 
  timeout:  5000,      //超時(shí)時(shí)間 毫秒
  beforeSend: function(){},  //請(qǐng)求之前
  error:   function(){},  //請(qǐng)求出錯(cuò)時(shí)
  success:  function(){},  //請(qǐng)求成功時(shí)
  complete:  function(){}  //請(qǐng)求完成之后(不論成功或失敗)
});

 　　這樣的調(diào)用是不是很舒適、方便，如果感覺舒適那自己動(dòng)手寫也參照這種設(shè)計(jì)方式，不用太復(fù)雜，滿足所需就好。

　　先了解ajax的基礎(chǔ)知識(shí)

　　XMLHttpRequest 對(duì)象

　　XMLHttpRequest對(duì)象是ajax的核心，通過XMLHttpRequest對(duì)象來向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari、Opera）均支持 XMLHttpRequest 對(duì)象（IE5 和 IE6 使用 ActiveXObject）?！　?/p>

　　創(chuàng)建一個(gè)兼容的XMLHttpRequest對(duì)象

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

 　　向服務(wù)器發(fā)送請(qǐng)求

xhr.open(method,url,async);
    //method：請(qǐng)求的類型；GET 或 POST
    //url：請(qǐng)求的URL
    //async：true（異步）或 false（同步）
xhr.send(string);
    //將請(qǐng)求發(fā)送到服務(wù)器
    //string：僅用于 POST 請(qǐng)求
//GET 比 POST 請(qǐng)求方式更簡(jiǎn)單也更快，并且在大部分情況下都能用
//在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
    //無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
    //向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
    //發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

　　服務(wù)器響應(yīng)

　　使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性獲得來自服務(wù)器的響應(yīng)。

　　　　如果來自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對(duì)象進(jìn)行解析，請(qǐng)使用 responseXML 屬性。

　　　　如果來自服務(wù)器的響應(yīng)并非 XML，請(qǐng)使用 responseText 屬性，responseText 屬性返回字符串形式的響應(yīng)。

　　onreadystatechange 事件

　　當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

　　 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：

　　　　onreadystatechange　　//存儲(chǔ)函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)

　　　　readyState　　//存有 XMLHttpRequest 的狀態(tài), 從 0 到 4 發(fā)生變化　　　　　

0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成，且響應(yīng)已就緒

　　　　status　　//200: "OK", 404: 未找到頁面

　　在 onreadystatechange 事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù), 當(dāng) readyState等于4 且 status為200 時(shí)，表示響應(yīng)已就緒。

xhr.onreadystatechange = function(){
  if( xhr.readyState == 4  xhr.status == 200 ){
    //準(zhǔn)備就緒 可以處理返回的 xhr.responseText 或者 xhr.responseXML 
  }
};

 　　一個(gè)簡(jiǎn)單的ajax請(qǐng)求如下：

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function(){
  if( xhr.readyState == 4  xhr.status == 200 ){
    //準(zhǔn)備就緒 可以處理返回的 xhr.responseText 或者 xhr.responseXML 
  }
};
xhr.open(method,url,async);
xhr.send(string);

 　　補(bǔ)充：1. 發(fā)送GET請(qǐng)求時(shí)可能得到的是緩存的結(jié)果，為了避免這種情況，可以向URL 添加一個(gè)唯一的 ID，時(shí)間戳。2. 如果需要像HTML表單那樣 POST 數(shù)據(jù)，使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中發(fā)送數(shù)據(jù)。

url += (url.indexOf('?')  0 ? '?' : '') + '_='+ (+new Date());
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

　　開始寫自己的ajax

　　先寫一個(gè)基本的，定義好各種參數(shù)選項(xiàng)，供參考

var $ = (function(){
  //輔助函數(shù) 序列化參數(shù) 
  function param(data){
    //..  
  }
 
  function ajax(opts){
    var _opts = {
      url    : '/',       //發(fā)送請(qǐng)求URL地址
      type    : 'GET',      //發(fā)送請(qǐng)求的方式 GET(默認(rèn)), POST
      dataType  : '',        //預(yù)期服務(wù)器返回的數(shù)據(jù)類型 xml, html, text, json, jsonp, script
      data    : null,       //發(fā)送的數(shù)據(jù) 'key=valuekey=value', {key:value,key:value}  
      async   : true,       //異步請(qǐng)求 ture(默認(rèn)異步), false
      cache   : true,       //緩存 ture(默認(rèn)緩存), false 
      timeout  : 5,        //超時(shí)時(shí)間 默認(rèn)5秒
      load    : function(){},   //請(qǐng)求加載中
      error   : function(){},   //請(qǐng)求出錯(cuò)時(shí)
      success  : function(){},   //請(qǐng)求成功時(shí)
      complete  : function(){}   //請(qǐng)求完成之后(不論成功或失敗)
    }, aborted = false, key,
    xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    for(key in opts) _opts[key] = opts[key];        
     
    /*
    if(_opts.dataType.toLowerCase() === 'script'){
      //..
    }
    if(_opts.dataType.toLowerCase() === 'jsonp'){
      //..
    }
    */
    if(_opts.type.toUpperCase() === 'GET'){
      if(param(_opts.data) !== ''){
        _opts.url += (_opts.url.indexOf('?')  0 ? '?' : '') + param(_opts.data);
      }
      !_opts.cache  ( _opts.url += (_opts.url.indexOf('?')  0 ? '?' : '') + '_='+(+new Date()) );
    }
 
    function checkTimeout(){
      if(xhr.readyState !== 4){
        aborted = true;
        xhr.abort();
      }
    }
    setTimeout(checkTimeout, _opts.timeout*1000);
     
    xhr.onreadystatechange = function(){
      if( xhr.readyState !== 4 ) _opts.load  _opts.load(xhr);
      if( xhr.readyState === 4 ){
        var s = xhr.status, xhrdata;
        if( !aborted  ((s >= 200  s  300) || s === 304) ){
          switch(_opts.dataType.toLowerCase()){
            case 'xml':
              xhrdata = xhr.responseXML;
            break;
            case 'json':
              xhrdata = window.JSON  window.JSON.parse ? JSON.parse(xhr.responseText) : eval('(' + xhr.responseText + ')');
            break;
            default:
              xhrdata = xhr.responseText;
          }
          _opts.success  _opts.success(xhrdata,xhr);
        }else{
          _opts.error  _opts.error(xhr);
        }
        _opts.complete  _opts.complete(xhr);
      }
    };   
    xhr.open(_opts.type,_opts.url,_opts.async);
    if(_opts.type.toUpperCase() === 'POST'){
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(_opts.type.toUpperCase() === 'GET' ? null : param(_opts.data));
  }
  return {
    ajax: ajax
  }
})();

 　　定義好了參數(shù)選項(xiàng)，來分析一下。其中 dataType 是整個(gè)ajax的重點(diǎn)，代碼的簡(jiǎn)單或者復(fù)雜都在它了。

　　在這里dataType為預(yù)期服務(wù)器返回的數(shù)據(jù)類型：xml, html, text, json, jsonp, script

　　1. 為xml時(shí)，來自服務(wù)器的響應(yīng)是XML，使用 responseXML 屬性獲取返回的數(shù)據(jù)

　　2. 為html、text、json時(shí)，使用 responseText 屬性獲取返回的數(shù)據(jù)

　　　　　　a. 為html時(shí)，返回純文本HTML信息，其中包含的script標(biāo)簽是否要在插入dom時(shí)執(zhí)行 ( 代碼復(fù)雜度+3 )

　　　　　　b. 為json時(shí),  返回JSON數(shù)據(jù)，要安全、要便捷、要兼容  ( 代碼復(fù)雜度+2 )

　　3. 為jsonp時(shí)，一般跨域才用它，不用原來的ajax請(qǐng)求了，用創(chuàng)建script法( 代碼復(fù)雜度+2 )

　　4. 為script時(shí)：  要跨域時(shí)，不用原來的ajax請(qǐng)求了，用創(chuàng)建script法( 代碼復(fù)雜度+1 )； 不跨域，返回純文本JavaScript代碼， 使用 responseText 屬性獲取返回的數(shù)據(jù) ( 代碼復(fù)雜度+1 )

　　其中，在html片段中的script標(biāo)簽、jsonp、script，都要用到創(chuàng)建script標(biāo)簽的方式。

　　處理dataType為json

xhrdata = window.JSON window.JSON.parse ? JSON.parse(xhr.responseText) : eval('(' + xhr.responseText + ')');

　　這是最簡(jiǎn)單的處理方式了，要JSON兼容，可以用json2.js。

　　處理dataType為jsonp

　　jsonp是要通過script標(biāo)簽來請(qǐng)求跨域的，先了解下流程：

　　這上圖中 a.html中請(qǐng)求了 http://www.b.com/b.php?callback=add  （在ajax程序中請(qǐng)求url就是這個(gè)鏈接），在b.php中讀取了傳過來的參數(shù) callback=add  根據(jù)獲取到的參數(shù)值(值為add)，以JS語法生成了函數(shù)名，并把json數(shù)據(jù)作為參數(shù)傳入了這個(gè)函數(shù)，返回以JS語法生成的文檔給a.html，a.html解析并執(zhí)行返回的JS文檔，調(diào)用了定義好的add函數(shù)。

 　　在程序中一般采用更通用的方式去調(diào)用，比如下面這個(gè)廣泛使用的loadJS函數(shù)：

function loadJS(url, callback) {
  var doc = document, script = doc.createElement('script'), body = doc.getElementsByTagName('body')[0];
  script.type = 'text/javascript';
  if (script.readyState) { 
    script.onreadystatechange = function() {
      if (script.readyState == 'loaded' || script.readyState == 'complete') {
        script.onreadystatechange = null;
        callback  callback();
      }
    };
  } else { 
    script.onload = function() {
      callback  callback();
    };
  }
  script.src = url;
  body.appendChild(script);
}

　　這樣把請(qǐng)求的url，傳入loadJS函數(shù)，得到一樣的結(jié)果。

　　因?yàn)槭莿?dòng)態(tài)創(chuàng)建script，請(qǐng)求成功返回，JS代碼就立即執(zhí)行，如果請(qǐng)求失敗是沒有任何提示的。因此自定義的參數(shù)選項(xiàng)： _opts.success 能調(diào)用，_opts.error不能調(diào)用。

　　ajax處理jsonp也有兩種情況：

　　1. 設(shè)置了請(qǐng)求URL后的參數(shù) callback=add 特別是定義了函數(shù)名add，請(qǐng)求成功返回，JS代碼就立即執(zhí)行(這里就是調(diào)用 add({"a":8,"b":2})  )

　　2. 在_opts.success中處理JSON數(shù)據(jù)，就是請(qǐng)求成功返回，JS代碼不執(zhí)行，并把函數(shù)中的參數(shù)挪出來，作為_opts.success的參數(shù)返回( 這里相當(dāng)于處理字符串 'add({"a":8,"b":2})' ，去掉 'add(' 和 ‘)'，得到 {"a":8,"b":2} )

　　處理dataType為html

 　 如果不處理HTML片段中script標(biāo)簽，直接把responseText返回值插入DOM樹就可以了。如果要處理script，就要把HTML片段中的script標(biāo)簽找出來，對(duì)買個(gè)script單獨(dú)處理，并注意是script標(biāo)簽中包含的JS代碼還是通過src請(qǐng)求的。

　　處理dataType為script

　　如果要跨域時(shí)，用創(chuàng)建script的方式，和處理jsonp類似； 不跨域，使用 responseText 屬性獲取返回的數(shù)據(jù)，可以用 eval 來讓代碼執(zhí)行，也可以創(chuàng)建script來執(zhí)行。

function addJS(text) {
  var doc = document, script = doc.createElement('script'), head = doc.getElementsByTagName('body')[0];
  script.type = 'text/javascript';
  script.text = text;
  body.appendChild(script);
}

　　到此ajax差不多分析完了，根據(jù)實(shí)際需要，添加各種功能，去思考每種功能是怎樣實(shí)現(xiàn)的，并能找到解決方法。

以上內(nèi)容就是小編跟大家分享的不用庫（框架）自己寫ajax，希望大家喜歡。