JSONP实现Ajax跨域访问-强哥

发布时间:2014-10-22 13:49:40编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"JSONP实现Ajax跨域访问-强哥",主要涉及到JSONP实现Ajax跨域访问-强哥方面的内容,对于JSONP实现Ajax跨域访问-强哥感兴趣的同学可以参考一下。

JSONP实现Ajax跨域访问JSONP = JSON with padding,但JSONP和JSON不一样,它并不是一种数据格式。JSONP是一种JavaScript实现跨域cross-domain数据访问的方法。基于same originpolicy,浏览器要求javascript/ajax只能够进行同域数据请求,该安全原因的限制使得使用开放API的数据不是非常方便。例如:Site1提供API:http://site1.com/api/user.php,输出内容为JSON格式的数据: {"Name": "Min", "Id" : 1983,"Rank": 7}在site2.com/test.html使用javascript代码将无法获取site1提供的API的数据,因为是跨域的。JSONP利用HTML的<script>标签可获取任何来源JavaScript代码的特点,实现数据的跨域访问:site2.com/test.html的代码如下:<html><scripttype="text/javascript"> function jsonpCallback(result) { alert(result.Name); }</script><script type="text/javascript"src="http://site1.com/api/user.php?cb=jsonpCallback"></script></html>将site1.com/api/user.php的代码稍微进行修改,结果如下:<?php$data = '{"Name":"Min", "Id" : 1983, "Rank": 7}';if (isset($_REQUEST['cb'])) { print $_REQUEST['cb']."(".$data.")"; //相当于输出了jsonpCallback({"Name": "Min", "Id" :1983, "Rank": 7});} else { print $data;}?>这样当运行site2.com/test.html的时候,代码<scripttype="text/javascript" src="http://site1.com/api/user.php?cb=jsonpCallback"></script>的结果变为: <script type="text/javascript"> jsonpCallback({"Name": "Min", "Id" : 1983,"Rank": 7}); </script>然后调用本地定义的jsonpCallback函数,输出result.Name即为Min。最终实现跨域数据访问。因此总结JSONP的基本原理即是:在本地定义一个callback,通过<script>标签的src属性获取远程API的数据(将callback函数名传递过去),远程服务器的API需要符合JSONP的规范,即将原本JSON格式的输出数据改写为javascript的函数调用代码(callback为函数,原JSON数据为参数);这样API返回的不再是JSON格式的数据而是JavaScript的代码。 JSONP is script tag injection, passing the response from the server into a user specified function.[JSONP]使用实例:使用Flickr的API:<html><head> <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script></head><body></body><scripttype="text/javascript">function showPictures(pictures){ $.each(pictures.photos.photo,function(index, pic){ //{"id":"5953295109","owner":"[email protected]","secret":"b847e26995", "server":"6023","farm":7, "title":"DSC02569","ispublic":1, "isfriend":0, "isfamily":0,"url_s":"http:\/\/farm7.static.flickr.com\/6023\/5953295109_b847e26995_m.jpg","height_s":"160", "width_s":"240"} var path = pic.url_s; if (pic.url_o != undefined) { path = pic.url_o; } var img = "<a href='"+path+"'><imgsrc='"+pic.url_s+"' style='border: 0;'/>"; $('body').append(img); });}</script> <scripttype="text/javascript"src="http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&format=json&api_key=10ce77eec0bce44c7238e52cac7a1afa&extras=url_o,url_s&jsoncallback=showPictures"></script></html>使用jQuery.ajax提供的JSONP功能:jQuery的ajax实现了JSONP方法,具体实现原理是:jQuery attaches a globalfunction to the window object that is called when the script is injected, thenthe function is removed on completion.,参看如下实例: <html> <head> <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> </head> <body></body> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ url: "http://test.54min.com/jsonp.php", dataType: "jsonp", error: function(jqXHR, textStatus, errorThrown) { if (textStatus =="error") { alert(textStatus + " :" +errorThrown); } else { alert(textStatus); } }, success: function(data, textStatus, jqXHR) { alert(data.msg); } }); }); </script> </html>jsonp.php的代码如下: <?php echo $_GET['callback'] . "({'msg':'this is the remotemsg'});"; ?>当在$.ajax中设置dataType:"jsonp"的时候,jQuery会自动在url之后添加?callback=?,因此server端的API需要接受参数名为callback的值,且callback=?表示jQuery为该回调函数分配一个随机的唯一的名称。如果需要使用别的参数名而不是callback,可以设置jsonp选项;也可以使用jsonpCallback指定回调函数名。具体参看:http://api.jquery.com/jQuery.ajax/jQuery使用JSONP的简化方法:jQuery.getJSON(url, [data,][success(data, textStatus, jqXHR)])相当于: $.ajax({ url: url, dataType: 'json', data: data, success: callback });且$.getJSON规定如果url选项指定了诸如callback=?的字符串的话,会将其看作是JSONP方法,因此,简化使用如下: <html> <head> <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> </head> <body></body> <script type="text/javascript"> $(document).ready(function(){ $.getJSON("http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&format=json&api_key=10ce77eec0bce44c7238e52cac7a1afa&extras=url_o,url_s&jsoncallback=?",function(data, textStatus, jqXHR) { $.each(data.photos.photo, function(index, pic) { var path = pic.url_s; if (pic.url_o != undefined) { path = pic.url_o; } var img = "<ahref='"+path+"'><img src='"+pic.url_s+"'style='border: 0;'/>"; $('body').append(img); }); }); }); </script> </html> 原文地址:http://bbs.lampbrother.net/read-htm-tid-119371.html 管理员在2009年8月13日编辑了该文章文章。 --> --> 阅读(226) | 评论(0) | 转发(0) | 0 上一篇:Linux shell脚本检测方法-强哥 下一篇:PHP你可能不知道的几件事 相关热门文章 通讯录助手市场大战 触宝助手... C++ 将unsigned char数组 ... android实现多线程下载 qpid service 的root引发的权... 美国RT服务器租用仿牌网站不二... IP Sec VPN与NAT破镜重圆 网站导航 GoAgent图文设置教程 UT2.0正式版下载 tomcat6.0配置(含配置视频下载... 大家都是用什么来管理hadoop集... 网站被人挂了吗,添加了些程序... Nginx如何保证不走宕机的那个... 大家谈谈MYSQL客户端和服务器... 以下代码运行后为何会输出5?... 热门推荐 --> 给主人留下些什么吧!~~ 评论热议


上一篇:梦想的孵化园
下一篇:PHP你可能不知道的几件事

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款