1.创建AJAX实例
2.打开请求
3.事件监听
4.发送AJAX请求
5.HTTP请求方式
- 5.1HTTP METHOD的值
- 5.2.GET和POST的区别
6.AJAX状态
7.HTTP网络状态码
8.关于XHR的属性和方法
- 8.1.属性
  - 8.1.1.所监听的事件
  - 8.1.2.一般属性
- 8.2.7个方法

1.创建AJAX实例

let xhr = new XMLHttpRequest();

2.打开请求

xhr.open([HTTP METHOD],[URL],[ASYNC],[USER-NAME],[USER-PASS]);

HTTP METHOD 请求方式
- GET
- DELETE
- HEAD
- OPTIONS
- POST
- PUT
- TRACE(不常用)
- CONNECT(不常用)
URL 向服务器端发送请求的API
ASYNC 设置AJAX请求的同步异步
- true:异步
- false:同步
USER-NAME/USER-PASS：用户名密码，一般不用

3.事件监听

xhr.onreadystatechange=()=>{}

4.发送AJAX请求

xhr.send([请求主体内容]);

//=>1.创建AJAX实例：IE6中是不兼容的，使用的是new ActiveXObject来实现的
let xhr = new XMLHttpRequest();
//=>2.打开请求：发送请求之前的一些配置项
    //1.HTTP METHOD 请求方式
    //  GET/DELETE/HEAD/OPTIONS
    //  POST/PUT
    //  不常用:/TRACE/CONNECT
    //2.URL 向服务器端发送请求的API
    //      （Application Programming Interface）接口地址
    //3.ASYNC 设置AJAX请求的同步异步，
    //      默认是异步（写TRUE也是异步），FALSE是同步，
    //      项目中都使用异步编程，防止阻塞后续代码执行
    //4.USER-NAME/USER-PASS：用户名密码，一般不用
xhr.open([HTTP METHOD],[URL],[ASYNC],[USER-NAME],[USER-PASS]);
//=>3.事件监听：一般监听的都是 READY-STATE-CHANGE 事件（AJAX状态改变事件），基于这个事件可以获取服务器返回的响应头响应主体内容
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4 && xhr.status===200){
       xhr.responseText;
    }
};
//=>4.发送AJAX请求：从这步开始，当前AJAX任务开始，如果AJAX是同步的，后续代码不会执行，要等到AJAX状态成功后在执行，反之异步不会
xhr.send([请求主体内容]);

5.HTTP请求方式

(HTTP METHOD)
所有的请求都可以给服务器端传递内容，也都可以从服务器端获取内容

5.1HTTP METHOD的值

5.1.1GET

从服务器端获取数据(给的少拿的多),所以一般都是用url后面的参数进行给

5.1.2.POST

向服务器端推送数据(给的多拿的少),所以POST会把给的东西打包传送(表单)

5.1.3.DELETE

删除服务器端的某些内容（一般是删除一些文件）

5.1.4.PUT

向服务器上存放一些内容（一般也是存放文件）

5.1.5.HEAD

只想获取服务器返回的响应头信息，不要响应主体中的内容

5.1.6.OPTIONS

一般使用它向服务器发送一个探测性请求，如果服务器端返回的信息了，说明当前客户端和服务器端建立了连接，我们可以继续执行其它请求了（TRACE是干这件事的，但是axios这个AJAX类库在基于cross domain进行跨域请求的时候，就是先发送OPTIONS请求进行探测尝试，如果能连通服务器，才会继续发送其它的请求）

5.2.GET和POST的区别

[传递给服务器信息的方式不一样]

GET是基于URL地址“问号传参”的方式把信息传递给服务器，
POST是基于“请求主体”把信息传递给服务器

  [GET]
  xhr.open('GET','/temp/list?xxx=xxx&xxx=xxx')
  [POST]
  xhr.send('xxx=xxx&xxx=xxx')

GET一般应用于拿（给服务器的会少一些），而POST给服务器的很多，如果POST是基于问号传参方式来搞会出现一些问题：URL会拼接很长，浏览器对于URL的长度有有最大限度（谷歌8KB 火狐7KB IE2KB …），超过的部分浏览器就把它截掉了 =>所以GET请求可以基于URL传参，而POST都是使用请求主体传递（请求主体理论上是没有限制的，真实项目中我们会自己做大小限制，防止上传过大信息导致请求迟迟完不成）

[GET不安全，POST相对安全]
因为GET是基于“问号传参”把信息传递给服务器的，容易被骇客进行URL劫持，POST是基于请求主体传递的，相对来说不好被劫持；所以登录、注册等涉及安全性的交互操作，我们都应该用POST请求；

[GET会产生不可控制的缓存,POST不会]
不可控：不是想要就要，想不要就不要的，这是浏览器自主记忆的缓存，我们无法基于JS控制，真实项目中我们都会把这个缓存干掉
GET请求产生缓存是因为：连续多次向相同的地址（并且传递的参数信息也是相同的）发送请求，浏览器会把之前获取的数据从缓存中拿到返回，导致无法获取服务器最新的数据（POST不会）

