AJAX - XMLHttpRequest 对象

AJAX 的关键是 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象
定义回调函数
打开 XMLHttpRequest 对象
向服务器发送请求

XMLHttpRequest 对象

所有现代浏览器都支持XMLHttpRequest目的。

这个XMLHttpRequest对象可用于与后台的 Web 服务器交换数据。这意味着可以更新网页的部分内容，而无需重新加载整个页面。

创建 XMLHttpRequest 对象

所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有一个内置的XMLHttpRequest目的。

创建语法XMLHttpRequest目的：

variable = new XMLHttpRequest();

定义回调函数

回调函数是作为参数传递给另一个函数的函数。

在这种情况下，回调函数应包含响应准备好时执行的代码。

xhttp.onload = function() {
// What to do when the response is ready
}

发送请求

要向服务器发送请求，可以使用 open() 和 send() 方法XMLHttpRequest目的：

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

示例

// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

亲自试一试 »

跨域访问

出于安全原因，现代浏览器不允许跨域访问。

这意味着网页和它尝试加载的 XML 文件必须位于同一服务器上。

91xjr 上的示例均打开位于 91xjr 域中的 XML 文件。

如果您想在您自己的网页之一上使用上面的示例，则您加载的 XML 文件必须位于您自己的服务器上。

XMLHttpRequest 对象方法

Method	Description
new XMLHttpRequest()	Creates a new XMLHttpRequest object
abort()	Cancels the current request
getAllResponseHeaders()	Returns header information
getResponseHeader()	Returns specific header information
open(method, url, async, user, psw)	Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password
send()	Sends the request to the server Used for GET requests
send(string)	Sends the request to the server. Used for POST requests
setRequestHeader()	Adds a label/value pair to the header to be sent

XMLHttpRequest 对象属性

Property	Description
onload	Defines a function to be called when the request is received (loaded)
onreadystatechange	Defines a function to be called when the readyState property changes
readyState	Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready
responseText	Returns the response data as a string
responseXML	Returns the response data as XML data
status	Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference
statusText	Returns the status-text (e.g. "OK" or "Not Found")

onload 属性

随着XMLHttpRequest对象，您可以定义一个回调函数，当请求收到响应时执行。

该函数定义在onload的属性XMLHttpRequest目的：

示例

xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

亲自试一试 »

多种回调函数

如果网站中有多个 AJAX 任务，您应该创建一个函数来执行XMLHttpRequest对象，以及每个 AJAX 任务的一个回调函数。

函数调用应包含 URL 以及响应准备好时要调用的函数。

示例

loadDoc(" url-1", myFunction1);

loadDoc(" url-2", myFunction2);

function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}

function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}

onreadystatechange 属性

这个readyState属性保存 XMLHttpRequest 的状态。

这个onreadystatechange属性定义了当readyState改变时要执行的回调函数。

这个status属性和statusText属性保存 XMLHttpRequest 对象的状态。

Property	Description
onreadystatechange	Defines a function to be called when the readyState property changes
readyState	Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready
status	200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference
statusText	Returns the status-text (e.g. "OK" or "Not Found")

这个onreadystatechange每次readyState改变时都会调用该函数。

什么时候readyState为 4，状态为 200，响应已就绪：

示例

亲自试一试 »

这个onreadystatechange事件被触发四次 (1-4)，readyState 每次更改一次。