Ajax day29 2021-5-18
传统网站中存在的问题
- 网速慢的情况下,页面加载时间长,用户只能等待
- 表单提交后,如果一项内容不合格,需要重新填写所有表单内容
- 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间
Ajax 的应用场景
1.页面上拉加载更多数据
2.列表数据无刷新分页
3.表单项离开焦点数据验证
4.搜索框提示文字下拉列表
Ajax的实现步骤
1.创建AJAX对象
2.告诉Ajax请求地址以及请求方式
3.发送请求
4.获取服务器端给与客户端的响应数据
服务器端响应的数据格式
在真实的项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时,要将JSON数据和HTML字符串进行拼接,然后将拼接的结果展示在页面中
在http请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输
JSON.parse()
请求报文
在http请求和响应的过程中传递的数据块就叫报文,包括要传送的数据和一些附加信息,这些数据和信息要遵守规定好的格式
Ajax错误处理
1.网络畅通,服务器端能接受到请求,服务器端返回的结果不是预期结果
可以判断服务器端返回的状态码,分别进行处理。xhr.status 获取http状态码
2.网络畅通,服务器端没有接收到请求,返回404状态码
检查请求地址是否错误
3.网络畅通,服务器端能接受到请求,服务器端返回500状态码
服务器端错误,找后端程序员进行沟通
4.网络中断,请求无法发送到服务器端
会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理
1.2 XML介绍
XML 被设计从来传输和存储数据
1.3 AJAX特点
优点:
1)可以无需刷新页面而与服务器端进行通信
2)允许你根据用户事件来更新部分页面内容
缺点:
1)没有浏览历史,不能回退
2)存在跨域问题(同源)
3)SEO不友好
SEO(search engine optimization)搜索引擎优化
请求报文
行 POST/ /s?ie=utf-8 HTTP/1.1
头 Host:atguigu.com
Cookie:name=guigu
Content-type:application/x-www-form-urlencoded
User-Agent:chrome 83
空行
体 username=admin&password=admin
响应报文
行 HTTP/1.1 200 OK
头 Content-Type:text/html;charset=utf-8
Content-length:2048
Content-encoding:gzip
空行
体 html内容