解决方案：

  xhr.open('GET',`/temp/list?lx=1000&_=${Math.random()}`); //=>保证每次请求的地址不完全一致：在每一次请求的末尾追加一个随机数即可(使用_作为属性名就是不想和其它的属性名冲突)

6.AJAX状态

(READY-STATE)

6.1.状态0

=>UNSENT
刚开始创建XHR，还没有发送

6.2.状态1

=>OPENED
已经执行了OPEN这个操作

6.3.状态2

=>HEADERS_RECEIVED
已经发送AJAX请求（AJAX任务开始），
响应头信息已经被客户端接收了（响应头中包含了：服务器的时间、返回的HTTP状态码…）

6.4.状态3

=>LOADING
响应主体内容正在返回

6.5.状态4

=>DONE
响应主体内容已经被客户端接收

7.HTTP网络状态码

(STATUS)
根据状态码能够清楚的反映出当前交互的结果及原因

7.1.成功2开头

7.1.1.HTTP200

OK 成功(只能证明服务器成功返回信息了，但是信息不一定是你业务需要的)

7.2.重定向3开头

7.2.1.HTTP301

Moved Permanently
永久转移（永久重定向）=>域名更改，访问原始域名重定向到新的域名

7.2.2.HTTP302

Move temporarily 临时转移（临时重定向 =>307）
=>网站现在是基于HTTPS协议运作的，如果访问的是HTTP协议，会基于307重定向到HTTPS协议上
=>302一般用作服务器负载均衡：当一台服务器达到最大并发数的时候，会把后续访问的用户临时转移到其它的服务器机组上处理
=>偶尔真实项目中会把所有的图片放到单独的服务器上“图片处理服务器”，这样减少主服务器的压力，当用户向主服务器访问图片的时候，主服务器都把它转移到图片服务器上处理

7.2.3.HTTP304

Not Modified 设置缓存
=>对于不经常更新的资源文件，例如：CSS/JS/HTML/IMG等，服务器会结合客户端设置304缓存，第一次加载过这些资源就缓存到客户端了，下次再获取的时候，是从缓存中获取；如果资源更新了，服务器端会通过最后修改时间来强制让客户端从服务器重新拉取；基于CTRL+F5强制刷新页面，304做的缓存就没有用了。

7.3.请求错误4开头

7.3.1.HTTP400

Bad Request =>请求参数错误(无参数)

7.3.2.HTTP401

Unauthorized =>无权限访问

7.3.3.HTTP404

Not Found =>找不到资源(地址不存在)

7.3.4.HTTP413

Request Entity Too Large =>和服务器交互的内容资源超过服务器最大限制

7.4.服务器错误5开头

7.4.1.HTTP500

Internal Server Error =>未知的服务器错误

7.4.2.503

Service Unavailable =>服务器超负荷

8.关于XHR的属性和方法

这些东西大部分用在AJAX使用的第三步上,比如上面的例子里面调用的是Ajax的onreadystatechange属性,赋值了一个函数,从而定义了当请求状态发送改变之后所要做的事情.

8.1.属性

在浏览器的console里面输入let xhr = new XMLHttpRequest();然后dir(xhr)就能看到xhr实体的一系列方法和属性

8.1.1.所监听的事件

8.1.1.1.onabort

Ajax请求被强制终止了所触发的事件

8.1.1.2.onerror

Ajax请求错误了所触发的事件

8.1.1.3.onload

Ajax请求加载触发的事件

8.1.1.4.onloadend

Ajax请求加载完成触发的事件

8.1.1.5.onloadstart

Ajax请求开始加载触发的事件

8.1.1.6.onprogress

Ajax请求加载中触发的事件

8.1.1.7.onreadystatechange

Ajax请求状态发送改变时触发的事件

8.1.1.8.ontimeout

Ajax请求超时时触发的事件

8.1.2.一般属性

8.1.2.1.readyState

状态码

8.1.2.2.response

响应主体

8.1.2.3.responseText

响应主体的内容是字符串（JSON或者XML格式字符串都可以）

8.1.2.4.responseType

响应主体内容的类型

8.1.2.5.responseURL

响应的url

8.1.2.6.responseXML

响应主体的内容是XML文档

8.1.2.7.status

HTTP状态码

8.1.2.8.statusText

状态码的描述

8.1.2.9.timeout

设置请求超时的时间

8.1.2.10.withCredentials

是否允许跨域

8.2.7个方法

打开xhr实体的最后一项__proto__,底下的属性凡是带有f的都是方法

8.2.1.xhr.abort()

强制中断AJAX请求,一般在请求超时的时候调用,再调用中断事件

8.2.2.xhr.getAllResponseHeaders()

获取所有响应头信息

8.2.3.xhr.getResponseHeader([key])

获取KEY对应的响应头信息
例如：xhr.getResponseHeader('date')就是在获取响应有中的服务器时间

8.2.4.xhr.open()

打开URL请求

8.2.5.xhr.overrideMimeType()

重写MIME类型,很少用

8.2.6.xhr.send()

发送AJAX请求

8.2.7.xhr.setRequestHeader()

设置请求头

AJAX调用及其参数