JavaScript封裝Ajax工具函數及jQuery中的ajax，xhr在IE的兼容

 封裝ajax工具函數

首先要思考：
一、爲何要封裝它？提升開發效率
二、把一些不肯定的狀況考慮在其中
　　a. 請求方式
　　b. 請求地址
　　c. 是否異步
　　d. 發送參數
　　e. 成功處理
　　f. 失敗處理
三、肯定參數
　　a. Type--請求方式 get （get/post)
　　b. Url--請求地址 默認當前地址 字符串
　　c. Async--是否異步 true （true/false)
　　d. Data--發送的數據 {} 對象{name：xx}
　　e. Success--成功回調 function 函數 函數裏面就是處理的成功業務
　　f. Error--失敗回調 function 函數 函數裏面就是處理失敗的業務

/*===============ajax 封裝 ===========*/
/*1.肯定一個全局對象*/
window.$ = {};
/*2.給全局對象定義一個屬性*/
$.ajax = function(options){
    /*3.options對象傳參 */
    /*若是用戶不傳或者傳的不是對象中止執行*/
    if(!options || typeof options != 'object') return false;
    /*4.默認參數的處理*/
    var type = options.type == 'post' ? 'post' : 'get';
    var url = options.url || location.pathname;
    var async = options.async === false ? false : true;
    var data = options.data || {};
    /* 對象形式的數據 須要轉換成鍵值對的數據字符串  XHR對象須要 */
    var data2str = '';
    for(var key in data){
        data2str += key+'='+data[key]+'&';
    }
    /*須要去掉最後一個&*/
    data2str = data2str && data2str.slice(0,-1);
    /*if(data2str){
        data2str = data2str.slice(0,-1);
    }*/
    /*請求發送以前*/
    if(options.beforeSend){
        var flag = options.beforeSend();
        if(flag === false){
            return false;
        }
    }
    /*5.ajax 編程*/
    /*5.1 初始化對象*/
    var xhr = new XMLHttpRequest();
    /*5.2 設置請求行*/
    xhr.open(type,type == 'get' ? (url+'?'+data2str) : url,async);
    /*5.3 設置請求頭*/
    if(type == 'post'){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }
    /*5.4 設置請求主體 發送*/
    xhr.send(type == 'get'?null:data2str);
    xhr.onreadystatechange = function(){
        /*5.5 通信完成*/
        if(xhr.readyState == 4){
            /*5.6 成功的*/
            if(xhr.status == 200){
                /*須要考慮問題 數據格式問題*/
                /*1.怎麼肯定後臺返回的數據格式？*/
                /*2.後臺有寫接口的時候 規範  xml application/xml json application/json*/
                var result = null;
                var contentType = xhr.getResponseHeader('Content-Type');
                /*3.若是有xml 就是xml格式數據*/
                if(contentType.indexOf('xml') > -1){
                    result = xhr.responseXML;
                }
                /*4.若是有json 就是json格式數據*/
                else if(contentType.indexOf('json') > -1){
                    result = JSON.parse(xhr.responseText);
                }
                /*5.若是有標識  普通文本*/
                else{
                    result = xhr.responseText;
                }
                /*調用成功回調函數  把數據傳遞過去*/
                options.success && options.success(result);
            }
            /*5.7 失敗的*/
            else{
                /*調用失敗回調函數*/
                options.error && options.error({status:xhr.status,statusText:xhr.statusText});
            }
        }
    };
    /*
    $.ajax({error:function(msg){}});
    $.ajax({success:function(data){}});
    * */
};
/*get*/
$.get = function(options){
    options.type = 'get';
    $.ajax(options);
};
/*post*/
$.post = function(options){
    options.type = 'post';
    $.ajax(options);
};

 

jQuery Ajax 操做函數

jQuery 庫擁有完整的 Ajax 兼容套件。其中的函數和方法容許咱們在不刷新瀏覽器的狀況下從服務器加載數據。

函數	描述
jQuery.ajax()	執行異步 HTTP (Ajax) 請求。
.ajaxComplete()	當 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxError()	當 Ajax 請求完成且出現錯誤時註冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxSend()	在 Ajax 請求發送以前顯示一條消息。
jQuery.ajaxSetup()	設置未來的 Ajax 請求的默認值。
.ajaxStart()	當首個 Ajax 請求完成開始時註冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxStop()	當全部 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxSuccess()	當 Ajax 請求成功完成時顯示一條消息。
jQuery.get()	使用 HTTP GET 請求從服務器加載數據。
jQuery.getJSON()	使用 HTTP GET 請求從服務器加載 JSON 編碼數據。
jQuery.getScript()	使用 HTTP GET 請求從服務器加載 JavaScript 文件，而後執行該文件。
.load()	從服務器加載數據，而後把返回到 HTML 放入匹配元素。
jQuery.param()	建立數組或對象的序列化表示，適合在 URL 查詢字符串或 Ajax 請求中使用。
jQuery.post()	使用 HTTP POST 請求從服務器加載數據。
.serialize()	將表單內容序列化爲字符串。
.serializeArray()	序列化表單元素，返回 JSON 數據結構數據。

• jQuery爲咱們提供了更強大的Ajax封裝
• $.ajax({}) 可配置方式發起Ajax請求
• $.get() 以GET方式發起Ajax請求
• $.post() 以POST方式發起Ajax請求
• $('form').serialize() 序列化表單（即格式化key=val&key=val）
• url 接口地址
• type 請求方式
• timeout 請求超時
• dataType 服務器返回格式
• data 發送請求數據
• beforeSend: function () {} 請求發起前調用
• success 成功響應後調用
• error 錯誤響應時調用
• complete 響應完成時調用（包括成功和失敗）

   $(function(){
          $.ajax({
              /*1.請求方式*/
              type:'get',
              /*2.接口地址*/
              url:'01 jquer1yAjax.php',
              /*3.傳遞數據*/
              data:{
                  username:'xqq'
              },
              /*4.限制返回數據類型 強制轉換數據類型 若是轉換不成功 會執行錯誤的回調函數*/
              dataType:'json',
              /*5.請求以前的回調函數*/
              beforeSend:function(){
                  console.log('beforeSend');
                  /*若是請求回調函數  返回的是  false 中止ajax發送*/
                  //return false;
              },
              /*6.成功回調函數*/
              success:function(data){
                  console.log(data);
              },
              /*7.失敗回調函數*/
              error:function(){
                  console.log('error');
              },
              /*8.通信完成回調函數*/
              complete:function(){
                  console.log('complete');
              }
          });
      });

   

• XHR的IE兼容性

  function XHR() {
      /*XMLHttpRequest 存在兼容問題*/
      /*1.申明一個xhr*/
      var xhr;
      /*2.運行出現錯誤  異常 */
      /*3.捕獲異常*/
      try {
          /*在不支持這個對象的時候 出現異常*/
          xhr = new XMLHttpRequest();
      }
      /*4.處理異常*/
      catch(e) {
          /*低版本IE瀏覽器 初始化xhr對象須要的不一樣參數*/
          var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
          /*變量數組*/
          for (var i=0;i<IEXHRVers.length;i++) {
              /*5.捕獲異常*/
              try {
                  /*低版本IE初始化xhr對象的方式*/
                  xhr = new ActiveXObject(IEXHRVers[i]);
              }
              catch(e) {
                  continue;
              }
          }
      }
      return xhr;
  }