原生JS实现ajax 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" type="text/css" rel="stylesheet">
<script type="text/javascript">
/*
 *AJAX方法封装：2013年11月22日
 *参数说明：
 *type//请求方法
 *async//true表示异步读取文件
 *url//url路径
 *data//发送数据
 *timeout//设置超时时间
 *contentType//写入header头，表示请求类型
 *beforeSend//ajax请求之前调用方法，如果该函数返回false，将会阻止AJAX请求
 *success//响应成功时调用方法(XHR.status===200)
 *complete//请求完成后回调函数 (请求成功或失败之后均调用)。
 **/
(function(){
	var httpRequest=(function(){
	    try{
	        /*****FF,Google等*****/
	        return function(){
	        	return new XMLHttpRequest();
	        };
	    }catch(e){
	        try{
	            /*****IE某些版本*****/
	            return function(){
		        	return new ActiveXObject("Msxml2.XMLHTTP");
		        };
	        }catch(e){
	            try{
	                /*****其他IE版本*****/
	                return function(){
			        	return new ActiveXObject("Microsoft.XMLHTTP");
			        };
	            }catch(e){
	                return null;
	            }
	        }
	    }
	})();
	/*暴露ajax方法*/
	window.ajax=function (param){
		//处理参数
		param.type=param.type || "GET";
		param.async=param.async || true;
		param.url=param.url || window.location.href;
		param.data=param.data || "";
		param.timeout=param.timeout || 10000;
		param.complete=param.complete || function(){};
		param.contentType=param.contentType || {
			"Content-type":"x-www-form-urlencoded"
		};
		//初始化变量
		var textStatus="";
		var timer=null;
		//状态函数
		var stateChangeFn=function(){
			/*
			*readyState五个状态0:未发送请求，1:已发送请求，2:已经握手，3:正在处理请求，4:请求处理完成
			*0：请求未初始化（还没有调用 open()）。
			*1：请求已经建立，但是还没有发送（还没有调用 send()）。
			*2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
			*3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
			*4：响应已完成；您可以获取并使用服务器的响应了。
			*/
			if(XHR.readyState===4){
				if(XHR.status===200){
					//响应成功
					param.success && param.success(XHR.responseText);
					textStatus="success";
				}else {
					textStatus=XHR.status;
				}
				clearTimeout(timer);
				param.complete(textStatus);
			}
		};
		if(httpRequest === null){
			//alert("你的浏览器不支持AJAX");
			param.complete("error");
			return false;
		}else {
			XHR=new httpRequest();
		}
		if(param.beforeSend && param.beforeSend()===false){
			return false;
		}
		//post请求
		if(param.type==="POST"){
			XHR.open("POST",param.url,param.type);
			for(var key in param.contentType){
				XHR.setRequestHeader(key,param.contentType[key]);
			}
			XHR.onreadystatechange=stateChangeFn;
			XHR.send(param.data);
		}
		//get请求
		else if (param.type==="GET"){
			XHR.open("GET",param.url+"?"+param.data,param.type);
		    XHR.onreadystatechange=stateChangeFn;
		    XHR.send(null);
		}
		//设置请求过期时间，十秒超时
		timer = setTimeout(function(){//AJAX请求十秒超时
			XHR.abort();
			param.complete("timeout");
		}, param.timeout);
	}
})();
/************分割线************/
window.onload=function(){
	ajax({
		type:"GET",
		async:true,//true表示异步读取文件
		url:"ajax.txt",
		data:"a&b",//发送数据
		timeout:8000,//8秒超时
		contentType:{//请求头信息，只对POST请求有效
			"Content-type":"x-www-form-urlencoded"
		},
		beforeSend:function(){//ajax请求之前调用，如果该函数返回false，将会阻止AJAX请求
			document.getElementById("beforeSend").innerHTML="开始加载...."
		},
		success:function(msg){//响应成功时调用
			document.getElementById("success").innerHTML="返回结果："+msg;
		},
		complete:function(state){//请求完成后回调函数 (请求成功或失败之后均调用)。
			document.getElementById("complete").innerHTML="请求完成，状态："+state;
		}
	});
}
</script>
</head>
<body>
<div id="beforeSend"></div>
<div id="success"></div>
<div id="complete"></div>
</body>
</html>

　　同目录下新建ajax.txt文件，用http访问以上html文件。

 

posted @ 2016-12-15 19:06  菜蛋  阅读(2246)  评论(0)    收藏  举报