我要评论1. jsonp定义
jsonp是英文json with padding的缩写，是一个非官方的协议。它允许在服务器端生成script tags返回至客户端，通过javascript callback的形式来实现站点访问。 jsonp是一种script tag的注入，将server返回的response添加到页面实现特定功能。
2.jsonp由来
要解释jsonp的来由，先要说一下浏览器的“同源策略(sop:same origin policy)”。 简而言之，就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成a站点的ajax代码无法访问b站点的数据。
如何解决跨域访问呢？那就要借助浏览器的一个特性：尽管浏览器不允许页面中的脚本程序跨域读取数据，但却允许html引用跨域的资源，如图片，css和脚本程序。对于脚本程序的引用比较特殊，它被浏览器解析以后，就和本地的脚本程序别无二致且可立即进行解释并执行。如在b站点的一个js文件，一个简单的提示框：alert（“this is victor！”）;。在a站点引用这个js，这个脚本就会在b站点的应用中执行，显示一个alert信息。由于站外脚本的引用是通过script tag来实现的，而脚本程序又可通过dom的方式可以对html页面的所有标签进行控制（包括动态的创建script标签），这就可以实现通过调用站外程序对本地资源进行更改了。另外，通过<script> 标记的使用，就可从服务端直接返回可执行的javascript函数调用或者json数据。
3. jsonp原理与实现
首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json数据。然后以javascript 语法的方式，生成一个function, function名字就是传递上来的参数jsonp.
然后，将json数据直接以入参的方式，放置到function中，这样就生成了一段 js 语法的文档，返回给客户端。
最后，在客户端浏览器中解析script标签，并执行返回的javascript文档，此时数据作为参数，传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。
具体代码操作：
1，js代码
$.ajax({
url: 'http://192.168.3.49:8080/portal/authcode',
type: 'post',
datatype:'jsonp',
jsonp: "callback",
data: {
"type":'0',
"mobilephone": $("#tel").val()
},
success:function(data){
alert(data.ret)
settime(obj);
},
error:function(data){
$('#mstr_ck').html("获取验证码失败，请重试！");
$("#error_ck").show();
}
});
2，java代码
@requestmapping(value = "authcode")
@responsebody
public string getmobileauthcode( httpservletrequest request, string callback)
throws exception {
string result = "{'ret':'true'}";
//加上返回参数
result=callback+"("+result+")";
return result;
}
如上：前端调用结果弹出：alert('true')
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论