Ajax怎樣向服務器發(fā)送請求和接收服務器信息？

更新時間:2022-04-07 來源:黑馬程序員瀏覽量:

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

Ajax對象創(chuàng)建完成后，下面就要講解一下Ajax如何使用。首先詳細講解一下Ajax向服務器發(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服務器并接收回應。其聲明方式如下所示：

send(content)

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

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

Ajax接收服務器返回的信息

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

(1)readyState屬性

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

ajax

(2)onreadystatechange屬性

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

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

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

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

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

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