一篇博客搞懂 Ajax 是什么(Ajax原来这么简单)

古之立大事者，不唯有超世之才，亦必有坚忍不拔之志——苏轼javascript

写在前面

在接触 Ajax 以前，咱们一直都是同步交互，所谓同步交互，就是指发送一个请求，须要等待返回，而后才可以发送下一个请求。同步相互至关于排队，轮到下一个的状况会由于前一个而有所不一样。html

Ajax 能够帮助咱们实现异步交互，所谓的异步交互，就是指发送一个请求，不须要等待返回，随时能够在发送下一个请求。同步交互与异步交互的区别在于同步交互须要等待结果，而异步交互不须要等待。java

Ajax 概述

Ajax 是什么

Ajax 是 Asynchronous Javavascript XML 的缩写，被译为异步 JavaScript 和 XML 。Ajax 自己并非一个新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的 “新”方法。shell

当使用 Ajax 模型，HTML 页面可以快速地将数据逐步更新显示在用户界面上，不须要重载(刷新)整个页面。这使得 HMTL 页面可以快速的对用户的操做进行反馈。浏览器

尽管 Ajax 中的 “X” 表明 XML ，但因为 JSON 的许多优点，目前 JSON 的使用比 XML 更加广泛。 JSON 和 XML 都被用于在 Ajax 模型中封装数据。安全

异步交互的优点

异步交互相比同步交互的优点主要具备如下几点:服务器

用户操做无须像同步交互必须等待结果。
异步交互只需与服务器端交换必要的数据内容，而不是将全部数据所有更新。
异步交互对带宽形成的压力相比同步交互更小。
经过 Ajax 实现异步交互不须要任何第三方插件，只要浏览器支持 JavaScript 语言便可实现。

异步交互的劣势

异步交互相比同步交互并非优点，它也存在一些问题：markdown

异步交互破坏了浏览器原有的前进和后退机制。
若是后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可能会形成问题。
Ajax 实现异步交互对搜索引擎支持较弱。
Ajax 实现异步交互会引发一些 Web 安全问题，例如 SQL 注入攻击、跨站点脚本攻击等问题。

Ajax 涉及的技术

Ajax 只是为实现异步交互的手段，不是一种技术，而是多种技术的整合。其中包括如下几种技术：app

HTML 页面
CSS
JavaScript 脚本语言
Document Object Model (DOM)
XML
XMLHttpRequest 对象

上述技术中，XMLHttpRequest 对象是实现 Ajax 异步交互的核心。异步

Ajax 的核心对象

实现 Ajax 异步交互的核心就是 XMLHttpRequest 对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。

XMLHttpRequest 对象提供了一个经过 URL 来获取数据的简单方式，而且不会是整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。

XMLHttpRequest 对象最初有微软设计，随后被 Mozilla 、 Apple 和 Google 采纳。现在，该对象已经被 W3C 组织标准化。经过该对象，能够很容易地获得一个 URL 上的资源数据。尽管名字里 XML，但 XMLHttpRequest 对象能够获得全部类型的数据资源，并不局限于 XML 格式的数据。

实现 Ajax 异步交互

实现 Ajax 的执行步骤

实现 Ajax 异步交互须要服务器逻辑进行配合，而做为客户端的 HTML 页面须要完成如下步骤：

建立 Ajax 的核心对象 XMLHttpRequest 对象。
经过 XMLHttpRequest 对象的 open() 方法与服务端创建链接。
构建请求所需的数据内容，并经过 XMLHttpRequest 对象的 send() 方法发送给服务器端
经过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通讯状态
接受并处理服务端向客户端响应的数据结果
将处理结果更新到 HTML 页面中

建立 XMLHttpRequest 对象。

XMLHttpRequest 对象已经被 W3C 组成进行标准化，可是仍是存在 IE 浏览器的兼容问题，不过比较好的就是微软已经放弃了自家的 IE 浏览器，也就说咱们几乎已经不用考虑浏览器兼容问题了。

XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象。在调用下列任何其余方法以前，必须先调用该构造函数，或经过其余方式，获得一个实例对象。

示例代码以下所示

var request = new XMLHttpRequest();
复制代码

与服务器创建链接

经过 XMLHttpRequest 对象的 open() 方法与服务器创建链接，该方法的语法结构以下所示：

xhrReq.open(method, url, [async][, user][, password]);
复制代码

参数说明：

method: 表示当前的请求方式

常见的为 GET 和 POST
url: 表示当前请求的服务器端地址链接
async: 一个可选的布尔参数，表示是否异步执行操做，默认为true。
user: 可选的用户名用于认证用途；默认为null。
password: 可选的密码用于认证用途，默认为null。

给服务端发送数据

经过 XMLHttpRequest 对象的 send() 方法，将客户端页面的数据发送给服务端，该方法的语法结构以下所示：

xhrReq.send([body])
复制代码

参数说明：

body: 在 XHR 请求中要发送的数据体，若是不传递数据则为 null

