跨域一般用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. websocket初探

    本文尚未完成,在此只写一些句子,以后慢慢整理. 一.参数 IllegalArgumentException No payload parameter present on the method[mes ...

  2. VUE---Missing space before function parentheses

    解决方法:

  3. 如何利用git由本机向github上传文件

    首先,下载一个git,安装. 安装成功之后,输入以下命令,引号内的为你自己的名字和邮箱git config --global user.name "Your Name"git co ...

  4. Rabin-Karp指纹字符串查找算法

    首先计算模式字符串的散列函数, 如果找到一个和模式字符串散列值相同的子字符串, 那么继续验证两者是否匹配. 这个过程等价于将模式保存在一个散列表中, 然后在文本中的所有子字符串查找. 但不需要为散列表 ...

  5. Codeforces Round #388 (Div. 2)

      # Name     A Bachgold Problem standard input/output 1 s, 256 MB    x6036 B Parallelogram is Back s ...

  6. 爬虫框架--webmagic

    官方有详细的使用文档:http://webmagic.io/docs/zh/ 简介:这只是个java爬虫框架,具体使用需要个人去定制,没有图片验证,不能获取js渲染的网页,但简单易用,可以通过xpat ...

  7. 一个简单的 Web 服务器 [未完成]

    最近学习C++,linux和网络编程,想做个小(mini)项目.  就去搜索引擎, 开源中国, Sourceforge上找http server的项目. 好吧,也去了知乎.    知乎上程序员氛围好, ...

  8. TeXstudio 编写Latex论文的若干问题

    TeXstudio 编写Latex论文的若干问题解决方案总结       问题1: 如何安装TeXstudio 以及 Texstudio当中的中文字体使用问题.   一.如何安装TeXstudio 很 ...

  9. MyBatis源码分析（4）—— Cache构建以及应用

    @(MyBatis)[Cache] MyBatis源码分析--Cache构建以及应用 SqlSession使用缓存流程 如果开启了二级缓存,而Executor会使用CachingExecutor来装饰 ...

  10. python和数据科学(Anaconda)

    Python拥有着极其丰富且稳定的数据科学工具环境.遗憾的是,对不了解的人来说这个环境犹如丛林一般(cue snake joke).在这篇文章中,我会一步一步指导你怎么进入这个PyData丛林. 你可 ...