该函数从Web服务器请求数据并显示它

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

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

xhttp.send();

}

上面示例中使用的 “ajax_info.txt” 文件是一个简单的文本文件，内容如下：

AJAX

AJAX不是一种编程语言。

AJAX是一种从网页访问Web服务器的技术。

AJAX代表异步JavaScript和XML。

什么是AJAX？

AJAX = 异步JavaScript和XML。

AJAX不是一种编程语言。

AJAX只是使用以下组合：

浏览器内置的XMLHttpRequest对象（用于从Web服务器请求数据）JavaScript和HTML DOM（用于显示或使用数据）

AJAX是一个具有误导性名称的技术。AJAX应用程序可能使用XML传输数据，但以纯文本或JSON文本传输数据同样常见。

AJAX允许通过在幕后与Web服务器交换数据，异步更新Web页面。这意味着可以更新Web页面的部分，而不必重新加载整个页面。

AJAX的工作原理

网页中发生事件（页面加载，按钮被点击）JavaScript创建XMLHttpRequest对象XMLHttpRequest对象向Web服务器发送请求服务器处理请求服务器将响应发送回网页JavaScript读取响应JavaScript执行适当的操作（例如页面更新）

AJAX - XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象。

XMLHttpRequest对象

所有现代浏览器都支持XMLHttpRequest对象。

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

创建XMLHttpRequest对象

创建XMLHttpRequest对象的语法：

variable = new XMLHttpRequest();

示例：

var xhttp = new XMLHttpRequest();

上面示例中使用的 “ajax_info.txt” 文件是一个简单的文本文件，内容如下：

AJAX

AJAX不是一种编程语言。

AJAX是一种从网页访问Web服务器的技术。

AJAX代表异步JavaScript和XML。

跨域访问

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

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

W3Schools的示例都打开位于W3Schools域上的XML文件。

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

XMLHttpRequest对象方法

方法描述new XMLHttpRequest()创建一个新的XMLHttpRequest对象abort()取消当前请求getAllResponseHeaders()返回标头信息getResponseHeader()返回特定标头信息open(method,url,async,user,psw)指定请求send()将请求发送到服务器send(string)将请求发送到服务器setRequestHeader()将标签/值对添加到要发送的标头

XMLHttpRequest对象属性

属性描述onreadystatechange定义在readyState属性更改时调用的函数readyState保存XMLHttpRequest的状态。responseText以字符串形式返回响应数据responseXML以XML数据形式返回响应数据status返回请求的状态码statusText返回状态文本（例如 “OK” 或 “Not Found”）

AJAX - 发送请求到服务器

XMLHttpRequest对象用于与服务器交换数据。

发送请求到服务器

要向服务器发送请求，我们使用XMLHttpRequest对象的open()和send()方法：

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

xhttp.send();

方法描述:

open(method, url, async)：指定请求类型

method: 请求类型：GET或POSTurl: 服务器（文件）位置async: true（异步）或 false（同步） send()：将请求发送到服务器（用于GET）send(string)：将请求发送到服务器（用于POST）

GET还是POST？

GET比POST更简单更快，并且在大多数情况下都可以使用。

但是，在以下情况下始终使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）。向服务器发送大量数据（POST没有大小限制）。发送用户输入（可能包含未知字符），POST比GET更健壮和安全。

GET请求

一个简单的GET请求：

示例:

xhttp.open("GET", "demo_get.asp", true);

xhttp.send();

在上面的示例中，您可能会得到一个缓存的结果。为了避免这种情况，向URL添加一个唯一的ID：

示例:

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);

xhttp.send();

如果要使用GET方法发送信息，请将信息添加到URL：

示例:

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);

xhttp.send();

POST请求

一个简单的POST请求：

示例

xhttp.open("POST", "demo_post.asp", true);

xhttp.send();

要像HTML表单一样发送POST数据，请使用setRequestHeader()添加带有HTTP头的请求。在send()方法中指定要发送的数据：

示例

xhttp.open("POST", "demo_post2.asp", true);

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.send("fname=Henry&lname=Ford");

方法描述:

setRequestHeader(header, value)：向请求添加HTTP头

header: 指定标头名称value: 指定标头值

文件位于服务器上的URL

open()方法的url参数是指向服务器上文件的地址：

xhttp.open("GET", "ajax_test.asp", true);

文件可以是任何类型的文件，如 .txt 和 .xml，或服务器脚本文件，如 .asp 和 .php（它们可以在发送响应之前在服务器上执行操作）。

异步 - True还是False？

服务器请求应该异步发送。

open()方法的async参数应设置为true：

xhttp.open("GET", "ajax_test.asp", true);

通过异步发送，JavaScript无需等待服务器响应，而是可以：

在等待服务器响应时执行其他脚本在响应准备好后处理响应

onreadystatechange属性

使用XMLHttpRequest对象，您可以定义在请求接收答案时要执行的函数。

