原生AJAX

1.什么是AJAX
AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。
2.对AJAX的印象
AJAX是异步的JavaScript和XML;
AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;
AJAX是一种独立于Web服务器软件的浏览器技术;
AJAX不是一种新的编程语言，而是一种技术;
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后端交互）;
AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。

3.XMLHttpRequest

1.创建XMLHttpRequest对象

var request = new XMLHttpRequest();

2.使用open方法设置和服务器的交互信息
open()参数:1.指定HTTP方法或动作,取值可以为：GET/POST/HEAD/DELETE/OPTIONS/PUT 2. URL,请求的主体，是相对于文档的URL。跨域请求会报错.3. Boolean类型的值，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，请求是异步的。

request.open('get','url')

3.设置requestHeader()
在AJAX中，如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 方法来添加 HTTP 头。然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。
发送json格式数据

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

发送表单数据

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

发送纯文本(不指定Content-type时，此是默认值)

request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

发送html文本

request.setRequestHeader('Content-type', 'text/html; charset=utf-8');

4.设置发送的数据，开始和服务器端交互
send()
参数:请求主体内容，如果没有，为null，或者省略。

request.send();

5.取得响应，注册事件
发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。

• responseText：作为响应体返回的文本。

• responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。

• status：响应的 HTTP 状态。

• statusText：响应的 HTTP 状态描述。

• readyState：返回HTTP请求状态
  0 open()尚未调用 UNSENT
  1 open()已调用 OPENED
  2 接收到头信息 HEADERS_RECEIVED
  3 接收到响应主体 LOADING
  4 响应完成 DONE

• readystatechange 请求状态改变事件
  当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

request.onreadystatechange = function(){
	if(request.status === 200 && request.readyState === 4){
		console.log(request.responseText)
	}
}

7.响应解码 MIME-TYPE
1.MIME类型为text/plain,text/html,text/css 文本类型时，可以使用responseText属性解析
2.MIME类型为XML文档类型时，使用responseXML属性解析
3.如果服务器发送对象，数组这样的结构化数据作为其响应，他应该传输JSON编码的字符串数据。通过responseText接受到它，可以把它传递给JSON.parse()方法来解析。