Jquery揭秘系列:ajax原生js实现详解(推荐)
9 浏览量
2020-10-22
04:02:20
上传
评论
收藏 57KB PDF 举报
Jquery揭秘系列揭秘系列:ajax原生原生js实现详解实现详解(推荐推荐)
下面小编就为大家带来一篇Jquery揭秘系列:ajax原生js实现详解(推荐)。小编觉得挺不错的，现在就分享给大
家，也给大家做个参考。一起跟随小编过来看看吧
讲到ajax这个东西，我们要知道两个对象XMLHTTPRequest和ActiveXObject ，提供了对 HTTP 协议的完全的访问，包括做出
POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM
文档形式返回内容。XMLHTTPRequest基本上算是标准化了，兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西，所
以是为了兼容IE版本，我们用的只是它的xmlHTTP功能。
为了功能的明确和清晰，我们把这个ajax代码分为5个部分：
•对象的创建对象的创建
•onreadystatechange句柄处理句柄处理
•参数拼接参数拼接
•Get功能实现功能实现
•Post功能实现功能实现
1.对象的创建对象的创建 ：：
首先创建用作 XMLHttpRequest 对象的 XMLHttp 变量。把它的值设置为 null。
按照 web 标准创建对象 (Mozilla, Opera 以及 Safari)：XMLHttp=new XMLHttpRequest()
按照微软的方式创建对象，在 Internet Explorer 6 及更高的版本可用：XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
如果捕获错误，则尝试更老的方法 (Internet Explorer 5.5) ：XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
var xhrFactory = function () {
this.init.apply(this, arguments);
}
xhrFactory.prototype = {
init: function () {
this.xhr = this.create();
},
create: function () {
var xhr = null;
try {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.Xmlhttp");
}
}
catch (err) {
xhr = new ActiveXObject("Microsoft.Xmlhttp");
}
return xhr;
}
}
2.onreadystatechange句柄:
readystate: function (timeout,callback) {
this.xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
callback(eval("(" + this.responseText + ")"));
}
else {
setTimeout(function () {
this.xhr.abort();
}, !timeout ? 15000 : timeout);
}
}
}
这里面要说一下readyState和status属性。
readyState:
评论0
最新资源