持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

1. Ajax概述

1.1 AJAX 简介

AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML 通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2 XML 简介

XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。比如说我有一个学生数据：

name = “孙悟空” ; 
age = 18 ;
gender = “男” ;

用XML 表示：
<student>
   <name>孙悟空</name> 
   <age>18</age>
   <gender>男</gender> 
</student>  现在已经被JSON 取代了。 {"name":"孙悟空","age":18,"gender":"男"}

1.3 AJAX 的特点

1.3.1 AJAX 的优点

可以无需刷新页面而与服务器端进行通信
允许你根据用户事件来更新部分页面内容

1.3.2 AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO 不友好

2. HTTP相关问题

2.1 MDN 文档

developer.mozilla.org/zh-CN/docs/…

2.2 HTTP 请求交互的基本过程

前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
浏览器端接收到响应, 解析显示响应体/调用监视回调

2.3 HTTP 请求报文

1. 请求行

method url GET /product_detail?id=2 POST /login

2. 多个请求头

Host: [www.baidu.com](www.baidu.com) 
Cookie: BAIDUID=AD3B0FA706E; 
BIDUPSID=AD3B0FA706;
Content-Type: application/x-www-form-urlencoded 或者application/json

3. 请求体

username=tom&pwd=123 {"username": "tom", "pwd": 123}

2.4 HTTP 响应报文

1.  响应状态行: status statusText
2.  多个响应头 Content-Type: text/html;charset=utf-8 Set-Cookie: BD_CK_SAM=1;path=/
3.  响应体 html 文本/json 文本/js/css/图片...

2.5 post 请求体参数格式

Content-Type: application/x-www-form-urlencoded;charset=utf-8 用于键值对参数，参数的键值用=连接, 参数之间用&连接例如: name=%E5%B0%8F%E6%98%8E&age=12
Content-Type: application/json;charset=utf-8 用于 json 字符串参数例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
Content-Type: multipart/form-data 用于文件上传请求

2.6 常见的响应状态码

200 OK 请求成功。一般用于GET 与POST 请求 201 Created 已创建。成功请求并创建了新的资源 401 Unauthorized 未授权/请求要求用户的身份认证 404 Not Found 服务器无法根据客户端的请求找到资源 500 Internal Server Error 服务器内部错误，无法完成请求

2.7 不同类型的请求及其作用

GET: 从服务器端读取数据（查）
POST: 向服务器端添加新数据（增）
PUT: 更新服务器端已经数据（改）
DELETE: 删除服务器端数据（删）

2.8 API 的分类

REST API: restful （Representational State Transfer (资源)表现层状态转化） (1) 发送请求进行CRUD 哪个操作由请求方式来决定
(2) 同一个请求路径可以进行多个操作
(3) 请求方式会用到GET/POST/PUT/DELETE
非REST API: restless
(1) 请求方式不决定请求的CRUD 操作
(2) 一个请求路径只对应一个操作
(3) 一般只有GET/POST

2.9 区别一般http请求与 ajax请求

ajax请求是一种特别的 http请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有XHR 或fetch 发出的才是ajax 请求, 其它所有的都是非ajax 请求
浏览器端接收到响应 (1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
(2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

详解AJAX（一）