js之ajax与cors(简解)
ajax
Asynchronous Javascript And XML(异步JavaScript和XML)
前后端交互工具
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作jax这个术语源自描述从基于 Web 的应用到基于数据的应用。
AJAX 如何工作
1.网页中发生一个事件(页面加载、按钮点击)
2.由 JavaScript 创建 XMLHttpRequest 对象
3.XMLHttpRequest 对象向 web 服务器发送请求
4.服务器处理该请求
5.服务器将响应发送回网页
6.由 JavaScript 读取响应
7.由 JavaScript 执行正确的动作(比如更新页面)
XMLHttpRequest
XMLHttpRequest
对象用于服务器交换数据,是 AJAX 的主要接口,尽管名字里面有XML
和Http
,它实际上可以使用多种协议(比如file
或ftp
),发送任何格式的数据(包括字符串和二进制)。
XMLHttpRequest
本身是一个构造函数,可以使用new
命令生成实例。它没有任何参数
xmlhttp=new XMLHttpRequest();
CORS
CORS请求默认不包含Cookie信息以及HTTP认证信息等
CORS 需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能。
整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS 通信与普通的 AJAX 通信没有差别,代码完全一样。浏览器一旦发现 AJAX 请求跨域,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感知。因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨域通信。
两种请求
CORS 请求分成两类:
简单请求(simple request):HTTP方法和简单HTTP头信息的结合
非简单请求(not-so-simple request):不满足TTP方法和简单HTTP头信息的要求
HTTP方法:HEAD ; GET ; POST
HTTP头信息:Aceept ; Aceept-Language ; Content-Language ; Lsat-Event-ID;Content-Type
简单请求
对于简单请求, 浏览器直接发出CORS请求,具体来说,就是在头信息中增加一个Origin字段
Origin字段来说明本次请求来自哪个域(协议+端口+域名),服务器会根据这个值决定是否同意这次请求
非简单请求
非简单请求就是对服务器提出特殊要求的请求,比如请求方法为PUT或者DELETE或者Content-Type字段的类型是application/json
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为“预检”请求
服务器收到“预检”请求以后,检查了Origin,Access-Control-Request-Method
和Access-Control-Request-Headers
字段以后,确认允许跨源请求,就可以做出回应。