jq ajax 比 直接 地址访问慢的研究

如图：

使用jquery.ajax 与直接浏览器 访问同一个接口，大概有3倍左右的差距

 下面直接引用原生代码：

发现时间差不多，那么问题了，这多余的时间干嘛去了？？

数据格式的组成？

 

接下来点开看下区别

jq请求

 浏览器请求

 你是日了狗了， DNS Lookup

dns调优？？？？？？？

那是不是接着重复在浏览器异步里发送该请求是不是更快

 

果然如此，害我还以为是jQuery 封装 的xmlhttp 有问题，搞了这么久，分享下代码吧

 <script>
    // 格式化请求参数
    function formatParams(data) {
      let arr = [];
      for (let name in data) {
        arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
      }
      arr.push(('v=' + Math.random()).replace('.', ''));
      return arr.join('&');
    }
    
    function ajax_xml2(options) {
      options = options || {} // 调用函数时如果options没有指定，就给它赋值{},一个空的Object
      options.method = (options.method || 'GET').toUpperCase() // 请求格式GET、POST，默认为GET
      options.dataType = options.dataType || 'json' // 响应数据格式，默认json
      options.timeout = options.timeout || 30000
      let params = formatParams(options.data) // options.data请求的数据
      let xhr
      // 考虑兼容性
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else if (window.ActiveObject) {
        // 兼容IE6以下版本
        xhr = new ActiveXobject('Microsoft.XMLHTTP')
      }

      // 启动并发送一个请求
      if (options.method == 'GET') {
        xhr.open('get', options.url + '?' + params, true)
        xhr.send(null)
      } else if (options.method == 'POST') {
        xhr.open('post', options.url, true)
        // 设置表单提交时的内容类型
        // Content-type数据请求的格式
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        xhr.send(params)
      }

      // 设置有效时间
      setTimeout(function () {
        if (xhr.readySate != 4) {
          xhr.abort()
        }
      }, options.timeout)
      /*
        接收
        options.success成功之后的回调函数  options.error失败后的回调函数
        xhr.responseText,xhr.responseXML  获得字符串形式的响应数据或者XML形式的响应数据
      */
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          let status = xhr.status
          if ((status >= 200 && status < 300) || status == 304) {
            options.success && options.success(xhr.responseText, xhr.responseXML)
          } else {
            options.error && options.error(status)
          }
        }
      }
    }

       ajax_xml2({
            type: "post",
            async: true,//异步方式
            data: {cate_id: cate_id, card_id : id, cash_id: cash_id},
            dataType: "json",
            url: '/mobile/view/homev1/open_card_init_json.php',
            success: function(rs) {
                rs=eval('('+rs+')');
                if (rs.code == 200) {
                    category = rs.data;
                    loadCards();
                    if (loadIndex) {
                        $.msg.close(loadIndex);
                    }
                }
                $.msg.close(loadIndex);
            }
        });    
</script>

 /**
     * 
     */
    function ajax_xml(url,data,header,type,asynch){
        var xmlhttp;
        if(isEmpty(header)){
            header='application/x-www-form-urlencoded';//GET、POST、DELETE、OPTIONS、HEAD、PUT、TRACE、CONNECT
        }
        if(isEmpty(asynch)){
            asynch=true;
        }
        if(isEmpty(type)){
            type='post';//GET、POST、DELETE、OPTIONS、HEAD、PUT、TRACE、CONNECT
        }
        if(isEmpty(url)){
            return '来源地址要输入一下啊';
        }
        if (window.XMLhttpRequest){
	// code for ie7+,firefox,Chrome,Opera,Safari
                xmlhttp=new XMLhttpRequest();
        }else{
                // code for ie6,IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLhttp");
        }
        xmlhttp.onreadystatechange=function(){
            /**
             * readyState
             * 0	AJAX开始初始化
1	开始发送AJAX请求
2	AJAX请求发送完成
3	开始解析响应的资源
4	AJAX请求的步骤全部完成
        status          200与304就代表成功获取资源，例如404这些就是请求失败。详细见HTTP状态码
             */
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                return xmlhttp.responseText;
            }else{
                alter('ajax请求错误');
            }
        }
        xmlhttp.open(type,url,true);
        /*
        发送post请求时此句万万不能少
        在Form元素的语法中，EncType表明提交数据的格式
        用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。
        application/x-www-form-urlencoded：窗体数据被编码为名称/值对。这是标准的编码格式。
        multipart/form-data：窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
        text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符
        */
        xmlhttp.setRequestheader("Content-type",header);
        xmlhttp.send(data);
    }
    
    function isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
            return true;
        } else {
            return false;
        }

    }

这里可能需要一个结束语。。