绑定 onreadystatechange 事件

onreadystatechange 事件用于监听服务器端的通讯状态，该事件监听的依靠是 XMLHttpRequest.readyState 属性，该属性返回一个 XMLHttpRequest 代理当前所处的状态，只要当前属性值被改变，就触发 onreadystatechange 事件。该属性有 5 种状态，以下表所示：

值	状态	描述
`0`	`UNSENT`	代理被建立，但还没有调用 open() 方法。
`1`	`OPENED`	`open()` 方法已经被调用。
`2`	`HEADERS_RECEIVED`	`send()` 方法已经被调用，而且头部和状态已经可得到。
`3`	`LOADING`	正在响应
`4`	`DONE`	响应已完毕

XMLHttpRequest.responseText属性用于接收服务器端的响应结果。

示例代码以下所示：

这里随便找了个 RUL 做为测试

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax的实现步骤</title>
</head>

<body>
<button id="btn">按钮</button>
  <script> var btn = document.getElementById('btn') btn.addEventListener('click', function () { // 1. 实例化 XMLHttpRequest 对象 var xhrReq = new XMLHttpRequest(); // 2. 经过 .open() 方法创建链接 xhrReq.open('GET', 'https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState'); // 3. 经过 .send() 方法向服务器端发送数据 xhrReq.send(null); // 4. 绑定 onreadystatechange 事件 xhrReq.onreadystatechange = function () { /* .readyState 属性表示当前状态 值 描述 0 代理被建立，但还没有调用 open() 方法。 1 open() 方法已经被调用。 2 send() 方法已经被调用，而且头部和状态已经可得到。 3 正在响应 4 响应已完毕 */ if (xhrReq.readyState === 4) { console.log(xhrReq.responseText); } } }) </script>
</body>
   
</html>
复制代码

执行结果以下图所示：

实现 Ajax 的异步交互的问题

onreadystatechange 事件的绑定位置

onreadystatechange 事件的绑定位置不一样，XMLHttpRequest.readyState 属性的结果也不同，上面的代码中XMLHttpRequest.readyState 属性的执行结果为

2
3
4
复制代码

咱们若是改一下调用位置的话，其执行结果会怎么样呢？

示例代码以下所示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现 Ajax 异步交互</title>
</head>

<body>
  <button id="btn">按钮</button>
  <script> var btn = document.getElementById('btn') btn.addEventListener('click', function () { var xhrReq = new XMLHttpRequest(); xhrReq.onreadystatechange = function () { /* .readyState 属性表示当前状态 值 描述 0 代理被建立，但还没有调用 open() 方法。 1 open() 方法已经被调用。 2 send() 方法已经被调用，而且头部和状态已经可得到。 3 正在响应 4 响应已完毕 */ console.log(xhrReq.readyState); } xhrReq.open('GET', 'https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState'); xhrReq.send(null); }) </script>
</body>

</html>
复制代码

执行结果以下图所示

从执行结果能够看出，Ajax 的实现步骤并非只有那一种。

可是为何没有状态 0 呢？这是由于咱们在绑定这个以前必须完成对象的初始化，而状态 0 表示对象未初始化，因此不能获得状态 0。

根据这些状态的不一样咱们能够完成不一样的操做。

send() 方法的问题

若是当前的请求方式为 GET 的话， send() 方法中只能传递 null 值，若是想要添加请求数据的话须要将请求添加地址链接中。

发送数据的格式以下所示

name=value
复制代码

若是多个数据的话须要使用 & 分隔。

请求方式

GET 请求方式

Ajax 异步交互中使用 GET 请求方式的话，须要注意一下两个问题：

将构建的请求数据添加到 open() 方法中的 URL 地址中。
发送请求数据中的 send() 方法中参数设置为 null 值。

POST 请求方式

Ajax 异步交互中若是使用的是 POST 请求的话，须要注意下面两个问题

调用 send() 方法以前， open() 方法以后，须要经过 XMLHttpRequest 对象的 setRequestHeader() 方法设置请求头信息。

setRequestHeader() 语法结构以下所示
```
xhrReq.setRequestHeader(header, value);
复制代码
```
参数说明：
- header: 属性的名称。
- value: 属性的值。
经过 XMLHttpRequest 对象的 send() 方法发送请求数据。

示例代码以下所示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>POST请求方式</title>
</head>

<body>
  <button id="btn">按钮</button>
  <script> var btn = document.getElementById('btn') btn.addEventListener('click', function () { var xhrReq = new XMLHttpRequest(); xhrReq.open('POST', 'https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState'); /* 在open方法以后 send 以前设置请求头 xhrReq.setRequestHeader(header, value); - header: 属性的名称。 - value: 属性的值。 */ xhrReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhrReq.send('user=is_sweet&pwd=123456'); }) </script>
</body>

</html>
复制代码

执行结果以下所示

写在最后

本篇博客介绍了 Ajax 的的概念和 Ajax 怎么用，掌握了 Ajax 就掌握了异步交互的基础了。