ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互。
XMLHttpRequest
Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的 XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
所以用一句话来总结两者的关系，就是：我们使用XMLHttpRequest对象来发送一个Ajax请求。
创建XMLHttpRequest对象
一般使用new关键字进行创建，然后赋值给一个变量，
var xhr = new XMLHttpRequest();
XMLHttpRequest对象的常用属性
1、readyState
只读属性，表示XMLHttpRequest请求当前所处的状态，共有五个数字值（0，1，2，3，4，5）。
- 0：表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
- 1：表示已调用open方法，但还未调用send方法（请求还未被发送出去），仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
- 2：表示send方法已调用，数据已发送，并且服务器接收到了请求。
- 3：表示服务器正在传输数据。
- 4：表示数据传输完成。
2、status
只读属性，表示本次请求所得到的HTTP状态码，返回一个整数。一般来说，如果通信成功的话，这个状态码是200。常用的有如下几个状态码:
- 200：OK（正常访问）；
- 301：Moved Permanently（永久移动）；
- 302：Moved temporarily（暂时移动）；
- 304：Not Modified（未修改）；
- 307：Temporary Redirect（暂时重定向）；
- 401：Unauthorized （未授权）；
- 403：Forbidden（禁止访问）；
- 404：Not Found（未找到该网址）；
- 500：Internal Server Error （找到网址但服务器发生错误）；
基本上，只有200和304的状态码，表示服务器返回是正常状态。
XMLHttpRequest对象的常用方法
- open()
XMLHttpRequest对象的open方法用于指定发送HTTP请求的参数，常用的有三个参数：
第一个参数：请求的类型（常用get或者post）；
第二个参数是接口名和：这里要分两种情况：
get请求时：接口名+请求参数（键值对形式）；post请求时：只需要接口名（需要传递的参数写在send方法里）；
第三个参数：一个布尔值，指定是否异步（true为异步，false为同步，通常为true，默认为true）；
- send()
send方法用于实际发出HTTP请求。如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。
Ajax 的get写法
var xhr = new XMLHttpRequest()
xhr.open('GET', '请求地址', true)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4) {
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//成功了
console.log(xhr.responseText)
} else {
console.log('服务器异常')
}
}
}
xhr.onerror = function(){
console.log('服务器异常')
}
xhr.send()
Ajax 的post写法
var xhr = new XMLHttpRequest()
xhr.timeout = 3000 //可选，设置xhr请求的超时时间
xhr.open('POST', '/register', true)
xhr.onload = function(e) {
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(this.responseText)
}
}
//可选
xhr.ontimeout = function(e) {
console.log('请求超时')
}
//可选
xhr.onerror = function(e) {
console.log('连接失败')
}
//可选
xhr.upload.onprogress = function(e) {
//如果是上传文件，可以获取上传进度
}
xhr.send('username=jirengu&password=123456')
