跨域一般用jsonp,兼容性比较好。
CORS是html5最新的XHR第二版本,不支持IE8,IE9,对移动端的支持非常好。
但是考虑项目后期这部分会转到同域名下,而且网址不需要支持ie8,ie9,所以我们考虑使用html5最新的跨域资源共享(CORS)来实现跨域请求。

http://a.test.com/cross.html

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>sub domain</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jQuery.XDomainRequest.js"></script>
</head> <body>
<h3>跨域限制</h3>
<button class="btn btn-primary btn-sm" onclick="crossAjax();">跨域请求</button>
<hr />
<h3>IE8,9跨域限制</h3>
<button class="btn btn-primary btn-sm" onclick="ieCrossAjax();">跨域请求</button>
<hr />
<script>
function crossAjax() {
// var url = 'http://192.168.1.138:8080/msjc-admin/index';
var url = 'http://b.test.com/test.php'; $.ajax(url).done(function(data) {
alert(data.name);
}).fail(function() {
alert('请求失败');
});
} function ieCrossAjax() {
var url = 'http://b.test.com/test.php'; // var xdr = new XDomainRequest();
// xdr.open("get", url);
// xdr.onload = function() {
// var data = JSON.parse(xdr.responseText)
// alert(data.name);
// }
// xdr.send(); // GET
// $.getJSON(url).done(function(data) {
// alert(data.name);
// }); $.ajax({
url: url,
type: 'GET',
dataType: 'json'
}).done(function(data) {
alert(data.name);
}); // POST
// POST
// $.ajax({
// url: url,
// data: {
// name: 'nuanfeng',
// gender: 'boy'
// },
// contentType: 'text/plain',
// type: 'POST',
// dataType: 'json'
// }).done(function(data) {
// console.log(data);
// }); // $.post(url, {
// name: "Donald Duck",
// gender: "Duckburg"
// },
// function(data, status) {
// alert("Data: " + data.name + "\nStatus: " + status);
// }); }
</script>
</body> </html>

php - server:

<?php
$ret = array(
'name' => isset($_POST['name'])? $_POST['name'] : 'myName',
'gender' => isset($_POST['gender'])? $_POST['gender'] : 'myGender'
); // $ret = file_get_contents("php://input");
// $ret = $ret=>'name';
// $ret = json_encode($ret); header('content-type:application:json;charset=utf8');
// 指定可信任的域名来接收响应信息
header('Access-Control-Allow-Origin:*');
// header('Access-Control-Allow-Methods:POST');
// header('Access-Control-Allow-Headers:x-requested-with,content-type'); echo json_encode($ret);
?>

如果需要支持ie8,ie9,可以判断ie情况下使用XDomainRequest来实现:

var xdr = new XDomainRequest();
xdr.open("get", url);
xdr.onload = function() {
var data = JSON.parse(xdr.responseText)
alert(data.name);
}
xdr.send();

上面的cross.html中,我们引入了一个jQuery.XDomainRequest,它就是封装了XDR(XDomainRequest)来支持ie8和ie9. (http://www.tuicool.com/articles/Njiiamm

关于CORS更详细点的介绍:http://blog.csdn.net/fdipzone/article/details/46390573   http://www.cnblogs.com/yuzhongwusan/p/3677955.html

Ajax跨域:jsonp还是CORS的更多相关文章

  1. ajax跨域请求解决方案 CORS和JSONP

    什么是跨域: 只要协议.域名.端口有任何一个不同,都会被当成不同的域.而由于浏览器的同源策略(同源策略:域名.协议.端口均相同),浏览器之间要隔离不同域的内容,禁止互相操作,不能执行其他网站的js.所 ...

  2. 小结ajax中的同源和跨域 jsonp和cors

    网上的同源和跨域一般都比较复杂,最近也稍微总结了一下: 所谓同源,是浏览器的一种安全机制,作用在于保护网页数据的安全,不同源的网页之间不允许cookie dom ajax等行为 同源的条件:1.协议相 ...

  3. 如何解决 ajax跨域被阻止 CORS 头缺少 'Access-Control-Allow-Origin'的问题?

    已拦截跨源请求:同源策略禁止读取位于 http://192.168.1.72:8080/securityMonitor_TV/service/getTest 的远程资源. (原因:CORS 头缺少 ' ...

  4. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

  5. 【JS】AJAX跨域-JSONP解决方案(一)

    AJAX跨域介绍 AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面 由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求 ...

  6. AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors

    https 协议    默认端口号 443 http 协议    默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号    必须完全一致 违 ...

  7. 跨域-jsonp、cors、iframe、document.domain、postMessage()

    同源策略 概念:同源: 协议.域名.端口号 完全相同 同源策略是浏览器的一种安全策略:且浏览器不会将违反同源策略的响应信息返回 http://127.0.0.1:3000/index.html     ...

  8. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  9. ajax跨域jsonp

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  10. ajax跨域原理和cors跨域资源共享

    不需要设置前端太多,只需要在服务端是在请求头,使服务端的回复数据可以正常通过浏览器的限制,进入网站 首先说下简单请求和非简单请求: 简单请求:必须满足下列条件 1.请求方式:head,get,post ...

随机推荐

  1. 抱歉!15:44-16:39阿里云RDS故障造成全站不能正常访问

    非常非常抱歉!2016年3月7日15:44-16:39,由于阿里云RDS(云数据库)故障,造成全站不能正常访问,给您带来了很大很大的麻烦,恳请您的谅解! 故障是在15:44开始出现的,应用日志中出现大 ...

  2. Workload Automation分析及其使用

    Workload Automation介绍 Workload Automation是提供一个在设备上运行各种workload的工具,使用Python编写.WA具有良好的框架结构,方便快捷的扩展.包含几 ...

  3. mysql 基本操作

    创建数据库 create database studentdb charset utf8; #创建数据库 create database studentdb charset utf8; #查看数据库的 ...

  4. 43. Multiply Strings

    /** * @param {string} num1 * @param {string} num2 * @return {string} */ var multiply = function(num1 ...

  5. HTML5射击类游戏----【地球保卫战】

    在线DEMO地址:打开: 游戏截图:      就不贴代码了, 因为代码太多了, 大概写一下这个游戏实现思路和一些实现: 游戏一共有三关, 每一关都有一个大Boss, Boss比较好杀,主要各种外星飞 ...

  6. Android Studio导入项目遇到的问题

    [ Failed to resolve: com.afollestad:material-dialogs:0.7.5.5] 解决办法: 1.打开app目录下的build.gradle文件,然后在and ...

  7. Android基础总结(五)

    HttpClient 发送get请求 创建一个客户端对象 HttpClient client = new DefaultHttpClient(); 创建一个get请求对象 HttpGet hg = n ...

  8. 北京培训记day4

    智商题QAQ-- T1:求>=n的最小素数,n<=10^18 暴力枚举n-n+100,miller-rabin筛法 T2:给定一个01矩阵,每次选择一个1并将(x,y)到(1,1)颜色反转 ...

  9. Drop it

    FCC题目:队友该卖就卖,千万别舍不得. 让我们来丢弃数组(arr)的元素,从左边开始,直到回调函数return true就停止. 第二个参数,func,是一个函数.用来测试数组的第一个元素,如果返回 ...

  10. 《黑客反汇编揭秘》(2e)推荐书单

    Must-Read Books and Other References Books on C/C++: The C Programming Language by Brian W. Kernigha ...