首页 > 网站 > WEB开发 > 正文

对jsonp的callback的猜测

2024-04-27 15:14:25
字体:
来源:转载
供稿:网友

jquery jsonp的请求数据:

$.Ajax({		dataType : "JSONP",		jsonp : "callback",//请求自动带上callback参数,callback值为jsonpCallback的值  		jsonpCallback : "test1",//接口服务器应该返回字符串数据格式:test1(JSON数据)  		type : "POST",		url : "http://www.xiuye.com/josnp.do",//接口服务器地址  		data : {		/* user : "xiuye" */		},//请求数据  		success : function(response) {			//成功执行  			console.log(response);			//alert("jsonp OK");		},		error : function(e) {			//失败执行  			alert(e.status + ',' + e.statusText);		}	});服务器端传回的数据实际上是字符串:

test1(json数据)浏览器得到 : json数据

这个过程中callback的test1是什么?

test1可能是个函数,函数定义是用eval定义的:

eval("function " + callback + "{...}");注:

callback = "test1"然后test1的函数就定义成功了

==================跨域请求==================

标签script的src属性可以请求任何地址.

jsonp:

先动态的定义新的callback函数test1

eval("function test1{...}");

请求数据

<script src="http://www.xiuye.com/josnp.do?callback=test1"></script>server得到callback的参数,返回字符串:

"test1(json数据)"浏览器的script得到数据后就执行js代码:

test1(json数据)这样json数据就可以通过全局变量或者其他方式拿到手了.

动手实践:

前端js代码:

<script type="text/javascript" src="js/jquery-2.1.4.js"></script><script type="text/Javascript">	var a = null;	function test(callback) {		console.log("execute test ...");		window.eval("function " + callback + "(data){a = data;alert('jsonp callback 函数已经执行了!')}");		var s = document.createElement("script");		s.src = "http://www.xiuye.com/josnp.do?callback=" + callback + "&_="				+ Math.random();				document.body.appendChild(s);				console.log(s);	}	$(function(){		test("test1");		console.log("global a = " + a);	});</script>服务器java代码返回json数据(用了jsonp框架才出现下面的样子,直接返回数据):
public String test1(){		return "{msg : 'json no parameter'}";	}结果:


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表