跨域一般用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. 【BZOJ 1061】【Vijos 1825】【NOI 2008】志愿者招募

    http://www.lydsy.com/JudgeOnline/problem.php?id=1061 https://vijos.org/p/1825 直接上姜爷论文... #include< ...

  2. Mysql主从架构的复制

    复制类型 (1)基于语句的复制:  在主服务器上执行的SQL语句,在从服务器上执行同样的语句.MySQL默认采用基于语句的复制,效率比较高.  一旦发现没法精确复制时,会自动选着基于行的复制. (2) ...

  3. Tomcat内存溢出的三种情况及解决办法分析

    Tomcat内存溢出的原因 在生产环境中tomcat内存设置不好很容易出现内存溢出.造成内存溢出是不一样的,当然处理方式也不一样. 这里根据平时遇到的情况和相关资料进行一个总结.常见的一般会有下面三种 ...

  4. js导出excel

    function inportEx() { $("#btnEx").text("导出中..."); var fugNumber = "";/ ...

  5. HTML5 之 FileReader（图片上传）

    1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. Fil ...

  6. bzoj4443[SCOI2015]小凸玩矩阵

    题意:一个n*m的矩阵(n<=m<=250),要求选出n个数(每行,每列最多选一个),求第k大数的最小值. 首先第k大的意思是从大到小的第k个数(我读错了,WA了一次还以为算法不对...) ...

  7. Python Day21

    Cookie 1.获取Cookie: request.COOKIES['key'] request.get_signed_cookie(key, default=RAISE_ERROR, salt=' ...

  8. Java学习笔记-Math类

    并非所有的类都需要main方法.Math类和JOptionPane类都没有main方法.这些类中所包含的方法主要是为了供其他类使用. package welcome; public class Tes ...

  9. TransMac Win系统下制作 OS X启动盘图文教程超详细小白版

    1软件安装好后把准备好的8G或者8G以上U盘插到电脑上:右键以管理员身份运行如                     <ignore_js_op> 2打开软件后右键先格式化U盘操作如下图 ...

  10. C# 全角和半角转换以及判断的简单代码

    在C#中判断和转换全角半角的方法 1. 判断是否为全角半角 全角占用二个字节 半角占用一个字节 用string.length 和System.text.Encoding.Default.GetByte ...