跨域源资源共享
通过XHR实现Ajax通信的一个主要限制,来源与跨域安全策略。默认情况下,xhr对象只能访问与包含它的页面位于同一个域中的资源。实现合理的跨域请求对开发浏览器应用程序至关重要CORS(Cross-Origin Resource Sharing,跨域源资源共享)
CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行狗从,从而决定请求或响应是否成功//没有自定义头部,而主体内容是text/plain。在发送该请求时,附加一个额外的Origin头部Origin:http://www.nczonline.net
//如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的源信息Access-Control-Allow-Origin:http://www.nczonline.net
如果没有这个头部,或者这个头部但源信息不匹配,浏览器就会驳回请求。正常情况下,浏览器会处理请求。
*:请求和响应都不包含cookie信息
跨浏览器的CORS
检测xhr是否支持CORS的最简单方式,就是检查是否存在withCredentials属性。再结合检测XDomainRequest对象是否存在,就可以兼顾所有浏览器function createCORSRequest(method,url){ var xhr=new XMLHttpRequest(); // "withCredentials"属性是XMLHTTPRequest2中独有的 if("withCredentials" in xhr){ xhr.open(method, url, true); }else if(typeof XDomainRequest!='undefined'){ // 检测是否XDomainRequest可用 xhr =new XDomainRequest(); xhr.open(method,url); }else{ //othewise CORS is not supported by the browser xhr=null; } return xhr;}var request = createCORSRequest("get", "http://182.254.146.112/demo.php");if (request){ request.onload = function(){ console.log(request.responseText); //对 request.responseText 进行处理 }; request.send();}
其他跨域技术-图像ping
虽然CORS技术已经无处不在,但开发人员自己发明的这些技术仍然被广泛使用,毕竟这样不需要修改服务器代码我们知道,一个网页可以从任何网页中加载图像,不用担心跨域不跨域。动态创建图像经常用于图像Ping。图像Ping是与服务器进行简单、单向的跨域通信的一种方式var img = new Image();img.onload = img.onerror = function(){ alert('Done!);}img.src = 'http://www.example.com/test?name=Nicholas';
图像Ping最常用与跟踪用户点击页面或动态广告曝光次数。图像Ping两个主要的缺点。一是只能发送get请求,二是无法访问服务器的响应文本。
因此,图像Ping只能用于浏览器与服务器间的单向通信
其他跨域技术-JSONP
JSONP看起来与JSON差不多,只不过是被包含在函数调用中的JSON,就像这样callback({ 'name':'Nicholas' })
JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入
回调函数中的json数据。下面是一个典型的JSONP请求http://freegeoip.net/json/?callback=handleResponse
JSONP是通过动态<script>元素来使用的。这里的<script>跟<img>元素类似,都有能力不受限制地从其他域加载资源
function handleResponse(response){ alert('you are at ip address ' + response.ip + response.city + response.region_name);}var script = document.createElement('script');script.src = 'http://freegeoip.net/json/?callback=handleResponse';document.body.insertBefore(script, document.body.firstChild);
JSONP之所以在开发人员中极为流行,主要原因是它非常简单易用。与图像Ping相比,它地优点在于能够直接访问响应文本,支持在浏览器与服务器之间双向通信。
不过,JSONP也有两点不足:1、JSONP是从其他域中加载代码执行。如果其它域不安全,很可能会在响应中夹带一些恶意的代码,而此时除了完全放弃JSONP调用之外,没有办法追究。因此,一定要保证它安全可靠2、要确定JSONP请求是否失败并不容易。虽然给scrip元素新增了一个onerror事件处理程序,但目前还没有得到任何浏览器的支持。