跨域一般用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. Connect to Office365

    How to connect to office365 1. Connect to Exchange Online $UserCredential = Get-Credential $Session ...

  2. 快速排序中的partition函数的枢纽元选择，代码细节，以及其标准实现

    很多笔试面试都喜欢考察快排,叫你手写一个也不是啥事.我很早之前就学了这个,对快速排序的过程是很清楚的.但是最近自己尝试手写,发现之前对算法的细节把握不够精准,很多地方甚至只是大脑中的一个映像,而没有理 ...

  3. BZOJ3944 Sum

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  4. 【基础】MVC路由规则

    一.RouteData解析过程 在ASP.NET MVC中,服务器收到来自客户端的请求后,会经过一些列的处理拿到请求的数据,比如在Pipeline 管线事件中,通过订阅适当的事件,将HttpConte ...

  5. 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架（四）

    SpringSecurity(1) 其实啊,这部分我是最不想写的,因为最麻烦的也是这部分,真的是非常非常的麻烦.关于SpringSecurity的配置,让我折腾了好半天,网上的配置方式一大把,但总有一 ...

  6. Premiere使用整理

    整理部分自己在使用Premiere CC中遇到的问题和注意点. 1. 新建序列 若是录屏文件,可选择已加入到项目中的视频文件,点击 文件-新建-来自剪辑的序列. 2. 新建字幕 用于在视频中添加文字. ...

  7. sift特征

    已经有很多博客已经将sift特征提取算法解释的很清楚了,我只是记录一些我不明白的地方,并且记录几个理解sift特征比较好的博客. 1. http://aishack.in/tutorials/sift ...

  8. php实现返回上一页的功能

    php实现返回上一页的功能的3种有效方法 header(location:你的上一页的路径);   //   注意这个函数前不能有输出      header(location:.getenv(&qu ...

  9. Django基础，Day2 - 编写urls,views,models

    编写views views:作为MVC中的C,接收用户的输入,调用数据库Model层和业务逻辑Model层,处理后将处理结果渲染到V层中去. polls/views.py: from django.h ...

  10. Apache Shiro 学习记录4

    今天看了教程的第三章...是关于授权的......和以前一样.....自己也研究了下....我觉得看那篇教程怎么说呢.....总体上是为数不多的精品教程了吧....但是有些地方确实是讲的太少了.... ...