<!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文件。