该函数在XMLHttpResponse对象的onreadystatechange属性中定义：

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

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

xhttp.send();

上面示例中使用的 “ajax_info.txt” 文件是一个简单的文本文件，内容如下：

AJAX

AJAX不是一种编程语言。

AJAX是一种从网页访问Web服务器的技术。

AJAX代表异步JavaScript和XML。

同步请求

要执行同步请求，将open()方法中的第三个参数更改为false：

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

有时候async = false用于快速测试。您还会在旧的JavaScript代码中找到同步请求。

由于代码将等待服务器完成，因此无需onreadystatechange函数：

示例

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

xhttp.send();

document.getElementById("demo").innerHTML = xhttp.responseText;

不推荐使用同步XMLHttpRequest（async = false），因为JavaScript将停止执行，直到服务器响应准备就绪。如果服务器很忙或很慢，应用程序将挂起或停止。

同步XMLHttpRequest正在从Web标准中删除的过程中，但此过程可能需要很多年。

现代开发工具建议警告使用同步请求，可能在发生时抛出InvalidAccessError异常。

AJAX - 服务器响应

在AJAX中，通过onreadystatechange属性、readyState属性、status属性和statusText属性来管理XMLHttpRequest对象的状态和服务器响应。

onreadystatechange 属性 定义在 readyState 属性更改时要调用的函数。 readyState 属性 保存 XMLHttpRequest 的状态。

0：请求未初始化1：服务器连接已建立2：接收请求3：处理请求4：请求完成且响应准备就绪 status 属性 200：“OK” 403：“Forbidden” 404：“Page not found” 获取完整列表请查看 Http Messages Reference statusText 属性 返回状态文本（例如 “OK” 或 “Not Found”）

每次 readyState 更改时都会调用 onreadystatechange 函数。

当 readyState 为 4 且 status 为 200 时，表示响应已准备好。

示例

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML =

this.responseText;

}

};

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

xhttp.send();

}

上述示例中使用的 “ajax_info.txt” 文件是一个简单的文本文件。

AJAX

AJAX 不是一种编程语言。

AJAX 是一种从网页访问 Web 服务器的技术。

AJAX 代表异步 JavaScript 和 XML。

onreadystatechange 事件被触发四次（1-4），每次 readyState 更改都会触发一次。

使用回调函数

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

示例

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {

var xhttp;

xhttp=new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

cFunction(this);

}

};

xhttp.open("GET", url, true);

xhttp.send();

}

function myFunction1(xhttp) {

// 具体操作在这里

}

function myFunction2(xhttp) {

// 具体操作在这里

}

服务器响应属性和方法

responseText 以字符串形式获取响应数据responseXML 以 XML 数据形式获取响应数据getAllResponseHeaders() 从服务器资源返回所有标头信息getResponseHeader() 从服务器响应返回特定的标头信息

示例

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.getAllResponseHeaders();

}

};

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");

}

};

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

xhttp.send();

AJAX XML 示例

AJAX可用于与XML文件进行交互式通信。以下是一个展示如何使用AJAX从XML文件中获取信息的示例：

示例说明

当用户点击上面的 “获取 CD 信息” 按钮时，将执行 loadDoc() 函数。

loadDoc() 函数创建一个XMLHttpRequest对象，添加在服务器响应就绪时要执行的函数，并将请求发送到服务器。

当服务器响应就绪时，将构建一个HTML表格，从XML文件中提取节点（元素），最终使用包含XML数据的HTML表格更新 “demo” 元素：

LoadXMLDoc()

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "cd_catalog.xml", true);

xhttp.send();

}

function myFunction(xml) {

var i;

var xmlDoc = xml.responseXML;

var table = "标题艺术家";

var x = xmlDoc.getElementsByTagName("CD");

for (i = 0; i < x.length; i++) {

table += "" +

x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +

"" +

x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +

"";

}

document.getElementById("demo").innerHTML = table;

}

在上述示例中，通过点击按钮触发 loadDoc() 函数，该函数使用AJAX从名为 “cd_catalog.xml” 的XML文件中获取信息。当服务器响应就绪时，myFunction() 函数会解析XML并构建一个包含CD信息的HTML表格，最终更新具有 “demo” ID 的元素。

AJAX PHP 示例

AJAX可用于创建更交互式的应用程序。以下示例演示了如何在用户在输入字段中输入字符时，网页可以与Web服务器通信：

示例说明

在上述示例中，当用户在输入字段中键入字符时，将执行名为 “showHint()” 的函数。该函数由 onkeyup 事件触发。

以下是HTML代码：

在下面的输入字段中开始输入名字：

建议：

代码解释

首先，检查输入字段是否为空（str.length == 0）。如果是，清除 txtHint 占位符的内容并退出函数。

但是，如果输入字段不为空，则执行以下操作：

