1.需要掌握以下知识点
①，AJAX全称（Asynchronous JavaScript and XML），异步 JavaScript 和 XML
②，什么是AJAX？满足以下三个技术点的方案就是AJAX:
1,通过XMLHttpRequest的实例发送请求
2，服务器返回XML数据
3，前端JS解析XML，并更新局部页面
③，AJAX的优点有哪些？
1，可以发送多种请求，不像JSONP只能发送GET请求
2，可以把接收多种类型数据，不像img，script，只能以图片和脚本的形式展示响应体
3，JS 可以设置任意请求 header
第一部分 request.open('get', '/xxx')
第二部分 request.setRequestHeader('content-type','x-www-form-urlencoded')
第四部分 request.send('a=1&b=2')
JS 可以获取任意响应 header 吗？
第一部分 request.status / request.statusText
第二部分 request.getResponseHeader() / request.getAllResponseHeaders()
第四部分 request.responseText
2.XMLHttpRequest实例的属性和方法（常用）
JS 原生提供XMLHttpRequest对象，它是一个构造函数，可以生成一个实例对象，并拥有以下属性和方法
var ajax = new XMLHttpRequeset
①，ajax.open(1,2,3,4,5)
该方法为配置HTTP请求，接受五个参数，
1，请求类型（GET.POST.PUT.DELETE.....）
2，URL
3，布尔值，是否异步，默认为true
4，用户认证的用户名，默认为空字符串
5，用户认证的密码，默认为空字符串
②，ajax.send()
该方法为实际方法HTTP请求，参数可选，如果不写参数，就代表请求信息只有open方法配置的url，写参数就代表要发送的数据，比如发送POST请求，可以把数据当做参数传入，可以提交一些数据，send方法的参数就是发送的数据。多种格式的数据，都可以作为它的参数。
PS:注意，所有 XMLHttpRequest 的监听事件，都必须在send()方法调用之前设定。
③，ajax.setRequsetHeader()
该方法可以设置请求头信息，该方法必须在open()之后、send()之前调用。该方法接受两个参数。第一个参数是字符串，表示头信息的字段名，第二个参数是字段值。例如：
setRequestHeader
④，ajax.readystate
该方法返回一个整数，表示请求的当前状态：
0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。
4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。
通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。
⑤，ajax.onreadystateChange
XMLHttpRequest.onreadystatechange属性指向一个监听函数。readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。
⑥，ajax.response
返回响应体，它可能是任何数据类型，比如字符串、对象、二进制对象等等，果本次请求没有成功或者数据不完整，该属性等于null。但是，如果responseType属性等于text或空字符串，在请求没有结束之前（readyState等于3的阶段），response属性包含服务器已经返回的部分数据。
⑦，ajax.responseType
返回一个字符串，表示响应体的数据类型，XMLHttpRequest.responseType属性可以等于以下值。
""（空字符串）：等同于text，表示服务器返回文本数据。
"arraybuffer"：ArrayBuffer 对象，表示服务器返回二进制数组。
"blob"：Blob 对象，表示服务器返回二进制对象。
"document"：Document 对象，表示服务器返回一个文档对象。
"json"：JSON 对象。
"text"：字符串。
上面几种类型之中，text类型适合大多数情况，而且直接处理文本也比较方便。document类型适合返回 HTML / XML 文档的情况，这意味着，对于那些打开 CORS 的网站，可以直接用 Ajax 抓取网页，然后不用解析 HTML 字符串，直接对抓取回来的数据进行 DOM 操作。blob类型适合读取二进制数据，比如图片文件。
⑧，ajax.responseText
该属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。
⑨，ajax.status/ajax.statusText
表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。
statusText返回
⑩，ajax.getResponseHeader() / ajax.getAllResponseHeaders()
获取一个响应头，获取全部响应头
3.配合使用的一些监听事件
XMLHttpRequest 对象可以对以下事件指定监听函数。
XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数
网友评论