js原生代碼實現ajax
*AJAX建立和服務器的連接，接收服務器的請求，處理服務器返回的數據
*開發步驟：
*1.創建XMLHttpRequest對象
*2.接收/處理服務器的響應
*3.打開和服務器的連接
*4.發送數據
*/
/**
*?創建XMLHttpRequest對象
*/
function?ajaxFunction(){
var?xmlHttp;
try{//Firefox,Opera?8.0+,Safari
xmlHttp=new?XMLHttpRequest();
}catch(e){
try{//Internet?Explorer
xmlHttp=new?ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp=new?ActiveXObject("Microsoft.XMLHTTP");?
}catch(e){}
}
}
return?xmlHttp;
}
//click?function
window.onload=function(){
//<input?type="button"?name="ok"?id="ok"?value="test?service?link"?/>
document.getElementById("ok").onclick=function(){
/*
*?1.獲取XMLHttpRequest對象
*/
var?xmlReq=ajaxFunction();
/*
*?2.處理服務器的響應
*?XMLHttpRequest對象中有壹個readyState屬性
*?readyState?屬性表示Ajax請求的當前狀態。它的值用數字代表。
*?0?代表未初始化。還沒有調用open方法
*?1代表正在加載。open方法已被調用。但send方法沒有被調用
*?2代表已加載完畢。send已被調用。請求已經開始
*?3代表交互中。服務器正在發送響應
*?4代表完畢。響應發送完畢。
*/
xmlReq.onreadystatechange=function(){
//
if(xmlReq.readyState==4){
//通過把這個值和200（壹切正常，服務器處理成功）或304（源文件沒有被修改）比較
if(xmlReq.status==200||xmlReq.status==304){
//接收服務器端數據
var?data=xmlReq.responseText;
alert("data:"+data);
}
}
};
/*
*?3.打開和服務器的連接
*?open（method，url，asynch）
*?method?請求方法?get?post
*?url?請求的路徑
*?asynch：表示請求是否要異步傳輸，默認值為true(異步)
*/
//alert(new?Date().getTime());//(解決緩存的問題)
xmlReq.open("post","../testServlet?timeStamp="+new?Date().getTime()+"&a=9",true);
/*
*?xmlReq.setRequestHeader()
*如果用post請求服務器發送的數據
*?需要將"content-Type"的首部設置為"application/x-www-form-urlencoded"。它會告訴服務器正在發送數據
*?並且數據已經符合url編碼了
*?該方法必須放在open方法之後
*/
xmlReq.setRequestHeader("content-Type","application/x-www-form-urlencoded");
/*
*?4.發送數據
*?若選用的是get請求，則不會發送任何數據，給send方法傳遞null即可
*/
/*xmlReq.send(null);*/
xmlReq.send("b=45&c=23");
};
};