AJAX封装实例

前端之家收集整理的这篇文章主要介绍了AJAX封装实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。



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);
			}
			
		}
原文链接:https://www.f2er.com/ajax/166106.html

猜你在找的Ajax相关文章