原生Ajax(get与post)

1 定义【重点】

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互。

2 传统请求的问题【了解】

客户端(浏览器)在没有收到服务器返回的响应之前，客户端一直处于在线等待状态，用户体验不好，导致客户没有收到服务端返回响应的原因有：

1)、网络慢；

2)、服务器太忙了；

3 Ajax优势和作用

ajax的作用：在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互；

ajax的优势：用户体验好，减轻服务端的压力；

4 Ajax请求与传统请求的区别：

• 传统方式请求：

• ajax方式请求：【重点】

5 应用场景：

只要是页面中局部更新内容都可以使用ajax进行处理。

 原理

1 方法

1.1 XMLHttpRequest

语法：

 let xhr =new XMLHttpRequest();

描述：创建 ajax对象

1.2 open

语法：

xhr.open(method,url,async)

描述：规定请求的类型、URL 以及是否异步处理请求。

1.3 send

语法：

xhr.send(string)

描述：将请求发送到服务器。string：仅用于 POST 请求

2 属性

2.1 readyState

语法：

xhr.readyState

描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。

包含的状态值：

(1)0：请求未初始化，还没有调用open

(2)1：请求已经建立，但是还没有发送send

(3)2：请求已经发送

(4)3：请求正在处理中，通常响应中已经有部分数据可以用了

(5)4：响应已经完成，可以获取并使用服务器的响应

2.2 status

语法：

xhr.status

描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.stat