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 相关文章推荐
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
javascript实现点击产生随机图形
Jan 25 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登录环节防止sql注入的方法浅析
2014/06/30 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP实现的日历功能示例
2018/09/01 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python 调用Java实例详解
2017/06/02 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
《雨点》教学反思
2014/02/12 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
社会工作专业自荐信
2014/09/26 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
如何基于python实现单目三维重建详解
2022/06/25 Python