橘子味的心
标题: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完成适当的动作(像更新页面)

目录

分类