AJAX简介


目录

    显示目录

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

  • 从网络服务器读取数据 - 页面加载后

  • 更新网页而不重新加载页面

  • 将数据发送到网络服务器 - 在后台

AJAX 示例

让 AJAX 更改此文本



自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

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> 调用一个函数(如果单击它)。

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

函数loadDoc()

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


什么是 AJAX?

AJAX=A同步JavaScript And XML。

AJAX 不是一种编程语言。

AJAX 仅使用以下组合:

  • 浏览器内置 XMLHttpRequest 对象(用于从 Web 服务器请求数据)

  • JavaScript 和 HTML DOM(用于显示或使用数据)

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

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


AJAX 的工作原理

  • 1. 网页中发生事件(页面被加载,按钮被点击)

  • 2. JavaScript 创建一个 XMLHttpRequest 对象

  • 3. XMLHttpRequest对象向Web服务器发送请求

  • 4. 服务器处理请求

  • 5. 服务器将响应发送回网页

  • 6. JavaScript 读取响应

  • 7. 正确的操作(如页面更新)由 JavaScript 执行


现代浏览器(获取 API)

现代浏览器可以使用 Fetch API 而不是 XMLHttpRequest 对象。

Fetch API 接口允许 Web 浏览器向 Web 服务器发出 HTTP 请求。

如果您使用 XMLHttpRequest 对象,Fetch 可以以更简单的方式执行相同的操作。