Ajax跨域:jsonp还是CORS

跨域一般用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

时间: 2024-10-23 21:04:58

Ajax跨域:jsonp还是CORS的相关文章

js ajax跨域被阻止 CORS 头缺少 &#39;Access-Control-Allow-Origin&#39;(转)

今天ajax请求域名的时候出现 已阻止跨源请求:同源策略禁止读取位于 http://www.zuimeimami.com*****的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin'). 解决办法1: var url='http://localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?'; $.ajax({ url:url, dataType:'

jQuery $.ajax跨域-JSONP获取JSON数据(转载)

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该

ajax跨域原理(2) cors跨域资源共享

不需要设置前端太多,只需要在服务端是在请求头,使服务端的回复数据可以正常通过浏览器的限制,进入网站 首先说下简单请求和非简单请求: 简单请求:必须满足下列条件 1.请求方式:head,get,post 2.请求头 Accept Accept-Language Content-Language Last-Event-ID Content-Type:其对应值限制为3个application/x-www-form-urlencoded,multipart/form-data,text/plain 必须

ajax 跨域----好用的解决方案

一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨域,有N种类型,本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下: 什么是ajax跨域 原理 表现(整理了一些遇到的问题以及解决方案) 如何解决ajax跨

ajax跨域,这应该是最全的解决方案了

前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见识有限,如有差错,请多多见谅,欢迎提出issue,另外看到这个标题,请勿喷~ 题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下

PHP处理Ajax请求与Ajax跨域

PHP判断是否为Ajax请求 我们知道,在发送ajax请求的时候,可以通过XMLHttpRequest这个对象,创建自定义的header头信息, 在jquery框架中,对于通过它的$.ajax, $.get, 或者$.post方法请求网页内容时,它会向服务器传递一个HTTP_X_REQUESTED_WITH的参数,php中就是在header一层判断是否是ajax请求,对应的根据$_SERVER['HTTP_X_REQUESTED_WITH']判断.一般情况下$_SERVER['HTTP_X_RE

【JS】AJAX跨域-被调用方与调用方解决方案(二)

解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域) 被调用方解决,基于支持跨域的解决思路,基于Http协议关于跨域的相关规定,在响应头里增加指定的字段告诉浏览器,允许调用 跨域请求是直接从浏览器发送到被调用方,被调用方在响应头里增加相关信息,返回到页面,页面能正常获取请求内容. 1.服务端增加一个过滤器(CrossFilter.java),过滤所有请求,在请求响应

AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比

1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介绍JSONP这种仅能支持GET请求的跨域方式和CORS作对比:最后,阐述CORS的XHR解决方式和IE中的XDR解决方式,在此基础上提供了工具函数进行跨浏览器的HTTP请求对象创建. 2 跨域问题的源头-同源策略 在客户端编程语言中,如javascript和 ActionScript,同源策略是一个

AJAX跨域调用相关知识-CORS和JSONP(引)

AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去访问另一个服务器并返回数据,这时候就会受到浏览器跨域的安全限制了. 这里要注意,如果只是通过AJAX向另一个服务器发送请求而不要求数据返回,是不受跨域限制的.浏览器只是限制不能访问另一个域的数据,即不能访问返回的数据,并不限制发送请求. 我们接下来就为