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 相关文章推荐
js 上传图片预览问题
Dec 06 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
RequireJS使用注意细节
May 15 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
如何使JavaScript休眠或等待
Apr 27 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
PHP print类函数使用总结
2010/06/25 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
js字符编码函数区别分析
2011/12/28 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python有序字典简单实现方法示例
2017/09/28 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
Python requests模块实例用法
2019/02/11 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
工会工作先进事迹
2014/08/18 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang