一.為什麼要封裝?

發現很多地方都要用ajax請求，但是大部分程式碼都是一樣的，所以根據封裝的思想，相同的程式碼封裝成函式，在需要用的地方來呼叫,這樣會很方便.

二.js封裝ajax過程:

1.先了解結構程式碼和後臺程式碼:
結構:

後臺:

3.開始封裝函式

    //開始封裝函式
  function ajax(params){
/*  *  params.type:請求方式
    *  params.url：請求路徑
    *  params.data:提交給伺服器的資料
    *  params.success: 響應完成時呼叫的回撥函式
    *  params.dataType: 用來告訴我響應體是什麼型別的，我就幫你轉成對應的物件 */
 


    //1.建立請求物件
    var xhr=new XMLHttpRequest();
    //不管你傳過來的是大寫還是小寫.統一先轉換成小寫
    params.type=params.type.toLowerCase();
    //判斷請求體是不是get並且有寫值,如果是的話拼接url
    if(params.type=="get"&& params.data!=undefined){
        params.url+="?"+params.data;
    }

    //2.設定請求行
    xhr.open(params.type,params.
 
url)

    //判斷是不是get請求,是的話不需要第3步的設定請求頭,直接傳送請求
    if(params.type=="get"){
        //4.傳送請求
        xhr.send();
    }else{//說明是post請求
        //3.需要設定請求頭,這句話很長,直接複製就好
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        //4.傳送請求,在方法裡面加上要提交給伺服器的資料
        xhr.send(params.data)
 
;

    }
    //5.監聽響應完成事件
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            //這裡寫響應完成事件
			/*考慮到之前的封裝有一個問題:我希望如果我告訴你響應體是JSON，
			你就自動幫我做轉換，我告訴你是XML，你也幫我轉成XML
			解決辦法:在回撥函式後面又多加一個引數叫res
			具體做法:
			1.在響應完成那裡，先宣告一個變數res = xhr.resonseText;
			2.判斷dataType是否等於JSON,如果是把res重新賦值為轉換為JSON物件的值;
			3.繼續判斷(else if)dataType是否等於XML，如果是，
			把res重新賦值為轉換為XML物件的值;
			4.呼叫回撥函式，傳入res
			*/
            //先預設賦值為字串的響應體
            var res =xhr.responseText;
            if(params.dataType=="json"){
                //按JSON方法來轉換成js物件
                res=JSON.parse(xhr.responseText);
            }else if(params.dataType=="xml"){
                var parser=new DOMParser();
                res=parser.parseFromString(xhr.responseText,'text/xml');
            /*上面兩句話的補充說明:後臺傳入的是xml資料,如果直接用xhr.responseXML拿不到
            響應體,這時就我們需要轉換
                天氣預報案例演示:
                console.log(xhr.responseXML);//得到null,因為XML的資料我們無法直接獲取
                響應體,這時我們需要手動轉換
                //這時候我們就需要自己手動把它轉成XML物件
                //第一步:建立一個文件轉換物件
                var parser = new DOMParser();
                //第二步:把響應體轉成xml物件
                var xml = parser.parseFromString(xhr.responseText,'text/xml');
                console.log(xml);//列印<resp>...<resp>,即成功得到xml物件                                  
              */
            }
            params.success(res);//函式呼叫
        }

    }

  }

4.函式呼叫:

        //按鈕點選事件
        document.getElementById('btn').onclick = function () {
            //呼叫函式
            ajax({
                type: "get",
                url: "getJSON.php",
                dataType: "json",
                success: function (obj) {//回撥函式,需要執行的響應體事件程式碼寫在這裡就好
                    console.log(obj);//成功拿到後臺的傳過來的資料,{name: "jack", age: 16}
                }
            })
        }

三.jQuery中的ajax

jQuery中用來發ajax請求的方法，跟我們封裝的方法類似，但是功能更強大.
使用語法:

//裡面傳入一個物件
$.ajax({ 
  //請求網址
  url: './data.php',
  //請求型別
  type: 'post',
  //伺服器響應資料型別，如果是跨域，可以改成jsonp
  dataType: 'json',
  //傳送給伺服器的資料（請求體）,如果是get請求資料寫在url,如果是post才寫data屬性
  data: { id: 1 },
  //回撥函式：響應回來呼叫的函式
  success: function (data) {
    console.log(data)
  },
  //請求失敗觸發
  error: function (err) {
    console.log(err)
  }
    
})

另外, $.get()：跟上面一樣的，只是不用寫type屬性，因為它就是發get請求的;
$.post()：跟上面一樣的，只是不用寫type屬性，因為它就是發post請求的.

四.jQuery裡面的表單序列化

特點：能找到這個表單下面所有帶name屬性的表單元素（file除外），能把它們自動拼接成key=value形式的字串，key就是它們的name，value就是它們自己輸入的內容或者選擇的內容.
使用案例:

<script>

    $('#btn').click(function(){

         /*表單的序列化，它能找到這個表單下面所有帶name屬性的表單元素(檔案是拿不到的)，
          並取到它們的值，做成key=value形式的字串，key是它們的name，
         值就是它們輸入或者選中的內容*/
         var res = $('form').serialize();

         console.log(res);
         
    });

</script>