概述
AJAX 是一个缩写,它的全名是 Asynchronous JavaScript and XML,意思就是异步 JavaScript 和 XML,即用JavaScript执行异步网络请求。
AJAX 不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:
- HTML 或 XHTML
- CSS
- JavaScript
- DOM
- XML
- XSLT
- XMLHttpRequest
尽管 X 在 AJAX 中代表 XML, 但由于 JSON 的许多优势,比如更加轻量以及作为 Javascript 的一部分,目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 AJAX 模型中打包信息。
AJAX 的优势
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
AJAX 通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest 对象
XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
AJAX 的工作原理
其工作原理基本经过以下几个步骤:
- 客户端发送请求,请求交给 xhr。
- xhr 把请求提交给服务。
- 服务器进行业务处理。
- 服务器响应数据交给 xhr 对象。
- xhr 对象接收数据,由 JavaScript 把数据写到页面上。
AJAX 的创建步骤
根据 AJAX 的工作原理,它的创建步骤主要包括:
- 创建 XMLHttpRequest 对象,即创建一个异步调用对象。
- 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息。
- 设置响应 HTTP 请求状态变化的函数。
- 发送 HTTP 请求。
- 获取异步调用返回的数据。
- 使用 JavaScript 和 DOM 实现局部刷新。
AJAX 的具体使用
以下是 使用 AJAX 的完整流程。
1. 创建 XMLHttpRequest 对象
const request = new XMLHttpRequest();
2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
创建 HTTP 请求可以使用 XMLHttpReques t对象的 open() 方法,其语法代码如下:
request.open(method, url, async, user, password);
参数解析:
- method 要使用的HTTP方法,比如 “GET”、“POST”、“PUT”、“DELETE” 等。
- url 表示要向其发送请求的 URL 地址。
- async (可选) 一个可选的布尔参数,表示是否异步执行操作,默认为 true。如果值为 false,send() 方法直到收到答复前不会返回。如果 true,已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true,否则将引发异常