天天看點

原生js實作AJAX(二)原生js實作AJAX(二)

原生js實作AJAX(二)

簡易的AJAX請求

var u=window.u||{};
u.createXHR=function() {
    var methods=[
      function() {return new XMLHttpRequest();},
      function() {return new ActiveXObject(Msxml2.XMLHTTP);},
      function() {return new ActiveXObject(Microsoft.XMLHTTP);}
    ];
    for(var i=;i<;i++) {
      try {
        methods[i]();
      } catch(e) {
        continue;
      }
      this.createXHR=methods[i];
      return methods[i]();
    }
    throw new Error("沒有找到XHR對象");
  };
u.ajax=function(options) {
    var method=options.method||'GET',
            url=encodeURI(options.url),
            success=options.success,
            failed=options.failed,
            data=options.data||null;
    var xhr=u.createXHR();//建立XHR對象
    xhr.open(method,url,true);//指定請求
    xhr.onreadystatechange=function() {
      if(xhr.readyState==) {
        if((xhr.status>=&&xhr.status<)||xhr.status==)  {
          success(xhr.responseText);//執行成功的回調函數
          xhr=null;
        }
      } else {
        if(xhr.status!=) {
          failed(xhr.status);//執行失敗的回調函數
        }
      }
    }
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//設定Content-Type
    xhr.send(data);正式發送請求
}
           

HTTP請求的各部分有指定順序:請求方法和URL首先到達,然後是請求頭,最後是請求主體。XMLHttpRequest實作通常直到調用send方法才開始啟動網絡。

setRequestHeader()方法的調用必須在調用open之後,但在調用send之前,否則它将抛出異常。

目前這段代碼隻能實作簡單的AJAX請求,如GET方式發起請求,在url中攜帶參數或者使用POST方式,在data中包含請求主體,且必須為’find=pizz&&user=123’的格式才能被背景正常讀取。