什么是AJAX？

1.背景介绍

什么是AJAX？

即异步的 JavaScript 和 XML，是一种用于创建快速动态网页的技术；

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

使用AJAX则不需要加载更新整个网页，实现部分内容更新

2.知识剖析

AJAX

1、什么是ajax

2、常见的ajax使用场景

3、为什么需要使用ajax

4、Ajax的工作原理

5、XMLHttpRequest常用方法及属性

6、几种常见的写法

1、什么是ajax

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

2、常见的ajax使用场景

谷歌地图，甚至一些弹幕，微博的时时更新评论等等

3、为什么需要使用ajax

ajax主要是实现页面和web服务器之间数据的异步传输。

简单来说，不采用ajax的页面，当用户在页面发起请求时，就要进行整个页面的刷新，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，不能进行其他操作。也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低，用户体验差。

a、采用ajax的页面，可以实现页面的局部更新，而不是整个页面的更新；b、并且发起请求后，用户还可以进行页面上的其他操作。这就是异步的方式。c、客户端和服务端间只传递需要的数据，效率高，用户体验性好。d、并且Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

4、Ajax的工作原理

图片里面提到一个xhr，所谓的“XHR”（浏览器内置对象”XMLHttpRequest”），也就是Ajax功能实现所依赖的对象，AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的，异步请求不会妨碍客户端的任何操作。

异步：

XHR相当于是一个通信兵，来负责客户端与服务器之间的通信传输。举个栗子：

要打仗了，前方阵地（客服端）不可能只等着通信兵（XHR）传递消息其他什么也不干吧，所以前方阵地还在干着自己的事情然后派通信兵去请求后方指挥部（服务器）的命令，指挥部下达命令指挥，通信兵再把命令传到前方阵地，然后前方阵地再执行命令相关的操作（客户端把数据渲染到页面），这也就是Ajax的异步原理。

再来说说同步：

所谓的同步就是前方阵地和通信兵一起去向服务器请求数据，直到通信兵请求到数据，我才开始渲染页面，在请求的过程中页面一直是白屏等待的。

5、XMLHttpRequest常用方法

一、open();

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。

例：

xhr.open('POST', '/carrots-admin-ajax/a/login', true);

参数:

a, method:用于指定请求的类型  "GET"或者"POST"

b, url:用于请求的地址, 可相对可绝对

c, asyncFlag:指定请求方式为同步还是异步, true为异步, false为同步

二、send();

XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只包含头信息，也就是只有一个 URL，典型例子就是 GET

请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

var xhr = new XMLHttpRequest();

var data = 'name=' + userVal + '&pwd=' + pwVal;

xhr.open('POST', '/carrots-admin-ajax/a/login', true);

/* POST的请求头 */

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

/* 发出HTTP请求 */

xhr.send(data);

注意，所有 XMLHttpRequest 的监听事件，都必须在send()方法调用之前设定。（send放在最后）

6、XMLHttpRequest常用属性

一, readyState

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。

0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。

1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。

2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。

3，表示正在接收服务器传来的数据体（body 部分）。

4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

二, onreadystatechange

XMLHttpRequest.onreadystatechange属性指向一个监听函数。

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

另外，如果使用实例的abort()方法，终止 XMLHttpRequest

请求，也会造成readyState属性变化，导致调用XMLHttpRequest.onreadystatechange属性。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

// 通信成功时，状态值为4

if (xhr.readyState === 4){

if (xhr.status === 200){

console.log(xhr.responseText);

} else {

console.error(xhr.statusText);

}

}};

xhr.open('GET', '/endpoint', true);

xhr.send(null);

三, responseText

XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据

四, status

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP

状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

200, OK，访问正常

404, Not Found，未发现指定网址

500, Internal Server Error，服务器发生错误

基本上，只有2xx和304的状态码，表示服务器返回是正常状态。

7、常见几种ajax方法

结合任务来看三种常见的写法（不涉及框架中写法）

a、原生写法：见demo

b、jQuery 底层 AJAX 实现：见demo

c、jQuery 高层 AJAX 实现：见demo

3.常见问题

1、跨域问题

2、使用post提交的时候需要设置content-type为"application/x-www-form-urlencoded"

4.解决方案

1、nginx配置跨域

2、使用post提交的时候需要设置content-type会出错，见demo

5.编码实战

     原生写法/* 创建实例 */

//         var xhr = new XMLHttpRequest();

//         /* 需要发送的数据 */

//         var data = 'name=' + userVal + '&pwd=' + pwVal;

//         console.log(data)

//         /* 指定请求的参数 */

//         xhr.open('POST', '/carrots-admin-ajax/a/login', true);

//         /* POST的请求头 */

//         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

//         /* 发出HTTP请求 */

//         xhr.send(data);

/* $.ajax()写法 */

// var xhr = $.ajax({

//     type: 'POST',

//     data: {

//         name: userVal,

//         pwd: pwVal

//     },

//     url: '/carrots-admin-ajax/a/login',

//     success: function () {

//       }

// });

/* $.post()写法 */

var data = {

name: userVal,

pwd: pwVal,

}

console.log(data)

var xhr = $.post('/carrots-admin-ajax/a/login', data, function () {})

6.扩展思考

AJAX的优缺点？

ajax的缺点：

ajax不支持浏览器back按钮。

安全问题 AJAX暴露了与服务器交互的细节。

对搜索引擎的支持比较弱。

破坏了程序的异常机制。

不容易调试。

get与post的区别？

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据

GET 请求可被缓存

GET 请求保留在浏览器历史记录中

GET 请求可被收藏为书签

GET 请求不应在处理敏感数据时使用

GET 请求有长度限制

GET 请求只应当用于取回数据

POST 请求不会被缓存

POST 请求不会保留在浏览器历史记录中

POST 不能被收藏为书签

POST 请求对数据长度没有要求

7.参考文献

w3school   

脚本之家

8.更多讨论

1.ajax中的onload和onreadystatechange的区别？

答：onreadystatechange()的定义是只要返回的状态码只要变化时就回调一次函数，而onload只有状态码为4时才能回调一次函数。

2.AJAX适用场景有哪些？

答：Ajax适用场景

表单驱动的交互

深层次的树的导航

快速的用户与用户间的交流响应

类似投票、yes/no等无关痛痒的场景

对数据进行过滤和操纵相关数据的场景

普通的文本输入提示和自动完成的场景

3.局部更新的优势？

答：只加载自己需要的部分，其他不需要的内容无需重新请求，提高效率