XMLHttpRequest Level 2的功能已经大幅提升了,
参见:http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
我们知道,受到浏览器”同域限制“制约,以前的xhr对象是无法完成跨域请求的,而现在只需在Server端做一个访问控制,Client端再用xhr对象请求就行了,一般情况下Client并不需要设置,当然还有些相关的方法属性可供使用的,比如setRequestHeader,withCredentials。
服务端设置参见:https://developer.mozilla.org/en-US/docs/Server-Side_Access_Control
下面我们简单的做个demo
Server端代码(PHP):
- if($_SERVER['HTTP_ORIGIN']=="http://www.cssass.com")
- {
- header(Access-Control-Allow-Origin: http://www.cssass.com');
- Content-Type: text/plain REQUEST_METHODGET {
- $arr=array(
- id'=>1',
- nameXMLHttpRequest Response'
- );
- echojson_encode($arr);
- };
- };
http响应头设置参见:https://developer.mozilla.org/en-US/docs/HTTP_access_control#The_HTTP_response_headers
Client端代码:
正如你所知,ie下是不支持XMLHttpRequest Level 2的,不过ie8引入了自己的跨域对象XDomainRequest。(同时ie8下的xhr对象也引入了 timeou属性t和ontimeout方法)
所以我们做下兼容(不支持ie6,ie7):
接下来,我们来了解下JSONP这种在同域限制的情况下实现跨域请求(GET)的实现过程。
原理其实就是:以script标签的形式在页面中放置一个请求地址,该请求地址返回的数据格式为:
jsonp1354513528560({“id”:”2″,”name”:”JSON with Padding”})
如果jsonp1354513528560是一个预先定义好的JS方法,那么获取其参数(我们实际需要获取的数据)就顺理成章了。
以下是Client端的实现代码:
Server端很简单,只需拼接输出一个js的执行方法即可。
演示: