js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)


Posted in Javascript onDecember 27, 2012

很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家。

什么是JSONP协议?
JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。
很明显,JSONP是一种脚本注入(Script Injection)行为,需要特别注意其安全性。

Jquery中的jsonp实例
我们需要两个页面,分别承担协议的客户端和服务器端角色。

客户端代码

<!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>jsonp测试例子</title> 
<script type="text/javascript" src="http://www.xxxxxxxxxxxx.cn/js/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$.ajax({ 
type: "get", 
async: false, 
url: "http://www.xxxxxxxxxxxx.cn/demos/jsonp.php", 
dataType: "jsonp", 
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) 
jsonpCallback:"feedBackState",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 
success: function(data){ 
var $ul = $("<ul></ul>"); 
$.each(data,function(i,v){ 
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul) 
}); 
$("#remote").append($ul); 
}, 
error: function(){ 
alert('fail'); 
} 
}); 
}); 
</script> 
</head> 
<body> 
远程数据如下:<br/> 
<div id="remote"></div> 
</body> 
</html>

服务端代码(本例采用PHP)
<?php 
$jsonp = $_REQUEST["callback"]; 
$str = '[{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]'; 
$str = $jsonp . "(" .$str.")"; 
echo $str; 
?>

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码) 
Jsonp的原理和简单实例
jquery是对其进行了封装,你可能看不到真正的实现方法,我们用下面的一个例子进行说明:
客户端代码:
<!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" > 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<title>jsonp测试例子</title> 
<script type="text/javascript" src="http://www.xxxxxxxxxxxx.cn/js/jquery.min.js"></script> 
<script type="text/javascript"> 
function CallJSONPServer(url){ // 调用JSONP服务器,url为请求服务器地址 
var oldScript =document.getElementById(url); // 如果页面中注册了调用的服务器,则重新调用 
if(oldScript){ 
oldScript.setAttribute("src",url); 
return; 
} 
var script =document.createElement("script"); // 如果未注册该服务器,则注册并请求之 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("src",url); 
script.setAttribute("id", url); 
document.body.appendChild(script); 
} 
function OnJSONPServerResponse(data){ 
var $ul = $("<ul></ul>"); 
$.each(data,function(i,v){ 
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul) 
}); 
$("#remote").append($ul); 
} 
</script> 
</head> 
<body> 
<input type="button" value="点击获取远程数据" onclick="CallJSONPServer('http://www.xxxxxxxxxxxx.cn/demos/jsonp_original.php')" /> 
<div id="remote"></div> 
</body> 
</html>

服务端代码
<?php 
$str = '[{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]'; 
$str = "OnJSONPServerResponse(" .$str.")"; 
echo $str; 
?>

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码) 
别的不多说,相信看代码大家应该明白它是怎么实现的了。
需要注意
1.由于 jquery 在ajax 处理中使用的是utf-8编码传递参数的,所以jsonp处理端用utf-8的编码最好,这样省得编码转换了,如果不是utf-8记得转换,否则中文会乱码。
2.请求的服务端url最好不要写成http://www.xxxxxxxxxxxx.cn/?act=add这样的,应写全其为:http://www.xxxxxxxxxxxx.cn/index.php?act=add这样的,在应用的过程中出现了不兼容的情况。
到此就ok了,如有朋友碰到什么问题可发上来大家共同交流。
欢迎大家转载,转载请注明原创 包括链接一定要加上,否则...此处略去n个字
签名:共同交流,共同学习,帮助需要帮助的人,共同走向成功之路。
Javascript 相关文章推荐
javascript this用法小结
Dec 19 Javascript
jQuery 使用手册(四)
Sep 23 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 #Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 #Javascript
ie支持function.bind()方法实现代码
Dec 27 #Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 #Javascript
多个js与css文件的合并方法详细说明
Dec 26 #Javascript
JS打开图片另存为对话框实现代码
Dec 26 #Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 #Javascript
You might like
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
jQuery遮罩层实例讲解
2017/05/11 jQuery
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
layui表格设计以及数据初始化详解
2019/10/26 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
Python装饰器用法实例总结
2018/05/26 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
天猫活动策划方案
2014/08/21 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
三年级作文之趣事作文
2019/11/04 职场文书