以下测试代码使用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. 解决ORA-14450:试图访问已经在使用的事务处理临时表

    select * from dba_objects where object_name='TEMP_MZGL_BRSFD'; select 'alter system kill session ''' ...

  2. Spring事务传播机制&隔离级别

    一.Propagation (事务的传播属性) Propagation : key属性确定代理应该给哪个方法增加事务行为.这样的属性最重要的部份是传播行为.有以下选项可供使用:PROPAGATION_ ...

  3. 用jQuery判断一个元素的各种状态

    用jQuery判断一个元素是否显示   用jQuery判断一个元素是否显示:$(element).is(":visible"); 类似的,判断一个元素是不是第一个子元素:$(ele ...

  4. Python 基础之在ubuntu系统下安装双版本python

    前言:随着python升级更新,新版本较于老版本功能点也有不同地方,作为一个初学者应该了解旧版本的规则,也要继续学习新版本的知识.为了能更好去学习python,我在ubuntu安装python2和py ...

  5. C++学习笔记27:异常处理机制

    一.异常处理机制基础 异常的定义 程序中可以检测的运行不正常的情况 异常处理的基本流程 某段程序代码在执行操作时发生特殊情况,引发一个特定的异常 另一段程序代码捕获该异常并处理它 二.异常的引发 th ...

  6. Word Break

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  7. 华为U8810的用户如何获取ROOT权限详细教程

    由于在论坛里看到有人在找这个手机的详细的root教程,所以刷机啦小编在这里整理了一下方便新手来操作,其实这个手机root起来还是蛮简单的,只需要一个root软件就可以了,相当于一键root了,在这里整 ...

  8. JAVA，NET RSA密钥格式转换

    JAVA和NET RSA密钥格式相互转换(公钥,私钥) 做了一个小项目遇到java和.net非对称加密问题,java的公钥和私钥就直接是一个字符串的形式展示的,但是.net是以xml简单包裹形式展示的 ...

  9. ie8兼容

    最近在做ie8兼容,把遇到的问题整理了一下 1. margin:0 auto; 无法居中 解决方法:1.换成h4的文档类型 <!DOCTYPE html PUBLIC "-//W3C/ ...

  10. 【转】oracle内存分配和调优总结

    转自 http://blog.itpub.net/12272958/viewspace-696834/ 一直都想总结一下oracle内存调整方面的知识,最近正好优化一个数据库内存参数,查找一些资料并且 ...