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版本不支持等

常见响应状态码：

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

Express框架基本使用：

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

 Ajax设置get请求参数：

post请求示例：

Ajax设置post请求参数：

 

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

Ajax-服务端响应JSON数据：

后端响应：

前端解析：

 

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

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

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

 Ajax取消请求：

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

 

更多推荐

AJAX简介