加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

AJAX封装实例

发布时间:2020-12-16 00:58:51 所属栏目:百科 来源:网络整理
导读:1,创建Ajax的核心对象XMLHttpRequest 因为浏览器之间的不兼容,IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。 互联网及各种书籍中有着多种创建方式,有的复杂很多行代码,有的则简洁很少代码。当然复杂的考虑的情形更多一些。如下几乎



1,创建Ajax的核心对象XMLHttpRequest

因为浏览器之间的不兼容,IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。
互联网及各种书籍中有着多种创建方式,有的复杂很多行代码,有的则简洁很少代码。当然复杂的考虑的情形更多一些。如下几乎将IE中所有的情况都考虑到了

1
var xhr = window.XMLHttpRequest ?new XMLHttpRequest() :new ActiveXObject('Microsoft.XMLHTTP');

2,发送请求

1
2
xhr.open
xhr.send

3,处理响应

1
2
3
4
5
6
7
xhr.onreadystatechange =function(){
if(xhr.readyState == 4){
if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功
//callback
}
}
}

完整代码如下

function ajax(method,url,data,async,hander200,loading,hander404,hander500){
			var request = null;
			if(window.XMLHttpRequest){
				request = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				request = new ActiveXObject("Microsoft.XMLHTTP");
			}
			request.onreadystatechange=function(){
				if(4==request.readyState){
					if(200==request.status){
						if(hander200){
							 hander200(request);
							}
					}else if(404==request.status){
						if(hander404){
							hander404();
						}
					}else if(500==request.status){
						if(hander500){
							hander500();
						}
					}
				}else{
					if(loading){
						loading();
						}
				}
			}
			if("get"==method.toLowerCase()){
				if(data==null||data==""){
					request.open("get",async);
				}else{
					request.open("get",url+"?"+data,async);
				}
				request.send(null);
			}else if("post"==method.toLowerCase()){
				request.open("post",async);
				request.setRequestHeader("content-Type","application/x-www-form-urlencoded");
				request.send(data);
			}
			
		}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读