DOM XMLHttpRequest

通過 XMLHttpRequest 對象，您可以在不重新加載整個頁面的情況下更新網頁中的某個部分。

XMLHttpRequest 對象

XMLHttpRequest 對象用于幕后與服務器交換數據。

XMLHttpRequest 對象是開發者的夢想，因為您可以：

在不重新加載頁面的情況下更新網頁

在頁面已加載后從服務器請求數據

在頁面已加載后從服務器接收數據

在后臺向服務器發送數據

創建 XMLHttpRequest 對象

所有現代的瀏覽器(IE7+、Firefox、Chrome、Safari 和 Opera)都有一個內建的 XMLHttpRequest 對象。

創建 XMLHttpRequest 對象的語法

xmlhttp=new XMLHttpRequest();

舊版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 對象：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

為了處理所有現代的瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建一個 XMLHttpRequest 對象，如果不支持，則創建一個 ActiveX 對象：

實例

if (window.XMLHttpRequest)

{

// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼

xmlhttp=new XMLHttpRequest();

}

else

{

// IE6, IE5 瀏覽器執行代碼

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

嘗試一下 ?

發送一個請求到服務器

為了發送一個請求到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","xmlhttp_info.txt",true);

xmlhttp.send();

方法

描述

open(method,url,async)

規定請求的類型，URL，請求是否應該進行異步處理。

method：請求的類型：GET 或 POST

url：文件在服務器上的位置

async：true(異步)或 false(同步)

send(string)

發送請求到服務器。

string：僅用于 POST 請求

GET 或 POST？

GET 比 POST 簡單并且快速，可用于大多數情況下。

然而，下面的情況下請始終使用 POST 請求：

緩存的文件不是一個選項(更新服務器上的文件或數據庫)

發送到服務器的數據量較大(POST 沒有大小的限制)

發送用戶輸入(可以包含未知字符)，POST 比 GET 更強大更安全

URL - 服務器上的文件

open() 方法的 url 參數，是一個在服務器上的文件的地址：

xmlhttp.open("GET","xmlhttp_info.txt",true);

該文件可以是任何類型的文件(如 .txt 和 .xml)，或服務器腳本文件(如.html 和 .php，可在發送回響應之前在服務器上執行動作)。

異步 - True 或 False?

如需異步發送請求，open() 方法的 async 參數必需設置為 true：

xmlhttp.open("GET","xmlhttp_info.txt",true);

發送異步請求對于 Web 開發人員是一個巨大的進步。在服務器上執行的許多任務非常費時。

通過異步發送，JavaScript 不需要等待服務器的響應，但可以替換為：

等待服務器的響應時，執行其他腳本

響應準備時處理響應

Async=true

當使用 async=true 時，在 onreadystatechange 事件中響應準備時規定一個要執行的函數：

實例

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","xmlhttp_info.txt",true);

xmlhttp.send();

嘗試一下 ?

Async=false

如需使用 async=false，請更改 open() 方法的第三個參數為 false：

xmlhttp.open("GET","xmlhttp_info.txt",false);

不推薦使用 async=false，但如果處理幾個小的請求還是可以的。

請記住，JavaScript 在服務器響應準備之前不會繼續執行。如果服務器正忙或緩慢，應用程序將掛起或停止。

注意：當您使用 async=false 時，不要編寫 onreadystatechange

函數 - 只需要把代碼放置在 send() 語句之后即可：

實例

xmlhttp.open("GET","xmlhttp_info.txt",false);

xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

嘗試一下 ?

服務器響應

如需從服務器獲取響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性

描述

responseText

獲取響應數據作為字符串

responseXML

ResponseXML 屬性返回 XML 文檔對象，可使用 DOM 節點樹的方法和屬性來檢查和解析該對象。

responseText 屬性

如果來自服務器的響應不是 XML，請使用 responseText 屬性。

responseText 屬性以字符串形式返回響應，您可以相應地使用它：

實例

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

嘗試一下 ?

responseXML 屬性

如果來自服務器的響應是 XML，且您想要把它解析為 XML 對象，請使用 responseXML 屬性：

實例

xmlDoc=xmlhttp.responseXML;

var txt="";

x=xmlDoc.getElementsByTagName("ARTIST");

for (i=0;i

{

txt=txt + x[i].childNodes[0].nodeValue + "";

}

document.getElementById("myDiv").innerHTML=txt;

嘗試一下 ?

onreadystatechange 事件

當請求被發送到服務器，我們要根據響應執行某些動作。

onreadystatechange 事件在每次 readyState 變化時被觸發。

readyState 屬性持有 XMLHttpRequest 的狀態。

XMLHttpRequest 對象的三個重要的屬性：

屬性

描述

onreadystatechange

存儲函數(或函數的名稱)在每次 readyState 屬性變化時被自動調用

readyState

存放了 XMLHttpRequest 的狀態。從 0 到 4 變化：

0：請求未初始化

1：服務器建立連接

2：收到的請求

3：處理請求

4：請求完成和響應準備就緒

status

200："OK"

404：找不到頁面

在 onreadystatechange 事件中，我們規定當服務器的響應準備處理時會發生什么。

當 readyState 是 4 或狀態是 200 時，響應準備：

實例

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

嘗試一下 ?

注意：onreadystatechange 事件在每次 readyState 發生變化時被觸發，總共觸發了四次。

更多實例

檢索 ASP 文件的內容

當用戶在輸入字段鍵入字符時，網頁如何與 Web 服務器進行通信。

從數據庫中檢索內容

網頁如何通過 XMLHttpRequest 對象從數據庫中提取信息。

檢索 XML 文件的內容

創建一個 XMLHttpRequest 從 XML 文件中檢索數據并把數據顯示在一個 HTML 表格中。

原文鏈接:https://rumenz.com/dom/dom_httprequest.html

DOM 克隆節點

總結

以上是生活随笔為你收集整理的php xmlhttprequest,DOM XMLHttpRequest的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。