一步一步理解Ajax（二）

ajax方法：通過 HTTP 要求載入遠端資料
get方法： 通過遠程 HTTP GET 請求載入資訊
post方法：通過遠程 HTTP POST 請求載入資訊

1、建立XMLHttpRequest對象

function createXHR() {
            return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}

2、將索引值對轉換成拼接串
      function params(data) {
            var a = [];
            for (var i in data) {
                a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
            }
            return a.join("&");
        }

3、封裝ajax方法
    參數
  method       要求方法      get和post          預設get
  data            索引值對         {key:value}
  url               連結地址
  cache           緩衝           true   和  false    預設true帶緩衝
  success       成功             error           異常
  function ajax(args) {
            var xhr = createXHR();
            var data = params(args.data);
            if (/get/i.test(args.method)) {    //  當為get方式時  將data直接拼接到url後
                args.url += "?" + data;
            }
            if (!args.cache) {      //無緩衝
                if (args.url.indexOf("?") < 0) {   //當無參數data
                    args.url += "?";
                }
                args.url += "&" + (new Date());  // Math.random();
            }
            xhr.open(args.method, args.url, true);
            xhr.onreadystatechange = function () {
                if (4 == xhr.readyState && 200 == xhr.status) {
                    args.success(xhr.responseText, xhr.responseXML);
                }
                else {
                    args.error();
                }
            }
            if (/post/i.test(args.method)) {
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(data);
            }
            else {
                xhr.send();
            }
        }

4、這是一個簡單的 get方法 請求功能以取代複雜 ajax方法 。請求成功時可調用回呼函數。如果需要在出錯時執行函數，請使用ajax方法。
       function get(url, data, fn) {   
            ajax({ "method": "get", "url": url, "data": data, "success": fn });
        }

5、這是一個簡單的 post方法 請求功能以取代複雜 ajax方法 。請求成功時可調用回呼函數。如果需要在出錯時執行函數，請使用ajax方法。
       function post(url, data, fn) {
            ajax({ "method": "post", "url": url, "data": data, "success": fn });
        }