ajax----發送異步請求的步驟

1）獲取（建立）Ajax對象：獲取XMLHttpRequest對象
2）建立請求：調用xhr的open方法
3）在發送請求以前須要設置回調函數：綁定指定xhr的onreadystatechange事件
4）調用send()方法發送請求

 

//建立XMLHttpReuquest 對象
function createXhr() {
 var xhr = null;
 //瀏覽器判斷
 if (window.XMLHttpRequest) {
 //能夠直接new出來對象的說明是IE七、八、9 Chrome、FireFox等瀏覽器
 xhr = new XMLHttpRequest();
 } else {
 //這樣的就是IE 5.五、 IE 6等低版本的瀏覽器
 xhr = new ActiveXObject("Microsoft.XMLHttp");
 }
 return xhr;
}

//建立異步請求方法get
function getServerText() {
 //獲取xhr
 var xhr = createXhr();
 //建立請求
 xhr.open("get", "server.php", "true");//true表示異步請求
 //設置回調函數
 xhr.onreadystatechange = function () {
 if (xhr.readyState == 4 && xhr.status == 200) {
 //服務器已經正確處理請求且正確響應數據到客戶端
 var resText = xhr.responseText;//返回服務器響應文本
 //獲取服務器響應給客戶端的文本即server.php中的文本內容
 document.getElementById("showText").innerHTML = resText;
 }
 }
 //發送請求
 xhr.send(null);//請求方式爲get,因此請求體必須是null
}

實例：模擬服務器發送請求

    ajax提交數據(get方法)：

   $(document),ready(function(){
 　　$("#txtName").blur(function(){
　　1）獲取xhr
　　var xhr =createxhr();

　　2）建立請求
　　var name = $("#txtName").val();
　　var url = "checkname.jsp?name="+name;
　　xhr.open("get",url,true);

　　3）設置回調函數

　　xhr.onreadystatechange = function(){

　　if(xhr.readyState==4 && xhr.status==200){
　　//服務器已經正確處理請求且正確響應數據到客戶端
 　　var resText= xhr.responseText;//返回服務器響應文 本

　　$("#txtNameTip").html(resText);//獲取響應回來的 數據

　　　　 }
　　}

　　4）發送請求

　　xhr.send (null);//get發送請求的方法
　　　　});

　　});

//建立異步請求方法post

        $(document),ready(function(){
　　　　$("#txtName").blur(function(){
　　1）獲取xhr
　　　　var xhr =createxhr();

　　2）建立請求
　　　　var name = $("#txtName").val();
　　　　var url = "checkname.jsp";
　　　　xhr.open("post",url,true);
　   　xhr.setRequestHeader("Content-Type","application/x-www- form-urlencoded");

3）設置回調函數
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){ //注意順序
//服務器已經正確處理請求且正確響應數據到客戶端
var resText= xhr.responseText;//返回服務器響應文
本
$("#txtNameTip").html(resText);//獲取響應回來的
數據
}
}

4）發送請求

xhr.send ("name="+name);//Post方法發送方法

注意：必須在建立請求以後，發送請求以前使用setRequestHeader
()顯示更改Content-Type消息頭的值爲
application/x-www-form-urlencoded ，不然獲取不到傳遞過去的
數據
})

});