跨域资源共享

1.什么是跨域资源共享

CORS(Cross-Origin Resource Sharing,跨域资源共享)就是一个站点中的资源去访问另一个不一样源站点上的资源,其基本思想,就是使用自定义的HTTP头部让浏览器和服务器进行沟通,从而决定请求或响应是成功仍是失败。javascript

2.为何要使用跨域资源共享

因为跨域安全策略限制,经过XHR实现ajax通讯,XHR对象只能访问与包含它的页面位于同一个域中的资源。而实际应用中,经过 <link> 标签加载外部样式表文件、经过 <img> 标签加载外部图片、经过 <script> 标签加载外部脚本文件等都须要使用跨域请求。php

3.CORS的实现

IE对CORS的实现
请求跨域文件java

var xdr = new XDomainRequest();
xdr.onload = function(){
    alert(xdr.responseText);
};
xdr.onerror=function(){
    alert("an error occurred");
};
xdr.open("get", "http://www.baidu.com/resource/");
xdr.send();

Origin:http://www.baidu.com/resource/  //自定义头部NCZ的使用POST方法发送的请求
Access-Control-Request-Method:POST
Access-Control-Request-Method:NCZ

服务器文件
<?phpajax

header("Access-Control-Allow-Origin:http://www.baidu.com/resource/");//容许的相应的源
header("Access-Control-Allow-Method:POST,GET");//容许的方法
header("Access-Control-Allow-Header:NCZ");//容许的头部
header("Access-Control-Max-Age:86400");//请求缓存多长时间

firefox,safari,chrome对CORS的实现chrome

var xhr=new createXHR();
xhr.onreadystatechange=function(){
    if(xhr.readystate==4){
        if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
            alert(xhr.responseText);
        }
    }else{
        alert("request was failed:"+xhr.status);
    }
};
xhr.open("get", "http://www.baidu.com/resource/");
xdr.send();

4.其余跨域技术

JSONP(JSON with Padding 填充式JSON 或参数式JSON)
SONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。
例如:json

<script type="text/javascript">
 function handleResponse(response){
 //处理得到的json数据
 }
</script>
<script src="http://example.com/data.php?callback=handleResponse"></script>//一个JSONP的请求

首先第一个script便签订义了一个处理数据的函数;
而后第二个script标签载入一个js文件,http://example.com/data.php 是数据所在地址,可是由于是当作js来引入的,因此http://example.com/data.php 返回的必须是一个能执行的js文件;
最后js文件载入成功后会执行咱们在url参数中指定的函数,而且会把咱们须要的json数据做为参数传入。因此php应该是这样的跨域

<?php
$callback = $_GET['callback'];//获得回调函数名
$data = array('1','2','3');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出

输出结果为:handleResponse(['1','2','3']);
jsonp是须要服务器端的页面进行相应的配合的。
图像ping
Comet
服务器发送事件
Web Sockets
SSE与Web SSockets浏览器

相关文章
相关标签/搜索