跨域一般用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. RabbitMQ总结概念

    AMQP:一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计 http://www.diggerplus.org/archives/3110 AMQP ...

  2. SSRF篇-本着就了解安全本质的想法,尽可能的用通俗易懂的语言去解释安全漏洞问题

    SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外网无法访问的内部系统.( ...

  3. mysql-You can’t specify target table for update in FROM clause错误

    mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...

  4. grails 优缺点分析

    Grails是一套用于快速Web应用开发的开源框架,它基于Groovy编程语言,并构建于Spring.Hibernate等开源框架之上,是一个高生产力一站式框架. 易于使用的基于Hibernate的对 ...

  5. my computer

    把08年买的电脑换了,自己买的配件装的,狂拽酷炫叼炸天. 配置清单: CPU :英特尔至强E3-1230 V2 主板 :华硕P8Z77-V LX LX2 机箱 :撒哈拉海盗贼王Z6游戏机箱(白色限量版 ...

  6. smarty使用

    smarty-牛刀小试 smarty 初识 官网 http://www.smarty.net/ Smarty is a template engine for PHP(PHP模板引擎) smarty使 ...

  7. 架构师养成记--15.Disruptor并发框架

    一.概述 disruptor对于处理并发任务很擅长,曾有人测过,一个线程里1s内可以处理六百万个订单,性能相当感人. 这个框架的结构大概是:数据生产端 --> 缓存 --> 消费端 缓存中 ...

  8. Scrum Meeting 20161205

    本周Sprint Master 史少帅 一. 会议概要 作为一个新的sprint的开端,本次scrum meeting总结了每个人过去以来的工作,并明确了下一步的计划,具体如下: 工作总结: · 陈双 ...

  9. 前端CDN公共库

    通过使用公共的CDN脚本和样式库,可以在一定程度上加速访问.节省服务器流量.提升你的网站用户体验.本文将介绍国内比较常用的几种免费的CDN库,包括百度.新浪.360.又拍和七牛等. 百度CDN公共库 ...

  10. 传统瀑布式&敏捷开发

    ---传统瀑布式 瀑布模型式是最典型的预见性的方法,严格遵循预先计划的需求.分析.设计.编码.测试的步骤顺序进行. 步骤成果作为衡量进度的方法,例如需求规格,设计文档,测试计划和代码审阅等等. 瀑布式 ...