什么是Ajax？

  1. Ajax的全称：Asynchronous JavaScript and XML（异步的JavaScript和XML）他并不是新的编程语言，而是几种原有技术的结合体。
  2. ajax是一种无需重新加载整个网页的情况下，能够局部更新网页的技术。

常见的Ajax使用场景

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

为甚恶魔需要使用Ajax

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

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

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

Ajax的工作原理

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

异步：

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

同步：

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

XMLHttpRequest常用方法

1.open()

XMLHttpRequest()方法用于指定HTTP请求的参数，或者说初始化XMLHttpRequest实例对象。
他一共可以接受五个参数：
xmlHttp.open(“GET”,”http://192.168.4.127:8080/news_list",true);
参数：
a。method：用于指定请求的类型”GET”或者”POST”
b。url：用于请求的地址，可相对可绝对
c。asyncFlag：指定请求方式为同步还是异步 true为异步 false为同步

2.send()

表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
XMLHttpRequest()方法用于实际发出HTTP请求。它的参数是可选的，如果不带参数，，就表示HTTP请求只包含头信息，也就是只有一个URL。

get与post的区别？

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

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

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

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

为什么要使用ajax — 优点

  1. 通过异步刷新，提升了用户体验。
  2. 优化浏览器和服务器之间的传输，减少不必要的数据返回，减少了带宽占用。
  3. ajax引擎在客户端运行，承担了一部分由服务器承担的工作，从而减少大量用户下的服务器负载

Ajax的缺点

  1. 不支持浏览器的回退按钮。
  2. 安全问题ajax暴露于服务器交互的细节
  3. 对搜索引擎的支持比较弱
  4. 破坏了程序的异常机制
  5. 不容易调试

Ajax和JSON

XMLHttpRequest对象 — 是一种支持异步请求的技术，他是ajax的核心。

XMLHttpRequest作用

  1. 可以向服务器提出请求并处理响应，而不阻塞用户
  2. 可以在页面加载以后进行页面的局部更新

如何使用ajax — 完整实现按一个ajax的异步调用和局部刷新，三步：

  1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象 — 创建XMLHttpRequest对象
  2. 创建一个新的http请求，并执行该http请求的方法，url — 发送ajax请求
  3. 设置响应http请求状态变化的函数 — 处理服务器响应

创建XMLHttpRequest对象

  1. 这个对象用于在后台和服务器交换数据，是ajax的核心。
  2. 并不是w3c的标准，不同的浏览器创建方式不同。

image.png

发送ajax请求

  1. 创建请求

xmlhttp.open(“GET”,”URL地址”,true);

  1. 发送到服务器

xmlhttp.send();

处理服务器响应

1、**处理服务器响应
(1) **xmlHttp.onreadystatechange()事件用于监听Ajax执行过程
(2) **xmlHttp.readystate属性说明的是XMLHttpRequest当前的状态
① **Readystate =0 — 请求未初始化
② **Readystate =1 — 服务器连接已经建立
③ **Readystate =2 — 请求已经被接收
④ **Readystate =3 — 请求正在处理
⑤ **Readystate =4 — 响应文本已被接收
(3) **xmlHttp.status属性服务器响应的状态码，200:成功 404:未找到。。。
image.png

利用Ajax实现新闻列表展现

  1. 准备后端数据 — 新闻对象
  2. 前端编写页面请求

同步和异步的区别

  1. true代表异步执行
  2. false代表同步执行

总结

  1. 对于同步执行，相当于代码进入了一个等待状态，数据不返回，程序就不会继续往下执行。
  2. 而异步状态下，ajax是不会处于代码的阻塞状态，程序任然会继续往下执行的，但是数据返回通过触发

onreaystatechange事件进行获取和处理的。