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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
angular *Ngif else用法详解
Dec 15 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安全技术之 实现php基本安全
2010/09/04 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
在Python中使用模块的教程
2015/04/27 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python实现图片上添加图片
2019/11/26 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
全球精选男装和家居用品:Article
2020/04/13 全球购物
PHP面试题及答案一
2012/06/18 面试题
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
个人找工作自荐信格式
2013/09/21 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
高三英语教学反思
2014/01/13 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
Python基础详解之描述符
2021/04/28 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
MySQL之select、distinct、limit的使用
2021/11/11 MySQL