Ajax

124 阅读2分钟

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');