AJAX 简介

AJAX允许通过与后台的Web服务器交换数据来“异步”更新网页内容。

这意味着可以更新网页的某些部分,而无需重新加载整个页面。

使用AJAX,您可以:

  • 将数据发送到Web服务器
  • 从Web服务器读取数据
  • 更新网页而无需重新加载页面

AJAX示例

以下代码显示了AJAX的基本示例:

AJAX将更改此文本


运行代码

AJAX示例解释

上面的实例核心源码如下:

HTML代码:


  <!DOCTYPE html>
  <html>
  
  <div id="output">
  <h2>AJAX将更改此文本</h2>
  <button onclick="fetchDoc()" type="button">发出请求</button>
  </div>
  
  </html>


HTML代码包含一个<div>部分(<h2><button>)。用于显示来自服务器的信息。

点按钮击<button> 时将调用fetchDoc()函数。

该函数从Web服务器请求数据并显示(不重新加载页面):

函数fetchDoc():
  function fetchDoc() {
  var httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = function() {
   if (this.readyState === 4 && this.status === 200) {
    document.getElementById("output").innerHTML = this.responseText;
   }
  };
  httpRequest.open("GET", "ajax_intro.txt", true);
  httpRequest.send();
  }

什么是AJAX?

AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)。

AJAX不是一种编程语言,它是一种用于从网页访问Web服务器的技术。

AJAX允许您在不重新加载页面的情况下向服务器发出请求。

AJAX可以与服务器通信,交换数据和更新页面,而无需刷新页面。

AJAX可以发送和接收各种格式的信息,包括JSON,XML,HTML和文本文件。

简而言之,就是使用XMLHttpRequest对象与服务器进行通信。

AJAX的两个主要功能使您可以执行以下操作:

  • 向服务器发出请求,而无需重新加载页面

  • 从服务器接收和处理数据

AJAX如何工作?

为了执行AJAX通信,JavaScript使用一个XMLHttpRequest对象向服务器发出HTTP请求并作为响应接收数据。

所有现代浏览器(Chrome,Firefox,IE7 +,Safari,Opera)都支持该XMLHttpRequest对象。

下图说明了AJAX通信是如何工作的:

AJAX如何运作

AJAX操作步骤

  1. 网页中发生了一个事件(即页面已加载或单击了按钮)

  2. XMLHttpRequest对象由JavaScript创建

  3. XMLHttpRequest对象将请求发送到Web服务器

  4. 服务器处理请求

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

  6. 响应由JavaScript读取

  7. HTML DOM由JavaScript更新

您将学到什么

在本教程的下一章中,您将学习:
如何创建XMLHttpRequest对象
如何将数据发送到Web服务器(在后台)
如何从Web服务器读取数据(在后台)
如何在不重新加载页面的情况下更新网页