浅析php中jsonp的跨域实例

我们现在www.test.com这个域名下面有这么个html文件testjsonp.html:


复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title>Untitled Page</title>
      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){
        $.ajax({
             type: "GET",
             async: false,
             //url: "http://test/jsonp.php",
             url:"http://mytaobao.com/jsonp.php",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。回调函数名为: '+json.func);
             },
             error: function(){
                 alert("fail");
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>

注意,要真正运行上面的代码可能需要jquery的文件,你可以将<script type="text/javascript" src="jquery-1.7.2.min.js"></script>改为你目录中jquery的文件路径:
如:<script type="text/javascript" src="js/jquery.js"></script>
然后,你可以再找个另外一个域名的web目录,将文件jsonp.php:


复制代码 代码如下:

<?php
$callback = $_GET["callback"];
$a = array(
 'code'=>'CA1998',
    'price'=>'6000',
    'tickets'=>20,
    'func'=>$callback,
);
$result = json_encode($a);
echo "flightHandler($result)";
exit;

放到这个目录下面去。这样就可以测试了。
直接在浏览器访问testjsonp.html.就可以看到效果了。

时间: 2013-06-18

jquery下利用jsonp跨域访问实现方法

复制代码 代码如下: $.ajax({ async:false, url: '', // 跨域URL type: 'GET', dataType: 'jsonp', jsonp: 'jsoncallback', //默认callback data: mydata, //请求数据 timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 }, success: fu

基于Jquery的跨域传输数据(JSONP)

后端: 复制代码 代码如下: <?php $json_str = json_encode(array("ddd"=>"11111111")); echo $_GET['ja'].'('.$json_str.')'; ?> 前端: 复制代码 代码如下: $.getJSON('http://www.liushan.cn/test.php?ja=?',function (json){ alert(json); }); 纯JS实现(JSONP): 复制代码

Jsonp 跨域的原理以及Jquery的解决方案

原理:JSONP即JSON with Padding.由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源.如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象.这种跨域的通讯方式称为JSONP. 个人理解: 就是在客户端动态注册一个函数function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端

用jQuery与JSONP轻松解决跨域访问的问题

时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成"跨域访问"的工作,然后在浏览器端用AJAX获取本机服务器端"跨域访问"对应的url.来间接完成跨域访问也是可以的

jQuery使用JSONP实现跨域获取数据的三种方法详解

本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法.分享给大家供大家参考,具体如下: 第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } }); 第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可 $.getJSON('http:/

Jsonp post 跨域方案

近期在项目中遇到这样一问题,关于jsonp跨域问题,get传值是可以的,但post传值死活不行啊,于是网上看了一大堆关于这方面的资料,最终问题得以解决,今天抽空与大家分享下. 说明: http://www.t1.com/index.php 服务端URL 当然这是我本地配置的,需要改为自己对应的地址. 客户端代码: <script> $(function(){ var url = 'http://www.t1.com/index.php'; $.ajax({ type: 'post', url:

跨域请求之jQuery的ajax jsonp的使用解惑

直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

jquery ajax jsonp跨域调用实例代码

客户端代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

使用jsonp完美解决跨域问题

调用web接口,get请求,发现提示:No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个和安全机制有关,默认不允许跨域调用 处理手段:使用jsonp格式, ajax请求参数dataType:'JSONP'. 复制代码 代码如下: $.ajax({         url: "http://.......",         type: 'GET',         dataTy

js实现跨域的几种方法汇总(图片ping、JSONP和CORS)

跨域 虽然有同源策略的存在,但是在js中跨域也依然很常见,有document.domain.window.name.图片ping.jsonp.CORS,在这里简单总结下图片ping.jsonp和CORS备忘. 图片ping 图片可以从任何URL中加载,所以将img的src设置成其他域的URL,即可以实现简单的跨域,可以使用onload和onerror事件来确定是否接受到了响应. var img=new Image(); img.src='http://www.jb51.net'; img.one

浅谈JQuery+ajax+jsonp 跨域访问

Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 一. 客户端 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&q

JS跨域交互(jQuery+php)之jsonp使用心得

什么是jsonp? 说到jsonp,你可能最先想到JSON:它还真和JSON有关系: JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产

JSONP解决JS跨域问题的实现

现代编程中前后端都已经是分开部署了,前端有自己的域,后端也有自己的域.由于浏览器同源策略的限制,非同源下的请求,就会产生跨域问题.解决跨域问题的方法有很多种,例如CORS(cross orign resources share)和JSONP.这里我就着重介绍一下jsonp的解决方案. 一:基础概念 同源策略:同一协议,同一域名,同一端口号.只要不满足三者其中一种都是属于跨域问题. 举几个简单的例子 1: https://www.a.com:8080到http://www.a.com:8080的请

详解js跨域请求的两种方式,支持post请求

JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { console.log(data); } }); 这个调用实际上

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

由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求. 那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理: 1.JavaScript    在原生js(没有jQuery和ajax支持)的情况下,通常客户端代码是这样的(我假设是在localhost:8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码): <scr

详解js跨域原理以及2种解决方案

1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议和端口号的组合. 例如: 2.实现原理 在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问. 例如: 这种访问方式是不行的.但是如下方式,

JS跨域请求的问题解析

同源策略 在运行中我们有时会出错是因为我们违反了同源策略,这是一种浏览器所实施的安全措施,用于限制具有不同来源的文档之间的交互.页面的来源由其协议,主机和端口号定义.具有相同来源的资源可以相互完全访问.但是如果具有不相同的源将会拒绝访问. http://www.a.com/a.js http://www.b.com/a.js 这两个之间就不可以互相访问,因为域名的不相同 域名组成 如果上面两个域名想互相访问就需要跨域请求,一般情况下同源政策规定:允许跨源 写入,而不允许跨源 读取这意味着同源政策

Ajax跨域问题及解决方案(jsonp,cors)

跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致  2:协议不一致  3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理:在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系:为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp . 代码如下: html: <body> <form action="/&q

JS跨域解决方案之使用CORS实现跨域

引言 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resour

js跨域调用WebService的简单实例

步骤1.   在web.config中的system.web节点里加入 <!--此节点可允许脚本跨域调用webservice--> <webServices> <protocols> <add name="HttpPost"/> <add name="HttpGet"/> </protocols> </webServices> <!--此节点可允许脚本跨域调用webservic

5种处理js跨域问题方法汇总

前两天碰到一个跨域问题的处理,使用jsonp可以解决.(http://www.jb51.net/article/57889.htm) 最近再整理了一下: 1.jsonp. ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在firefox