什么是 AJAX?

HTML

AJAX 是开发人员的梦想,因为您可以:

  • 从网络服务器读取数据 - 在网页加载后
  • 更新网页而不重新加载页面
  • 将数据发送到网络服务器 - 在后台

AJAX 实例

让 AJAX 改变这个文本

亲自试一试 »


AJAX 示例说明

HTML 页面

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

HTML 页面包含一个 <div> 部分和一个 <button>。

<div> 部分用于显示来自服务器的信息。

<button> 调用一个函数(如果它被点击的话)。

该函数从网络服务器请求数据并显示出来:

Function loadDoc()

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?

AJAX = Asynchronous JavaScript AndXML.

AJAX 不是一种编程语言。

AJAX 只是使用以下组合:

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

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

AJAX 允许通过在后台与 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的某些部分,而无需重新加载整个页面。


AJAX 的工作原理

AJAX

  • 1. 网页中发生事件(页面加载,按钮被点击)
  • 2. 一个 XMLHttpRequest 对象是由 JavaScript 创建的
  • 3. XMLHttpRequest 对象向 Web 服务器发送请求
  • 4. 服务器处理请求
  • 5. 服务器将响应发送回网页
  • 6. 响应由 JavaScript 读取
  • 7. 正确的操作(如页面更新)由 JavaScript 执行

完整的 AJAX 教程

这是对 AJAX 的简短描述。

如需完整的 AJAX 教程,请访问 W3Schools AJAX 教程

如需更多 AJAX 示例,请访问 W3Schools AJAX 示例