自己封裝一個簡單的ajax插件

 function myAjax(obj) {
     var xmlHttp;                         //保存xmlHttpRequest對象
     var type = obj.requestType;          //保存請求方式
     var cache = obj.cache || false;      //get時是否使用緩存,默認否
     var success = obj.success;           //數據請求成功的回調方法
     var error = obj.error;               //發生錯誤的回調方法
     var async = obj.async || false;      //是否異步，默認否
     var data = [];                       //存儲用戶發來的數據
     var url = obj.url;                   //用戶請求地址


     createXmlHttp();   //執行xmlHttp創建函數

     //創建xmlHttp失敗
     if(!xmlHttp) {
        console.log("我的老哥，創建xmlHttp對象失敗啦！您的瀏覽器不支持xmlHttpRequest對象");
     }

     try {
         //定義狀態監聽函數
         xmlHttp.onreadystatechange = function () {
             switch (xmlHttp.readyState) {
                 case 1:
                     console.log("open() 方法已調用，但是 send() 方法未調用。請求還沒有被發送。");
                     break;
                 case 2:
                     console.log("Send() 方法已調用，HTTP 請求已發送到 Web 服務器。未接收到響應。");
                     break;
                 case 3:
                     console.log("所有響應頭部都已經接收到。響應體開始接收但未完成。");
                     break;
                 case 4:
                     if (xmlHttp.status == 200) {
                         console.log("HTTP 響應已經完全接收。");
                         success(xmlHttp.responseText);                              //調用回調函數
                     }
                     break;
                 default:
                     error(xmlHttp.statusText);
                     break;
             }
         };

         //把用戶傳來的數據轉換成字符串
         for (var i in obj.data) {
             data.push(i + '=' + obj.data[i]);
         }
         data = data.join('&');

         if (type.toUpperCase() == 'GET') {                //如果是get請求
             if (cache == false) {                         //如果get請求不使用緩存
                 xmlHttp.open('get', url + '?' + data + '&random=' + Math.random(), async);
                 xmlHttp.send('null');
             } else {                                     //如果get請求使用緩存
                 xmlHttp.open('get', url + '?' + data, async);
                 xmlHttp.send('null');
             }
         } else if (type.toUpperCase() == 'POST')          //如果是post請求
         {
             xmlHttp.open('post', url, async);
             xmlHttp.setRequestHeader("Content-Type"
                 , "application/x-www-form-urlencoded");
             xmlHttp.send(data);
         } else {
            throw  new Error('您的請求方法有誤！');
         }
     } catch (error) {
         console.log("出錯啦：" + error.message);
     }


    //創建xmlHttpRequest對象函數
    function createXmlHttp() {
        if(window.ActiveXObject) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

        } else if (window.XMLHttpRequest){
            try {
                xmlHttp = new XMLHttpRequest();
            } catch(e) {
                xmlHttp = false;
            }
        }
    }

 }

插件基本邏輯：
    GET請求：
    1.新建XHR對象
    2.定義狀態監聽函數，各種狀態對應各種處理
    3.調用open方法啟動請求，准備發送
    4.使用send方法發送請求，參數為null
  
    POST請求：
    1.新建XHR對象
    2.定義狀態監聽函數，各種狀態對應各種處理
    3.使用open方法啟動請求，准備發送
    4.設置http頭信息的Content-Type類型，模擬表單發送
    5.使用send方法發送請求，參數為自己要發送的東西
插件使用方法：
  1.在html頁面引入myAjax.js文件之后就可以使用啦
  2.
    get方法使用例子：
　 　myAjax({

 requestType: 'get',
 url: '/getFunc',
 async: true,
 cache: false,
 data: { name: "lin", age: "20"},
 success: function (data) {
 alert(data);
 },
 error: function (statusText) {
 alert("請求失敗了，以下是具體信息：\n" + statusText);
 }
 });

 post方法使用例子：
 myAjax({
 requestType: 'post',
 url: '/postFunc',
 async: true,
 data: {name:"shuai", age: 10},
 success: function (data) {
 console.log(data);
 },
 error: function (statusText) {
 alert("請求失敗了，以下是具體信息：\n" + statusText);
 }
 });

這個插件主要是我為了學習原生ajax和函數封裝而寫的，還存在很多bug，同樣在學習ajax和函數封裝的同學可以參考參考，取其精華棄其糟粕，嘻嘻嘻。　　

 

myAjax.js已經在github開源，上面有實現具體例子: https://github.com/nayonglin/myAjax 記得star啊我的老哥！！！！！！