以下测试代码使用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. Node连接MySQL

    http://blog.fens.me/nodejs-mysql-intro/ http://czpae86.iteye.com/blog/1636302 http://www.cnblogs.com ...

  2. 手机支持USB功能、驱动文件对应关系

    手机支持USB功能: 1.UMS(USB MASS Stronge) : 连接PC作为存储盘使用 2.ADB : 用于调试 3.MTP :连接PC作为存储盘使用(win XP需要安装WMP10 以上 ...

  3. 数据结构《20》----Immutable stack

    有趣的函数式数据结构<一>----不可变栈 什么是不可变?往栈中插入一个元素,原来的栈保持不变,返回一个新的栈(已插入新的元素). push, pop,getMax 等操作都要求在 常数时 ...

  4. 写简单游戏，学编程语言-python篇：大鱼吃小鱼

    很常见的游戏之一,实现原理并不复杂,并且参考了几个相关的代码.这边主要还是以学习编程语言和学习编程思路为重点记录一下吧.最近时间有点吃紧,只能匆忙记录一下.用pygame做的大鱼吃小鱼的游戏截图如下: ...

  5. POJ 2976

    http://poj.org/problem?id=2976 01分数规划问题,可以舍掉k组 01分数规划用于解决的经典问题是最优比率生成树 解法见http://www.cnblogs.com/lot ...

  6. maven不打包子模块资源文件

    在maven多模块项目中,对子模块中的测试文件不需要打包到目标项目中,以免产生影响.实现方法: 1. 将测试资源放在java/test/resources 目录下,mvn package默认不会将te ...

  7. 【并查集】【树】最近公共祖先LCA-Tarjan算法

    最近公共祖先LCA 双链BT 如果每个结点都有一个指针指向它的父结点,于是我们可以从任何一个结点出发,得到一个到达树根结点的单向链表.因此这个问题转换为两个单向链表的第一个公共结点(先分别遍历两个链表 ...

  8. 用.NET从外部dwg文件导入块

    翻译并引自Kean's blog的两篇文章: http://through-the-interface.typepad.com/through_the_interface/2006/08/import ...

  9. 莱卡旗下旗下首台全片幅无反相机 Leica SL 抵港,吐槽下

    http://cn.engadget.com/2015/11/18/leica-sl-hk-hands-on/#continued 单机+单镜头=7.5W￥,如果再来个定焦共10W￥+:有心杀贼,无力 ...

  10. iOS里防止按钮被多次点击的办法

    原理:利用局部变量生存期局限在当前函数或者当前代码块的原理,实现C++里AutoLock的概念,其实也就是智能指针的概念. 利用局部变量在创建时执行按钮的setEnable为NO,在函数结束,且无bl ...