以下测试代码使用php，浏览器测试使用IE9,chrome,firefox,safari

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

    <script type="text/javascript" id="loadjson"></script>

    <script type="text/javascript">

    // 第一种

    // test1.php在服务器设置请允许跨域(注意：IE9测试不通过)

    $.ajax({

           type: 'POST',

           url: 'http://127.0.0.1:8081/test/test1.php',

           data: 'name=penngo',

           dataType: 'json',

           success: function(msg){

              $('#json').html(JSON.stringify(msg));

           }

        });

    // 第二种

    // test2.php使用jsonp

    $.ajax({

           type: 'GET',

           url: 'http://127.0.0.1:8081/test/test2.php?callback=?',

           data: 'name=penngo',

           dataType: 'jsonp',

           success: function(msg){

              $('#jsonp').html(JSON.stringify(msg));

           }

        });

    // 使用js标签加载方式,该方式为异步，通过testjs()回调

    var testjs = function(msg){

         $('#js').html(JSON.stringify(msg));

    }

    $('#loadjson')[0].src = 'http://127.0.0.1:8081/test/test3.php?method=testjs&name=penngo';

    </script>

</head>

<body>

    header跨域:

    <div id="json">

    </div>

    <br/>

    jsonp跨域:

    <div id="jsonp">

    </div>

    <br/>

    js请求实现跨域:

    <div id="js">

    </div>

</body>

</html>

服务器端处理

test1.php

<?php

    header("Access-Control-Allow-Origin: *");

    $name = $_REQUEST['name'];

    $result = array('success'=>1, 'name'=>$name);

    echo json_encode($result);

?>

test2.php

<?php

    $callback = $_REQUEST['callback'];

    $name = $_REQUEST['name'];

    $result = array('success'=>1, 'name'=>$name);

    $jsonData = json_encode($result);

    echo $callback . "(" . $jsonData . ")";

?>

test3.php

<?php

    $method = $_REQUEST['method'];

    $name = $_REQUEST['name'];

    $result = array('success'=>1, 'name'=>$name);

    $jsonData = json_encode($result);

    echo "$method($jsonData);";

?>

IE9测试，页面输出内容

header跨域:

jsonp跨域:

{"success":1,"name":"penngo"}

js请求实现跨域:

{"success":1,"name":"penngo"}

chrome,firefox,safari测试，页面输出内容

header跨域:

{"success":1,"name":"penngo"}

jsonp跨域:

{"success":1,"name":"penngo"}

js请求实现跨域:

{"success":1,"name":"penngo"}

 

web三种跨域请求数据方法的更多相关文章

  1. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  2. 同源策略（same-origin policy）及三种跨域方法

    同源策略(same-origin policy)及三种跨域方法 1.同源策略 含义: 同源是指文档的来源相同,主要包括三个方面 协议 主机 载入文档的URL端口 所以同源策略就是指脚本只能读取和所属文 ...

  3. 基于.Net Framework 4.0 Web API开发（5）：ASP.NET Web APIs AJAX 跨域请求解决办法（CORS实现）

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

  4. WebApi Ajax 跨域请求解决方法（CORS实现）

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别 ...

  5. WebApi Ajax 跨域请求解决方法（CORS实现）（作者：jianxuanbing）

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各 ...

  6. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较，DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  7. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

  8. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  9. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

随机推荐

  1. servlet(1)

    一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向 ...

  2. Spring学习笔记(3)——Bean的注入方式

    依赖注入 依赖注入支持属性注入.构造函数注入.工厂注入. 属性注入: 属性注入即通过setXxx()方法注入Bean的属性值或依赖对象 属性注入要求Bean提供一个默认的构造函数(无参构造函数),并为 ...

  3. 我的OpenCV学习笔记：VideoCapture类

    opnCV  学习博客http://blog.csdn.net/thefutureisour/article/details/7472104 1 OpneCV中的数据共享机制 OpenCV是一个很不错 ...

  4. JXL操作Excel

    jxl是一个韩国人写的java操作excel的工具, 在开源世界中,有两套比较有影响的API可 供使用,一个是POI,一个是jExcelAPI.其中功能相对POI比较弱一点.但jExcelAPI对中文 ...

  5. Maven基础知识（转）

    文章摘自http://www.cnblogs.com/xing901022/p/4170248.html 谢谢楼主的总结,界面设计的很好看! 一.什么是Maven Maven是一个用于项目构建的工具, ...

  6. SqlServer性能优化索引（五）

    导入表结构: select * into ProductCategory from AdventureWorksDW2014.dbo.DimProductCategory select * into ...

  7. Caffe 源碼閱讀（六） InternalThread

    类InternalThread是一个虚类,是Caffe中的多线程接口,其本质是为封装了boost::thread 看源码可以得到以下结论: 1.每个派生类都需要实现一个InternalThreadEn ...

  8. zenefits oa - sort integer array in lexographical order

    [ 12 | 2434 | 23 | 1 | 654 | 222 | 56 | 100000 ] Then the output should be: [ 1 | 100000 | 12 | 222 ...

  9. .net web端导出Excel个人的看法

    //对已有方法进行重写 public override void VerifyRenderingInServerForm(Control control) { } //设置文件名 string fil ...

  10. (原创)VM中的CentOS6.4中安装CloudStack6.3①

    CloudStack是一个功能强大.UI友好的开源云(IaaS)计算解决方案.自Ctrix将CloudStack捐献给 apache 后,一直持续高速发展,其社区活跃度已经渐渐赶上风头一时无两的另一开 ...