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字段以后,确认允许跨源请求,就可以做出回应。
|