02-jsonp学习

本文详细解释了JSONP的作用,原理以及如何在JavaScript中实现跨域数据获取。包括使用本地函数测试远程js调用、服务端接口实现、以及jQuery的封装方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


1.jsonp作用

解决通过ajax的形式去调用其他网站的接口不行的缺陷

例如: 

Js代码  收藏代码
  1. $.ajax({  
  2.   url: "http://www.google.com/search?q=jquery",  
  3.   success: function(json){  
  4.     alert(json.count)  
  5.   }  
  6. });  

2.jsonp原理

   从别的网站引入js代码是可行的

例如:

本地html引入外部网站的js

<script type="text/javascript" src="http://www.xukaiqiang.com/remote.js"></script>

remote.js文件中的内容为:alert("I'm a remote file!");

运行index01.html可以看到弹出了 I'm a remote file!

说明js文件可以跨域调用!


3.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>远程js调用本地函数测试</title>
<!-- 
	远程js文件内容
	localHandler({"result":"I'm remote data!"});
	引入远程的JS文件,会自动调用localHandler方法
 -->
<script type="text/javascript">
	var localHandler = function(data) {
		alert('Im local js method,called by remote js ,return data is":"' + data.result);
	};
</script>
<script type="text/javascript" src="http://www.xukaiqiang.com/remote.js"></script>
</head>
<body>

</body>
</html>

如上代码,远程js中写了

localHandler({"result":"I'm remote data!"});
引入到本地就会执行localHandler方法。

这样就实现了跨域并获取数据的目的!



所以服务商在提供接口的时候可以这样写:


protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {  
//获取JSON数据  
String jsonData = getDataAsJson(req.getParameter("symbol"));  
//<strong><span style="color:#ff0000;">获取回调函数名</span></strong>  
String callback = req.getParameter("callback");  
//<strong><span style="color:#ff0000;">拼接动态JS代码</span></strong>  
String output = callback + "(" + jsonData + ");  
resp.setContentType("text/javascript");  
PrintWriter out = resp.getWriter();   
out.println(output);      
// <strong><span style="color:#ff0000;">输出为 jsonpFunc({"symbol" : "IBM", "price" : "91.42"}); </span></strong> 
}  


假设这个JSONP服务的URL为http://www.google.com/jsonp,回调的函数名为jsonpFunc,那么可以这样发送JSONP请求:


  1. <
    script type="text/javascript"   
  2. src="http://www.google.com/jsonp&company=IBM&callback=jsonpFunc"></script>  

4.使用JQuery的封装进行实现

1.第一种

jQuery.getJSON(  
"http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?",   
function(data) {  
    alert("Symbol: " + data.symbol + ", Price: " + data.price);  
}  
);  
其中回调函数名”callback”为”?”,即不需要用户指定,而是由jquery生成,互调函数也不需要单独定义,而是以参数的形式紧接在URL之后,URL中还可以附带供数据查询用的其他参数,如上例中的”symbol=IBM” 


2.第二种

$(function() {
		$.ajax({
			url : 'http://wx.lrcyz.com/api/article/query.html',
			data : {
				id : 1,
				name : 'qq'
			},
			dataType : 'jsonp',
			jsonpCallback : 'jsonObject', //服务器封装的方法  形如:jsonObject(data,data,data);
			success : function(data) {
				console.log("成功")
				console.log(data)
				if (data.list) {
					var l = data.list;
					for (var i = 0; i < l.length; i++) {
						var obj = l[i];
						$('.test').append("<div> " + obj.id + " </div>")
					}

				}
				//$("#id").append("<div> 1 </div>")
			},

			error : function(data) {
				console.log(data)
			}

		});

	});


3.第三种

jQuery(document).ready(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
             },
             error: function(){
                 alert('fail');
             }
         });
     });


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Muxiyale

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值