AJAX 發(fā)送請求

創(chuàng)建 XMLHttpRequest 對象(請參考上一章)后,就可以向服務器發(fā)送請求。

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

要將請求發(fā)送到服務器,我們使用 XMLHttpRequest 對象的兩個方法:

  • open()

  • send()

httpRequest.open("GET", "ajax_intro.txt", true);
httpRequest.send();

open()方法接受三個參數(shù):

  • 第一個參數(shù)是HTTP請求類型GET、POST

  • 第二個參數(shù)是您將請求發(fā)送到的URL

  • 可選的第三個參數(shù)設置請求是否異步(默認為true)

send()方法接受一個可選參數(shù):

  • 對于GET請求,不要傳遞任何值

  • 對于POST請求,傳遞名稱=值

HTTP請求:GET與POST的不通?

GET方法中,瀏覽器會將表單內(nèi)容(名稱/值對)添加到URL的末尾?后。

GET通常用于不關心安全性的簡單表單。GET為簡單表單提供了許多優(yōu)點。

  • GET請求可以被緩存

  • GET請求保留在瀏覽器歷史記錄中

  • GET請求可以加書簽

  • 處理敏感數(shù)據(jù)時,絕不應使用GET請求

  • GET請求具有長度限制(僅2048個字符)

POST方法中,內(nèi)容不會顯示在URL中。

如果表單數(shù)據(jù)包含敏感信息或個人信息,則應始終使用POST。

  • POST請求不會被緩存

  • POST請求不會保留在瀏覽器歷史記錄中

  • POST請求無法添加書簽

  • 處理敏感數(shù)據(jù)時應使用POST請求

  • POST請求對數(shù)據(jù)長度沒有限制

GET請求

以下示例顯示了如何使用JavaScript發(fā)出簡單的Ajax GET請求:

示例
httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();
測試看看?/?

在上面的示例中,您可能會得到緩存的結(jié)果。為避免這種情況,請在URL中添加一個隨機數(shù):

示例
httpRequest.open("GET", "ajax_get.php?r=" + Math.random(), true);
httpRequest.send();
測試看看?/?

如果要使用GET方法發(fā)送信息,請將信息添加到URL:

示例
httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();
測試看看?/?

POST請求

以下示例顯示了如何使用JavaScript發(fā)出簡單的Ajax POST請求:

示例
httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();
測試看看?/?

如果要使用POST方法發(fā)送信息,請使用設置HTTP標頭,setRequestHeader()并在該send()方法中指定要發(fā)送的數(shù)據(jù):

示例
httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");
測試看看?/?

setRequestHeader()方法接受兩個參數(shù):

  • 第一個參數(shù)指定Http頭名稱

  • 第二個參數(shù)指定Http頭值

URL-服務器上的文件

open()方法的第二個參數(shù)(url)是服務器上目標文件的地址。

  httpRequest.open("GET", "ajax_get.php", true);

AJAX可以發(fā)送和接收各種格式的信息,包括JSON,XML,HTML,PHP,ASP,文本等。

onreadystatechange屬性

XMLHttpRequest對象可以定義回調(diào)函數(shù)以處理響應?;卣{(diào)函數(shù)在XMLHttpRequest對象的onreadystatechange屬性中定義。

示例
httpRequest.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
 document.getElementById("output").innerHTML = this.responseText;
  }
};
測試看看?/?

同步請求

open()方法的第三個參數(shù)指定請求是異步還是同步。

要發(fā)送同步請求,請將open()方法中的第三個參數(shù)更改為false。

如果使用了同步請求,則無需指定響應函數(shù):

示例
var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;
測試看看?/?

不建議使用同步請求,因為:

  • JavaScript將停止執(zhí)行,直到服務器返回響應數(shù)據(jù)

  • 如果服務器忙或慢,則應用程序?qū)炱鸹蛲V?,用戶會感覺比較卡

丰满人妻一级特黄a大片,午夜无码免费福利一级,欧美亚洲精品在线,国产婷婷成人久久Av免费高清