跨域一般用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. 基于centos的lnmp搭建

    部署lnmp环境 安装配置mariadb配置php配置phpmyadmin配置php-fpm配置nginx配置测试 LNMP(linux,nginx,mariadb,php)部署,以下默认在root权 ...

  2. python基础-异常处理

    一.错误和异常 程序中难免出现错误,而错误分成两种 1.1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法错误示范二 def te ...

  3. Hello session

    1. session 随想 HTTP 的无状态,也就是说,每次请求都是独立的线程.这里所说的无状态其实就是一种隔离的意思.举个例子比如购物车,你先选择A商品,加入购物车,这里就是A线程,然后在选择B商 ...

  4. 【转】微软教学：三种方法屏蔽Win7/Win8.1升级Win10推送

    原文地址:http://www.ithome.com/html/win10/199961.htm 微软在2015年6月就开启了Win10升级推送工作,主要是靠<获取Windows10>工具 ...

  5. asp.net配置web.config支持jQuery.Uploadify插件上传大文件

    配置web.config有两处地方需要配置,分别是集成模式和经典模式. 集成模式: <!--文件上传大小设置--> <httpRuntime requestValidationMod ...

  6. linux系统下使用xampp 丢失mysql root密码【xampp的初始密码为空】

    如果在ubuntu 下面 使用xampp这个集成开发环境,却忘记mysql密码. 注:刚安装好的xampp的Mysql初始密码是空... 找回密码的步骤如下: 1.停止mysql服务器 sudo /o ...

  7. 通过实现System.IComparable接口的CompareTo方法对两个类进行比较

    假设现在有一个学生类 class Student { int age; public Student(int age) { this.age = age; } } 要使学生类之间能进行比较,实现Sys ...

  8. js 中关联数组

    以前都不知道这种写法叫做关联数组. 何为关联数组呢.通常的数组在填充时会隐式或者显示指定数组下标,但JS中数组可以以名字的形式为元素赋值,这就形成了关联数组. 例子 var p={ name:'dai ...

  9. Sonar安装配置

    https://www.sonarqube.org/downloads/ 下载sonar.当前版本为6.2 解压压缩包,进行配置: 修改sonarqube-6.2\conf\sonar.propert ...

  10. CSS3的filter用法

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...