Ajax(5) => Ajax理论

5. Ajax理论

http与ajax区别

1. ajax请求是一种特殊的http请求

2. 对服务器来说，没有任何区别，区别在浏览器端

3. 浏览器端发送请求：只有 XHR 和 fetch 发出的才是 ajax 请求，其他所有的都是非 ajax 请求

4. 浏览器端收到相应：

   （1），一般请求：浏览器会直接显示响应体数据，也就是常说的刷新/跳转页面

   （2），ajax请求：浏览器不会对界面进行任何更新操作，异步请求数据

ajax的由来

AJAX = async + javascript + and + xml 异步的JS和XML

在ajax中的异步，不是我们所理解的同步异步变成，而是泛指“局部刷新”，在ajax中尽量使用异步来获取数据，异步的代码不会阻塞主线程

XML是一种文件格式（HTML【超文本标记语言】是XML的一种）：可扩展的标记语言，它的作用是用自己扩展的语义标签来存储一些数据和内容，这样存储的好处能够清晰的展现数据

XML格式：

<template>
  <boy>
    <name>xxx</name>
    <hobby>girl</hobby>
    <tall>180</tall>
  </boy>
  <girl>
    <name>yyy</name>
    <hobby>boy</hobby>
    <tall>165</tall>
  </girl>
</template>

JSON格式：

{
  "boy": {
    "name": "xxx",
    "hobby": "girl",
    "tall": 180
  },
  "girl": {
    "name": "xxx",
    "hobby": "boy",
    "tall": 165
  }
}

• 以前，AJAX刚出现的时候，客户端从服务器获取数据，服务器为了清晰的表达数据，都是返回的XML格式，所以那个时候叫做AJAX，但是现在JSON这种数据格式的兴起，比XML更加的轻量级，并且JS能直接操作JSON数据，比XML更好（但是当下有些项目还是会用到XML，例如服务器返回客户端的数据不单单是数据，十二数据和需要展示的结构拼接好的结果，类似字符串拼接，也可以说，服务端把数据和结构拼接好返回给我们，此时的数据格式一般都是XML格式的字符串）

全局刷新

• 服务端渲染

• 服务端渲染好处

局部刷新

通过Ajax来进行局部刷新

Ajax的应用场景

1. 页面下拉加载更多数据
2. 列表数据无刷新分页技术（点击下一页不需要刷新页面）
3. 表单项离开焦点数据验证（验证账号是否存在）
4. 搜索框提示文字下拉列表（百度一输入字便进行搜索）