一步一步理解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 });
        }