XMLHttpRequest(xhr)是浏览器提供的Javascript对象,通过它,可以请求服务器上的数据资源。jQuery中的Ajax函数,就是基于xhr对象封装出来的。
xhr发起GET请求
- 创建xhr对象
- 调用xhr.open()函数
- 调用xhr.send()函数
- 监听xhr.onreadystatechange事件
//1、创建xhr对象
let xhr = new XMLHttpRequest()
//2、调用open函数 指定请求方式和URL地址 地址后面可以加上查询字符串 相当与data
// xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?bookname=西游记')
//3、调用send函数 发起Ajax 请求
xhr.send()
//4、 监听onreadystatechange 事件
xhr.onreadystatechange = function () {
// 4.1 监听xhr 对象的请求状态 readyState 和服务器的相应状态 status 固定写法 这里的status 和 res 返回的不是同一个
if (xhr.readyState === 4 && xhr.status === 200){
// 4.2 打印服务器相应回来的数据 responseText
let res = JSON.parse(xhr.responseText)
//JSON.parse() 将JSON字符 转换成 对象数据
console.log(res)
}
}
xhr发起PSOT请求
- 创建xhr对象
- 调用xhr.open()函数
- 设置Content-Type属性(固定写法)
- 设置xhr.send()函数,同时指定要发送的数据
- 监听 xhr.onreadystatechange 事件
//1、创建xhr对象
let xhr2 = new XMLHttpRequest()
//2、调用open函数 指定请求方式和URL地址
xhr2.open('POST','http://www.liulongbin.top:3006/api/addbook')
//3、设置Content-Type 属性(固定写法)
xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//3、调用send函数 发起Ajax 请求 同时将数据以查询字符串的形式 发送给服务器
xhr2.send('bookname=斗破苍穹&author=萧炎&publisher=土豆出版社')
//4、 监听onreadystatechange 事件
xhr2.onreadystatechange = function () {
// 4.1 监听xhr 对象的请求状态 readyState 和服务器的相应状态 status 固定写法 这里的status 和 res 返回的不是同一个
if (xhr2.readyState === 4 && xhr2.status === 200){
// 4.2 打印服务器相应回来的数据 responseText
let res = JSON.parse(xhr2.responseText)
//JSON.parse() 将JSON字符 转换成 对象数据
console.log(res)
}
}
xhr对象的readystate状态
值 | 状态 | 描述 |
0 | UNSENT | XMLHttpRrequest对象已被创建,但尚未调用open方法 |
1 | OPEND | open() 方法已被调用 |
2 | HEADERS_RECEIVED | send() 方法已被调用 响应头也已经被接收 |
3 | LOADING | 数据接收中,此时response属性中已经包含部分数据 |
4 | DONE | Ajax请求完成,这意味着数据传输已经彻底完成或失败 |
http的响应状态码
分类 | 分类描述 |
1** | 信息,服务器收到请求,需要请求者继续执行操作(很少遇到) |
2** | 成功,操作被成功接收并处理 |
3** | 重定向,需要进一步操作以完成请求 |
4** | 客户端错误,请求包含语法错误或无法完成请求 |
5** | 服务器错误,服务器再处理请求的过程中发生了错误 |
状态码细分
状态码 | 状态码英文名称 | 中文描述 |
200 | OK | 请求成功。一般用于GET与POST请求 |
201 | Created | 已创建。成功请求并创建了新的资源,通常用于POST或PUT请求 |
301 | Moved Permanently | 永久移动。请求的资源已被永久的移动到新的URL,返回信息会包括新的URL,浏览器会自动定向到新URL,今后的任何请求都应使用新的URL代替 |
302 | Found | 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有url |
304 | Not Modified | 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源(响应消息中不包含响应体)。客户端通常会缓存访问过的资源 |
400 | Bad Request | 1.语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交整个请求 2.请求参数有误 |
401 | Unanthorized | 当前请求需要用户验证 |
403 | Forbidden | 服务器已经理解请求,但是拒绝执行它 |
404 | Not Found | 服务器无法根据客户端的请求找到资源 |
408 | Resquest Timeout | 请求超时,服务器等待客户端发送的请求时间过长 |
500 | Internal Server | 服务器内部错误,无法完成请求 |
501 | Not Implemented | 服务器不支持该请求方法,无法完成请求。只有GET和HEAD请求方法是要求每个服务器必须支持的,其他请求方法在不支持的服务器上会返回501 |
503 | Service Unavailable | 由于超载或者系统维护,服务器暂时无法处理客户端的请求 |
url中的中文编码
url地址中,只允许出现英文相关的字母、标点符号、数字、因此、在URL地址中不允许出现中字符如果URL中需要这样的字符 则必须对中文字符进行 编码(转义)
浏览器提供了URL编码与解码的API
encodeURI('守株待兔')
输出字符串:%E5%AE%88%E6%A0%AA%E5%BE%85%E5%85%94
decodeURI('%E5%85%94')
输出字符串:兔