zepto ajax php实例,从jquery,zepto中提取的90行代码实现一个完整的ajax

这段代码展示了如何使用Ajax实现异步数据请求。通过设置请求URL、方法、数据及回调函数,处理GET和POST请求,支持JSON、XML、HTML等多种数据类型。当请求成功或失败时,会触发相应的回调函数。
摘要由CSDN通过智能技术生成

function ajax(options) {

function empty() {}

function obj2Url(obj) {

if (obj && obj instanceof Object) {

var arr = [];

for (var i in obj) {

if (obj.hasOwnProperty(i)) {

if (typeof obj[i] == 'function') obj[i] = obj[i]();

if (obj[i] == null) obj[i] = '';

arr.push(escape(i) + '=' + escape(obj[i]));

}

}

return arr.join('&').replace(/%20/g, '+');

} else {

return obj;

}

};

var opt = {

url: '', //请求地址

sync: true, //true,异步 | false 同步,会锁死浏览器,并且open方法会报浏览器警告

method: 'GET', //提交方法

data: null, //提交数据

username: null, //账号

password: null, //密码

dataType: null, //返回数据类型

success: empty, //成功返回回调

error: empty, //错误信息回调

timeout: 0, //请求超时ms

};

for (var i in options) if (options.hasOwnProperty(i)) opt[i] = options[i];

var accepts = {

script: 'text/javascript, application/javascript, application/x-javascript',

json: 'application/json',

xml: 'application/xml, text/xml',

html: 'text/html',

text: 'text/plain'

};

var abortTimeout = null;

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

xhr.onreadystatechange = empty;

clearTimeout(abortTimeout);

var result,dataType, error = false;

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {

if (xhr.responseType == 'arraybuffer' || xhr.responseType == 'blob') {

result = xhr.response;

} else {

result = xhr.responseText;

dataType = opt.dataType ? opt.dataType : xhr.getResponseHeader('content-type').split(';', 1)[0];

for (var i in accepts) {

if (accepts.hasOwnProperty(i) && accepts[i].indexOf(dataType) > -1) dataType = i;

}

try {

if (dataType == 'script') {

eval(result);

} else if (dataType == 'xml') {

result = xhr.responseXML

} else if (dataType == 'json') {

result = result.trim() == '' ? null : JSON.parse(result)

}

} catch (e) {

opt.error(e, xhr);

xhr.abort();

}

}

opt.success(result, xhr);

} else {

opt.error(xhr.statusText, xhr);

}

}

};

if (opt.method == 'GET') {

var parse = opt.url.parseURL();

opt.data = Object.assign({}, opt.data, parse.params);

opt.url = parse.pathname + '?' + obj2Url(opt.data);

opt.data = null;

}

xhr.open(opt.method, opt.url, opt.sync, opt.username, opt.password);

if (opt.method == 'POST') xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

if (opt.timeout > 0) {

abortTimeout = setTimeout(function() {

xhr.onreadystatechange = empty

xhr.abort();

opt.error('timeout', xhr);

}, opt.timeout)

}

xhr.send(opt.data ? obj2Url(opt.data) : null);

}

test

ajax({

url:'/url',

data:{

i:new Date().getTime(),

},

success:function(data,xhr){

console.log(data,xhr);

},

error:function(err,xhr){

console.log(err,xhr);

}

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值