1 传统网站中存在的问题
网速慢的情况下,页面加载时间长,用户只能等待. 表单提交后,如果一项内容不合格,需要重新填写所有表单内容- 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间
2 Ajax 是什么? 它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验
3 Ajax 的应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验
- 搜索框提示文字下拉列表
4 Ajax的运行环境
需要运行在网站环境中才能生效
5 Ajax 运行原理
Ajax 相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。
6 Ajax 实现步骤
- 使用XMLHttpRequest对象发送GET请求到服务器
- 处理服务器端返回的JSON格式数据
1、大多数情况下,服务端响应的数据格式是什么?
- 在真实的项目中,服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时,要将 JSON 数据和 HTML 字符串进行拼接,然后将拼接的结果展示在页面中
2、如何在js中对这种数据格式进行处理
- 在 http 请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输。
- JSON.parse() // 将 json 字符串转换为json对象
3、Post 与 Get 请求的重要区别
POST 请求必须在请求报文中设置请求参数的内容类型
什么叫请求报文 由那些部分组成
在 HTTP 请求和响应的过程中传递的数据块就叫报文,包括要传送的数据和一些附加信息,这些数据和信息要遵守规定好的格式
报文分为报文头与报文体
Post 请求参数的传递
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');