Ajax向服務(wù)器發(fā)送請求和接收返回的信息

Ajax向服務(wù)器發(fā)送請求

(1)open()方法

open()方法用于創(chuàng)建一個新的HTTP請求，并指定此請求的類型(如GET、POST等)、URL以及驗證信息，其聲明方式如下所示：

open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

在上述聲明中，method用于指定請求的類型，其值可為POST、GET、PUT及PROPFIND，大小寫不敏感;URL表示請求的地址，可以為絕對地址也可以為相對地址，并且可以傳遞查詢字符串。其余參數(shù)為可選參數(shù)，其中，asyncFlagy用于指定請求方式，同步請求為false，默認為異步請求true;userName用于指定用戶名，password用于指定密碼。

(2)send()方法

send()方法用于發(fā)送請求到HTTP服務(wù)器并接收回應(yīng)。其聲明方式如下所示：

send(content)

在上述聲明中，content用于指定要發(fā)送的數(shù)據(jù)，其值可為DOM對象的實例、輸入流或字符串，一般與POST請求類型配合使用，需要注意的是，如果請求聲明為同步，該方法將會等待請求完成或者超時才會返回，否則此方法將立即返回。

需要注意的是，在使用GET方式傳遞特殊字符或中文參數(shù)時，要使用JavaScript中的encodeURIComponent()函數(shù)將其轉(zhuǎn)換成“%十六進制數(shù)”的形式，防止在某些瀏覽器(如IE瀏覽器)中中文亂碼的問題。

Ajax接收服務(wù)器返回的信息

了解Ajax向服務(wù)器發(fā)送請求后，下面將對Ajax如何接收服務(wù)器返回的信息(例如，HTML標(biāo)簽、CSS樣式、字符串、XML、JSON等)，進行詳細講解。具體如下：

(1)readyState屬性

readyState屬性用于返回Ajax的當(dāng)前狀態(tài)，狀態(tài)值有5種形式，具體如表所示。

(2)onreadystatechange屬性

onreadystatechange事件屬性用于感知readyState屬性狀態(tài)的改變。為了大家更好的理解這兩個屬性的使用，下面創(chuàng)建一個服務(wù)器端的文件index.php，用于輸出字符串，然后在瀏覽器端index.html中向服務(wù)器端發(fā)送請求，并在控制臺輸出狀態(tài)值。具體示例如下所示：

創(chuàng)建服務(wù)器端文件：index.php

<?php
    echo "testing..."; 
?>

創(chuàng)建瀏覽器端文件：index.html

<script>
    //主流瀏覽器創(chuàng)建Ajax對象
    var xhr = new XMLHttpRequest();
    //感知Ajax狀態(tài)的改變
    xhr.onreadystatechange=function(){
       //輸出Ajax當(dāng)前的狀態(tài)值
       console.log(xhr.readyState);
    }
    //創(chuàng)建一個新的HTTP請求
    xhr.open("get","./index.php");
    //向服務(wù)器端發(fā)送新建的HTTP請求
    xhr.send(null);
</script>

在瀏覽器中訪問客戶端文件，按“F12”鍵，切換到控制臺，查看輸出結(jié)果，具體如下圖所示。

感知Ajax狀態(tài)的改變

從圖中可以看出，通過onreadystatechange事件屬性可以清晰的感知Ajax狀態(tài)的改變，同時使用readyState獲取轉(zhuǎn)變后的狀態(tài)值。例如Ajax從0(未初始化)狀態(tài)變成1(初始化)狀態(tài)值時，Ajax此時的狀態(tài)值為1。

(3)status屬性

status屬性用于返回當(dāng)前請求的HTTP狀態(tài)碼，常見的狀態(tài)碼如表所示。

值得一提的是，在感知當(dāng)前Ajax對象狀態(tài)時，為了追求程序的嚴(yán)謹(jǐn)性，需要同時判斷當(dāng)前HTTP狀態(tài)status是否等于200(請求成功)。

需要注意的是，Ajax中的statusText屬性，僅當(dāng)數(shù)據(jù)發(fā)送并接收完畢后，才可以獲取當(dāng)前請求的響應(yīng)狀態(tài)。

(4)獲取響應(yīng)信息的相關(guān)屬性

當(dāng)數(shù)據(jù)接收完畢且請求服務(wù)器的請求成功時，即可以使用Ajax中提供的相關(guān)屬性獲取服務(wù)器的響應(yīng)信息。具體的屬性及相關(guān)說明如下表所示。

在上表中，responseText屬性用于返回文本格式的響應(yīng)數(shù)據(jù);屬性responseBody表示直接從服務(wù)器返回并未經(jīng)解碼的二進制數(shù)據(jù);responseXML屬性用于接收XML數(shù)據(jù)格式的響應(yīng)數(shù)據(jù)。

什么是Ajax?Ajax都有哪些優(yōu)點和缺點?

ajax的常用參數(shù)介紹【java技術(shù)文章】

web前端最新AJAX教程

傳智教育HTML&js+前端開發(fā)培訓(xùn)課程