Ajax day29 2021-5-18

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内容