课程介绍

Ajax已经成为前端工程师的必备技能：

最大优势：无刷新的获取数据。
- 实现单页面应用的利器，用户无需刷新就可继续浏览，提升用户体验
表单的实时验证，用户体验更好；
实现懒加载，有效提高了网络性能。
- 列表页滚到底自动加载
  - 将数据从服务器取来插入文档流中，用户无需刷新就可继续浏览，提升用户体验
- 鼠标放在一级菜单的菜单项上才显示响应的二级菜单
Web应用（H5、小程序、App）和服务器进行通信，用的也是Ajax

对于HTTP协议要有一定了解，因为Ajax发送请求发的就是HTTP请求。

会讲解四种发送Ajax请求的方式：

原生
jQuery
fetch
axios

还会讲解Ajax跨域问题。

Ajax简介

全称：Asynchronous JavaScript And XML，即“异步的JS和XML”。通过Ajax可以在浏览器向服务器发送异步请求，最大的优势：无刷新获取数据。

早期的Ajax实现数据传输用的是XML，由于它太笨重，现已过时，改用JSON。
JSON不但语法简洁，而且转换为字符串也是相当容易。

优点：

无刷新获取数据
允许根据用户事件来更新部分页面

缺点：

没有浏览历史，不能回退
存在跨域问题（只能同源请求）
SEO不友好（爬虫爬不到网页内容）

HTTP协议

请求报文

重点是格式与参数

行 GET/POST path HTTP/1.1
头（都是键值对）
1. Host: baidu.com
2. Cookie: name=yyy
3. Content-type: application/x-www-form-urlencoded
4. User-Agent: Chrome 8.3
5. …
空行
体（若是GET，请求体为空；如果是POST，可以不为空） username=admin&password=admin

响应报文

行    HTTP/1.1    200  OK
头 （格式和请求头类似）
    Content-Type: text/html;charset=utf-8
    Content-length: 2048
    Content-encoding: gzip
    ...
空行
体（返回HTML）
    <html>
      <head></head>
      ...
    </html>