XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，通过它，可以请求服务器上的数据资源，jQuery中的Ajax函数就是基于xhr对象封装出来的。
使用xhr发起GET请求
代码语言：javascript复制//1.创建XHR对象
var xhr = new XMLHttpRequest()
//2.调用open函数，指定请求方式与URL地址
xhr.open('GET','URL地址')
//3.调用send函数，发起Ajax请求
xhr.send()
//4.监听onreadystatechange事件
xhr.onreadystatechange = function(){
//4.1 监听xhr对象的请求状态readyState 与服务器响应的状态 status
if(xhr.readyState === 4 && xhr.status === 200){
//4.2 打印服务器响应回来的数据
console.log(xhr.responseText)
}
}xhr对象的readyState属性
XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态，每个Ajax请求必然处于以下状态中的一个：
值 | 状态 | 描述 |
|---|---|---|
0 | UNSENT | XMLHttpRequest对象已被创建，但尚未调用open方法 |
1 | OPEND | open()方法已经被调用 |
2 | HEADERS_RECEIVED | send()方法已经被调用，响应头也已经被接受。 |
3 | LOADING | 数据接受中，此时response属性中已经包含部分数据 |
4 | DONE | Ajax请求完成，这意味着数据传输已经彻底完成或失败 |
使用xhr发起带参数的GET请求
使用xhr对象发起带参数的GET请求时，只需要在调用xhr.open期间，为URL地址指定参数即可：
代码语言：javascript复制xhr.open('GET','htttp://www.abc.com/bcd?id=1')这种在URL地址后面拼接的参数，叫做查询字符串。
定义：查询字符串（URL参数）是指在URL的末尾加上用于向服务器发送信息的字符串（变量）。
格式：将英文的 ？放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用 &符号进行分隔，以这个形式，可以将想要发送给服务器的数据添加到URL中。
使用xhr发起POST请求
代码语言：javascript复制//1.创建XHR对象
var xhr = new XMLHttpRequest()
//2.调用open函数
xhr.open('POST','URL地址')
//3.设置Content-Type属性（固定写法）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencodee')
//4.调用send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=三国演义&author=罗贯中')
//5.监听onreadystatechange事件
xhr.onreadystatechange = function(){
//5.1 监听xhr对象的请求状态readyState 与服务器响应的状态 status
if(xhr.readyState === 4 && xhr.status === 200){
//5.2 打印服务器响应回来的数据
console.log(xhr.responseText)
}
}
