AJAX
1.Ajax基础
传统网站中存在的问题
- 网速慢的情况下,页面加载时间长,用户只能等待
- 表单提交后,如果有一项内容不合格,需要重新填写所有表单内容
- 页面跳转,重新加载接面,造成资源浪费
Ajax概述
全称:Asynchronous JavaScript and XML;
它是浏览器提供的一套方法,核心是XMLHttpRequest对象,可以实现网页无刷新更新数据,提高用户浏览网站的体验。
Ajax的一些应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字文字下拉列表
Ajax运行原理及实现
Ajax相当于浏览器向服务器发送请求和接收响应的代理人,以实现在不影响用户浏览网页的情况下,局部更新页面数据,从而提高用户体验。
Ajax的实现步骤
- 创建ajax对象
const xhr = new XMLHttpRequest()
- 告诉ajax请求地址和请求方式
xhr.open('get', 'http://www.example.com')
- 发送请求
xhr.send()
- 获取服务器端发送给客户端的响应数据
xhr.onload = function () {
console.log(xhr.responseText)
}
服务器端响应的数据格式
在真实的项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到相应数据时,需要将JSON数据和html字符串进行拼接,然后将拼接的结果展示在页面中。
在http请求和响应的过程中,无论是请求参数还是响应数据,如果是对象类型,最终都会转换为对象字符串进行传输。而通过JSON.parse()可将json字符串转换为对象,JSON.stringify()将json对象转换为字符串。
请求参数传递
- GET请求方式(将参数放在请求地址的?后,参数之间用&连接)
xhr.open('get', 'http://www.example.com?name=zhangsan&age=20)
- POST请求方式(需要设置请求头Content-Type)
// application/x-www-form-urlencoded
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('name=zhangsan&age=20')
// application/json
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send({
name: 'zhangsan', age: '20'})
获取服务端的响应
ajax状态码
在创建对象,配置对象,发送请求,以及接收完服务器端响应数据,这个过程的每个步骤都会对应一个数值,这个数值就是ajax状态码。
0:请求未初始化( 还没调用poen() )
1:请求已经建立,但还没有发送(调用了poen(),但还没调用send())
2:请求已经发送
3:请求正在处理中,通常响应中已经有部分数据可以用了
4:响应已经完成,可以获取并使用服务器的响应数据
xhr.readyState //获取ajax状态码
onreadystatechange 事件
当ajax的状态码发生变化时,自动触发该事件。
Ajax错误处理
-
网络畅通,服务器端能接收到请求,服务器端返回的结果不是预期结果。这时,可以判断服务器返回的状态码,分别进行处理。xhr.status获取http状态码。
-
网络畅通,服务器端没有接收到请求,返回404状态码。
检查请求地址是否错误 -
网络畅通,服务器能接收到请求,返回500状态码。
服务器端错误,找后端程序员沟通处理 -
网络中断,无法发送请求。
会触发xhr.onerror事件,在该事件中进行错误处理
Ajax封装
问题:发送一次请求代码过多,发送多次请求代码冗余且重复。
解决方案:将请求代码封装到函数中,发送请求时调用即可。
function ajax(options) {
// 通过解构赋值,将options值覆盖默认值
let {
type = 'get',
url = '',
data = {
},
header = {
'Content-Type': 'application/x-www-form-urlencoded' }