ajax 跨域的几种方式

网络上跨域的文章大多一样,这里我写下,巩固下自己的知识,顺便做个记录

什么是跨域

这里简单拿百度的网址做个例子:http://www.baidu.com:80 (默认都是80端口、可省略)

http 协议

www 子域名

baidu 主域名

80 端口号

总结:协议、子域名、主域名、端口,其中一个不一致的都称为跨域

jsonp 跨域

在网页中,我们会使用一些cdn图片、cdn资源,他们和我们的页面都不在一个域内,但是他们却可以使用,聪明的程序员使用src 可引入外部资源,实现了跨域的需求。

在页面中定义js函数,通过script 标签的src引入要请求的接口(这就是jsonp的原理),接口中调用js函数,传入json 数据。我这里写了一个简单的例子

<!DOCTYPE html>
<html>
<head>
<title>jsonp 跨域</title>
</head>
<body> <div id="ajax-wrap">通过ajax请求来改变这里的内容</div> <script type="text/javascript"> // 定义jsonp 函数
function jsonp(json){ setTimeout(function(){
var box = document.getElementById('ajax-wrap');
box.innerHTML = json.code;
},3000);
} // 添加script 标签
function appendScript(url){
var script = document.createElement('script');
script.setAttribute('src',url);
document.body.appendChild(s
cript);
} appendScript('http://test2.com'); </script> </body>
</html>
// 服务器端代码
<?php
echo 'jsonp({
"code": "CA1998",
"price": 1780,
"tickets": 5
})'; ?>

jQuery jsonp 跨域

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body> <div id="ajax-wrap">通过ajax请求来改变这里的内容</div> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> // 定义jsonp 函数
function jsonpp(json){
var box = document.getElementById('ajax-wrap');
box.innerHTML = json.code;
} jQuery(document).ready(function(){
$.ajax({
type: "get",
url: "http://test2.com",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
// jsonpCallback:"jsonpp",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据,如果这里有写的话,success 可以不用处理
success: function(json){
// console.log(json);
jsonpp(json);
},
error: function(xhr){
console.log(xhr);
}
});
}); </script>
</body>
</html>

有些时候,我们在拿到一些公共接口,使用jsonp方式调用接口时、无法使用,应该是接口没有做jsonp的处理

3,CORS 跨域

CORS 是一个W3C标准,全称跨域资源共享(Cross-origin resource sharing)。最初,是在1995年、由网景公司首先加入浏览器的,主要用于互联网跨域访问的安全。跨域资源共享需要浏览器和服务器同时支持,貌似跟ajax没有什么关系。

当我们的ajax请求是跨域请求时,会在请求头信息中,添加一个origin 字段,告诉服务器这个请求来自哪个源。服务器接收到这个字段后,决定是否同意这次请求

// 指定允许其他域名访问  (这个最重要,参数为* 表示任何域名都可以访问,一版设置为请求头信息中的 origin字段)
header('Access-Control-Allow-Origin: http://test.com');
// 响应类型 ()
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');

这里我只写一个简单的例子

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body> <div id="ajax-wrap">通过ajax请求来改变这里的内容</div> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> jQuery(document).ready(function(){
$.ajax({
type: "get",
url: "http://test2.com?name=xiami",
dataType: "json",
success: function(json){
console.log(json);
},
error: function(xhr){
console.log(xhr);
}
});
}); </script>
</body>
</html>
// php 代码
<?php
// 指定允许其他域名访问
header('Access-Control-Allow-Origin: http://test.com');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type'); echo '{
"code": "CA1998",
"price": ' .$name.',
"tickets": 5
}';

cors兼容 IE10及以上版本, 更多细节,通过下面的参考网址,进行详细查看

参考网址

说说JSON和JSONP,也许你会豁然开朗

XHR2 了解

浏览器同源策略及规避方法

跨域资源共享 CORS 详解

HTTP访问控制(CORS)

上一篇:CodeForces - 1093F:Vasya and Array (DP&计数)


下一篇:BPM 应用系统开发案例实战