jQuery的jsonp跨域是这么回事.
实现跨域请求的有iframe,img,script中的src属性.
那么jquery是如何解决跨域请求的呢?
一:
项目jsonp2中有个app.js文件,代码如下:
function app(json){
alert(json['name']);
}
项目jsonp1中的index.html
<script type="text/javascript" src="http://127.0.0.1:8020/jsonp2/js/app.js"></script>
<script type="text/javascript">
app({'name':"guoyansi",'age':25});
</script>
执行结果:
这里的app方法并没有申明,怎么就能调用了呢?
这里的第一个script出现了跨域请求,src指向的是jsonp2中的app.js
而在app.js中申明了app方法.
我们现在在火狐中查看index.html的源码,点开app.js的script
结论:从外部引入的app.js最终会被加载到浏览器中,渲染成这样:
<script type="text/javascript">
function app(json){
alert(json['name']);
}
</script>
根据上面的结论
我们如果利用script跨域向后台发送一个请求,
我们在后端返回一段js代码,前端不就可以调用了吗?
现在我们来验证假设.
我们用java为例子:
新建javaweb项目并且新建一个servlet,
这个servlet返回一个js代码;
package servelt; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class Jsonp2 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text/javascript;charset=utf-8");//jsonp其实回写的就是一段javascript代码
//或者:response.setContentType("text/plain;charset=utf-8");
PrintWriter out = response.getWriter();
out.print("app({'name':'思思博士','age':'25'})");
out.flush();
out.close();
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
} }
新建另外一个项目并且新建一个index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function app(json){
console.log(json);
}
</script>
<script type="text/javascript" src="http://192.168.6.130:8080/jp/Jsonp2"></script>
</head>
<body> </body>
</html>
上面的第二个script直接执行了这个新的项目上的servlet.
并且最终被浏览器解析成如下格式:
<script type="text/javascript">
app({'name':'思思博士','age':'25'})
</script>
index.html最终的页面变成这个样子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function app(json){
console.log(json);
}
</script>
<script type="text/javascript">
app({'name':'思思博士','age':'25'})
</script>
</head>
<body> </body>
</html>
上面的代码我想大家都知道是怎么执行的了吧.
上面的代码返回的js代码的方法调用时时在服务器端写死的.我们也可以从客户顿指定要返回的反法调用名.
修改servlet:
package servelt; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class Jsonp2 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text/javascript;charset=utf-8");//jsonp其实回写的就是一段javascript代码
String appMethod=request.getParameter("appMethod");
PrintWriter out = response.getWriter();
out.print(appMethod+"({'name':'思思博士','age':'25'})");
out.flush();
out.close();
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
} }
在客户端指定要服务器要返回的js方法,添加appMethod参数,修改index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function app(json){
console.log(json);
}
</script>
<script type="text/javascript" src="http://192.168.6.130:8080/jp/Jsonp2?appMethod=app"></script>
</head>
<body> </body>
</html>
上面的例子都是返回一段可执行的js代码,来调用本地的方法.
我们对上面的例子进行封装.java代码保持不变.
(function($){
$.gys=function(opt){
var scriptCode=(new Date()).getTime();
//拼接script标签
var html="<";
html+="script id='script"+scriptCode+"' type='text/javascript' src='"+opt.src+"?"+opt.callbackName+"="+opt.callback+"'>";
html+="<";
html+"/script>";
//申明一个全局的方法变量供远程返回的js方法的调用,方法名有callback指定
window[opt.callback]=function(json){
opt.success(json);//调用当前参数的方法
$("#script"+scriptCode).remove();//删除script标签
}
$("head").append(html);//插入script标签
}
})(jQuery);
调用:
$(function(){
$.gys({
callbackName:"appMethod",
callback:"app",
src:"http://192.168.6.130:8080/jp/Jsonp2",
success:function(data){
console.log(data);
}
});
});
看到这个有没有觉得和jquery的jsonp有点像了啊.
我们现在看看jquery的jsonp.
jsonp其实用的就是上面的原理
我们看看jquery的jsonp用法.
$.ajax({
type:"get",//jsonp只能触发get请求
url:""//跨域url
dataType:"jsonp",
jsonp:"",//对应上面封装的callbackName
jsonpCallback:"",//对应上面封装的callback
data:{},//提交参数
beforeSend:function(){
//jsonp 方式此方法不被触发。原因是这里已经不是ajax事件了.
},
success:funciton(data){
//参数jsonpCallback的方法调用这里的success
},
error:function(){
//这里不是ajax了,所以这个方法也不会触发.
}
});
jquery中把jsonp和ajax整合在一起了具有一定的迷惑性,ajax是不具有跨域请求的,
另外jsonp使用的核心也不是ajax的xmlhttprequest,而是script的http请求(脚本注入的行为).
另外这样的jsonp是不具有post请求的.
$.getJSON()和$.getScript()都是jsonp的高级封装.
jQuery的jsonp跨域是这么回事.的更多相关文章
- 基于jQuery的Jsonp跨域[Get方式]
由于目前的项目需要无刷新的跨域操作数据,整理了下自己使用的基于jQuery的Jsonp跨域[Get方式]. 代码如下: Javascript部分 $(function(){ $.ajax({ asyn ...
- PHP 支持 JQuery 的 JSONP 跨域访问
Jquery Ajax进行跨域时需要使用JSONP,但JSONP格式和JSON格式是有区别的,如果直接返回JSON格式就会报错 首先将原有的Jquery代码中的dataType改成“jsonp”,具体 ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- 用jQuery实现jsonp跨域
跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应 ...
- JQuery+ajax+jsonp 跨域访问
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...
- php+ajax+jquery实现jsonp跨域
我们有这么个html文件test.html: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
- 33、JSONP跨域
跨域请求数据也是可以的,只不过Ajax这技术不行,而JSONP这种数据格式可以进行跨域.很多年前,浏览器是没有跨域限制的,可以正常跨域,浏览器为了安全和隐私限制了Ajax跨域 JSONP原理就是:将函 ...
- JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
随机推荐
- vs2010 clickone 工程安装后的路径 win7
C:\Users\xuan\AppData\Local\Apps\2.0\DX16T5JV.MLO\1H1ZAND1.1ZY\test..tion_f74974f651f2573b_0001.0000 ...
- 【Reporting Services 报表开发】— 表达式
一.常用的SSRS原始函数可以打开文本框的表达式中看到,如图1 图1 如下为SSRS中设计报表时常用的运算函数: 运算符/函数 说明 + 前后位数字则为加法,前后为字符串则为链接符号 - 数值减法 * ...
- [算法] 数据结构之AVL树
1 .基本概念 AVL树的复杂程度真是比二叉搜索树高了整整一个数量级——它的原理并不难弄懂,但要把它用代码实现出来还真的有点费脑筋.下面我们来看看: 1.1 AVL树是什么? AVL树本质上还是一棵 ...
- CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式 Med ...
- jquery导航动画
经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上. 效果如下图: 利用jquery的 animate 函数,很好实现.代码很简单! 代码如下: <!DOCTYP ...
- 【1-5】jQuery对象和DOM对象
1 jQuery对象转化为DOM对象: var $cr = $("#cr");//获得jQuery对象 var cr = $cr[0];//转化为DOM对象 或者:var cr = ...
- IntelliJ IDEA设置自动导入包
IntelliJ IDEA可以自动优化导入包,但是有多个同名的类位于不同的包时,需要自己手动使用Alt + Enter进行导入. Settings→Editor→General→Auto Import ...
- js setTimeout
setTimeout用法 //每个0.5秒钟改变字体和背景颜色,字体一闪一闪的效果 var flag = 0; function start(){ var text = document.getEle ...
- Perl 模块 Getopt::Std 和 Getopt::Long
示例程序: getopt.pl; 1 2 3 4 5 6 7 8 #!/usr/bin/perl -w #use strict; use Getopt::Std; use vars qw($opt_a ...
- Linux系统默认服务建议开启关闭说明列表
服务名称 功能简介 建议 acpid 电源管理接口.如果是笔记本用户建议开启,可以监听内核层的相关电源事件. 开启 anacron 系统的定时任务程序.cron的一个子系统,如果定时任务错过了执行时间 ...