JavaScript ajax 简介

AJAX 是开发者的梦想，因为你可以：

  • 更新一个网页无刷新页面
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台发送数据到服务器

每章都自己动手测试这些实例

在每一章中，您可以在线编辑示例，然后单击运行按钮查看结果。

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

<script>
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.html", "ajax_info.txt", true);
  xhttp.send();
}
</script>

让我试试

AJAX 实例说明

HTML包含了 <div> 部分和 <button> 部分.

<div> 部分用于显示从服务器发来的信息.

<button> 调用一个函数 (如果它被单击).

该函数请求来自web服务器的数据并显示它:

函数 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 And XML（异步JavaScript和XML）.

AJAX 不是编程语言。

AJAX 是下面两个方面的组合:

  • 浏览器内建的XMLHttpRequest对象 (从web服务器请求数据)
  • JavaScript 和 HTML DOM (显示或者使用数据)

AJAX 是一个误导的名字. AJAX 应用程序可能使用xml来传输数据, 但同样常见的传输数据为纯文本或JSON文本.

AJAX 允许网页异步更新的数据交换与Web服务器在后台交互. 这意味着它可以更新网页的一部分，无需重新加载整个页面.

AJAX 如何工作

AJAX

1. 一个事件发生在一个网页（页面加载，点击按钮）发生
2. 由JavaScript创建一个XMLHttpRequest对象
3. XMLHttpRequest 对象发一个请求到web server
4. 服务器处理这个请求
5. 服务器发送一个响应给web页面
6. JavaScript读取响应
7. 由JavaScript完成适当的动作（像更新页面）