AJAX简介

AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。

通过AJAX可以在浏览器中向服务器发送异步请求。

最大的优势：无刷新的获取数据。

Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML: 可扩展标记语言，被设计用来传输和存储数据。

与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。

Ajax特点：

优点：

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

缺点：

• 没有浏览历史，不能回退
• 存在跨域问题（同源）
• SEO不友好（搜索引擎优化，对爬虫不友好）

HTTP协议：hypertext transport protocol（超文本传输协议），协议详细规定了浏览器和万维网服务器之间互相通信的规则。（一种约定，规则）

1. 请求报文：重点是格式和参数

请求行：请求类型 请求路径+查询字符串 协议版本

2. 响应报文：

响应行：协议版本 响应状态码 响应状态字符串

状态码分类：

状态码分类	说明
1xx	响应中——临时状态码，表示请求已经接受，告诉客户端应该继续请求或者如果它已经完成则忽略它
2xx	成功——表示请求已经被成功接收，处理已完成
3xx	重定向——重定向到其它地方：它让客户端再发起一个请求以完成整个处理。
4xx	客户端错误——处理发生错误，责任在客户端，如：客户端的请求一个不存在的资源，客户端未被授权，禁止访问等
5xx	服务器端错误——处理发生错误，责任在服务端，如：服务端抛出异常，路由出错，HTTP版本不支持等

常见响应状态码：

状态码	响应状态字符	说明
200	OK	客户端请求成功，即处理成功，这是我们最想看到的状态码
302	Found	指示所请求的资源已移动到由Location响应头给定的 URL，浏览器会自动重新访问到这个页面
304	Not Modified	告诉客户端，你请求的资源至上次取得后，服务端并未更改，你直接用你本地缓存吧。隐式重定向
400	Bad Request	客户端请求有语法错误，不能被服务器所理解
403	Forbidden	服务器收到请求，但是拒绝提供服务，比如：没有权限访问相关资源
404	Not Found	请求资源不存在，一般是URL输入有误，或者网站资源被删除了
428	Precondition Required	服务器要求有条件的请求，告诉客户端要想访问该资源，必须携带特定的请求头
429	Too Many Requests	太多请求，可以限制客户端请求某个资源的数量，配合 Retry-After(多长时间后可以请求)响应头一起使用
431	Request Header Fields Too Large	请求头太大，服务器不愿意处理请求，因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。
405	Method Not Allowed	请求方式有误，比如应该用GET请求方式的资源，用了POST
500	Internal Server Error	服务器发生不可预期的错误。服务器出异常了，赶紧看日志去吧
503	Service Unavailable	服务器尚未准备好处理请求，服务器刚刚启动，还未初始化好
511	Network Authentication Required	客户端需要进行身份验证才能获得网络访问权限

Express框架基本使用：

 前端原生JS发送get网络请求示例：

 Ajax设置get请求参数：

post请求示例：

Ajax设置post请求参数：

 

 设置请求头信息：Content-Type(预定义的)

Ajax-服务端响应JSON数据：

后端响应：

前端解析：

 

 IE缓存问题：IE浏览器会对Ajax请求的返回结果做一个缓存。下一次发送请求时，会导致走的是本地的缓存，而不是服务器的最新数据，对时效性比较强的场景，这个缓存会带来影响，不能正常显示。

解决：请求时加一个时间戳，每次请求为一个新的请求，会重新向服务器发请求。

 Ajax请求超时与网络异常处理：

 Ajax取消请求：

Ajax请求重复发送问题：设一个标识变量，使用abort()方法取消