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