创建一个 XMLHttpRequest 对象创建在服务器响应就绪时要执行的函数将请求发送到服务器上的 PHP 文件（gethint.php）注意，添加了 q 参数 gethint.php?q="+strstr 变量保存输入字段的内容

PHP 文件 - “gethint.php”

PHP文件检查一个包含名字的数组，并将相应的名字返回给浏览器：

// 包含名字的数组

$a[] = "Anna";

$a[] = "Brittany";

// ...（省略了其他名字）

// 从 URL 获取 q 参数

$q = $_REQUEST["q"];

$hint = "";

// 如果 $q 与 "" 不同，则从数组中查找所有提示

if ($q !== "") {

$q = strtolower($q);

$len = strlen($q);

foreach ($a as $name) {

if (stristr($q, substr($name, 0, $len))) {

if ($hint === "") {

$hint = $name;

} else {

$hint .= ", $name";

}

}

}

}

// 如果没有找到提示，则输出 "no suggestion"，否则输出正确的值

echo $hint === "" ? "no suggestion" : $hint;

?>

在上述示例中，当用户在输入字段中输入字符时，通过AJAX与服务器通信，并从PHP文件中获取相应的建议。建议将在 “txtHint” 元素中显示。

AJAX ASP 示例

AJAX可用于创建更交互式的应用程序。以下示例演示了如何在用户在输入字段中输入字符时，网页可以与Web服务器通信：

示例说明

在上述示例中，当用户在输入字段中键入字符时，将执行名为 “showHint()” 的函数。该函数由 onkeyup 事件触发。

以下是HTML代码：

在下面的输入字段中开始输入名字：

建议：

代码解释

首先，检查输入字段是否为空（str.length == 0）。如果是，清除 txtHint 占位符的内容并退出函数。

但是，如果输入字段不为空，则执行以下操作：

创建一个 XMLHttpRequest 对象创建在服务器响应就绪时要执行的函数将请求发送到服务器上的 ASP 文件（gethint.asp）注意，添加了 q 参数 gethint.asp?q="+strstr 变量保存输入字段的内容

ASP 文件 - “gethint.asp”

ASP文件检查一个包含名字的数组，并将相应的名字返回给浏览器：

<%

response.expires=-1

dim a(30)

' 填充数组

a(1)="Anna"

a(2)="Brittany"

' ...（省略了其他名字）

' 从 URL 获取 q 参数

q=ucase(request.querystring("q"))

' 如果 q 的长度大于 0，则查找数组中的所有提示

if len(q)>0 then

hint=""

for i=1 to 30

if q=ucase(mid(a(i),1,len(q))) then

if hint="" then

hint=a(i)

else

hint=hint & " , " & a(i)

end if

end if

next

end if

' 如果没有找到提示，则输出 "no suggestion"，否则输出正确的值

if hint="" then

response.write("no suggestion")

else

response.write(hint)

end if

%>

在上述示例中，当用户在输入字段中输入字符时，通过AJAX与服务器通信，并从ASP文件中获取相应的建议。建议将在 “txtHint” 元素中显示。

AJAX 数据库示例

AJAX可用于与数据库进行交互式通信。以下示例演示了如何使用AJAX从数据库获取信息：

示例

选择一个客户：

选择客户:

ALFKI

ANATR

ANTON

示例说明 - showCustomer() 函数

当用户在上面的下拉列表中选择一个客户时，将执行名为 “showCustomer()” 的函数。该函数由 “onchange” 事件触发：

function showCustomer(str) {

var xhttp;

if (str == "") {

document.getElementById("txtHint").innerHTML = "";

return;

}

xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.responseText;

}

};

xhttp.open("GET", "getcustomer.php?q="+str, true);

xhttp.send();

}

showCustomer() 函数执行以下操作：

检查是否选择了客户创建一个 XMLHttpRequest 对象创建在服务器响应就绪时要执行的函数将请求发送到服务器上的文件

注意，将一个参数（q）添加到 URL（带有下拉列表的内容）

AJAX 服务器页面 - “getcustomer.php”

由上面的 JavaScript 调用的服务器上的页面是一个名为 “getcustomer.php” 的 PHP 文件。

“getcustomer.php” 中的源代码针对数据库运行一个查询，并以 HTML 表格的形式返回结果：

$mysqli = new mysqli("servername", "username", "password", "dbname");

if($mysqli->connect_error) {

exit('Could not connect');

}

$sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country

FROM customers WHERE customerid = ?";

$stmt = $mysqli->prepare($sql);

$stmt->bind_param("s", $_GET['q']);

$stmt->execute();

$stmt->store_result();

$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);

$stmt->fetch();

$stmt->close();

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

echo "

?>

在上述示例中，当用户选择一个客户时，通过AJAX与服务器通信，并从数据库中获取相应的客户信息。客户信息将以HTML表格的形式显示在具有 “txtHint” ID 的元素中。

在HTML表格中显示XML数据

此示例循环遍历每个 元素，并在HTML表格中显示 和