如图:
使用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;
}
}
这里可能需要一个结束语。。