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引导程序
Oct 26 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
原生js实现下拉选项卡
Nov 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 stream_context_create()作用和用法分析
2011/03/29 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
一些mootools的学习资源
2010/02/07 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
在Django框架中运行Python应用全攻略
2015/07/17 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
Jdbc数据访问技术面试题
2012/03/30 面试题
Ruby如何定义一个类
2012/10/08 面试题
教师业务学习制度
2014/01/25 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
公司年底活动方案
2014/08/17 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
Golang实现可重入锁的示例代码
2022/05/25 Golang