手写ajax

var util = {};

/**
 * [function 对象浅复制]
 * @param  {[type]} dst [description]
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
util.extend = function (dst, obj) {
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            dst[i] = obj[i];
        }
    }
};

 

/**
 * [json 实现ajax的json]
 * @param  {[type]} options [description]
 * @return {[type]}         [description]
 */
 util.json = function (options) {
     var opt = {
         url: '',
         type: 'get',// 默认是get操作
         data: {},
         success: function () {},
         error: function () {},
     };
     util.extend(opt, options);// 把option的属性浅复制到opt
     if (opt.url) {         // 如果url有效
        // 浏览器适配,如果不支持XMLHttpRequest，则改用ActiveXObject
         var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

         // 把opt里面的数据临时取出
         var data = opt.data,
             url = opt.url,
             type = opt.type.toUpperCase(),
             dataArr = [];

         // 把data里面的数据取出来，以 key=val的形式，push到数组中
         for (var k in data) {
             dataArr.push(k + '=' + data[k]);
         }

         // 如果是get操作 则把数据拼接到url后面
         if (type === 'GET') {
             url = url + '?' + dataArr.join('&');
             // 放入参数
             xhr.open(type, url.replace(/\?$/g, ''), true);// 如果是没有参数的话，用正则干掉末尾的"?"
             xhr.send();// 发送
         }

         if (type === 'POST') {
             xhr.open(type, url, true);
             // post请求需要设置请求头
             xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
             xhr.send(dataArr.join('&'));// post请求参数放置在send中
         }

         /**
          * 状态变更顺序：
          *  0 未初始化，未open
          *  open
          *  1 初始化，已open未send
          *  send
          *  2 发送数据，已send，收到响应头
          *  3 数据传输中，请求处理中（这个时间段包括，客户端发送数据到服务端，服务端处理数据，服务端数据发送至客户端）
          *  4 完成，通过responseBody和responseText获取响应数据
          *
          * 事件顺序：
          * onreadystatechange  onload触发时机在 readyState==4 状态之后
          * onloadstart         onloadstart触发时机在 readyState==1
          * onload
          *
          * 状态码
          * ----- 404 没找到页面（not found）

          ----- 403 禁止访问（forbidden）

          ----- 500 内部服务器出错（internal service error）

          ----- 200 一切正常（ok）

          ----- 304 没有被修改（not modified）
          */
         xhr.onload = function () {
             if (xhr.status === 200 || xhr.status === 304) {// 当前数据缓存有效或者成功响应
                 var res;
                 if (opt.success && opt.success instanceof Function) {// 如果有设定回调函数
                     res = xhr.responseText;
                     if (typeof res === 'string') {// 把响应的文本转成json格式
                         res = JSON.parse(res);
                         opt.success.call(xhr, res);// 使用call，改变this指向
                     }
                 }
             } else {
                 if (opt.error && opt.error instanceof Function) {
                     opt.error.call(xhr, res);
                 }
             }
         };
     }
 };