jsonp的跨域请求:
JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写。
JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成:回调函数(callback)和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
注意:
Jsonp是浏览器行为:(浏览器拦截不同域的json数据)
jsonp可以异步的下载内容,获取js中的内容。
Callback是jQuery中jsonp需要的参数,有jQuery提供。
前端html和js:
<div class="input-big js-tip" id="js-codeinput"> <label class="leftfont"><i class="fcred-3">*</i> 验证码</label> <input type="text" class="text w95" id="js-phoneCode" name="vcode" maxlength="4" placeholder="请输入验证码" data-vtype="must|fun" data-vfun="validVCode" data-vmsg="请输入验证码|验证码错误"> <a href="javascript:void(0);" id="js-phoneCodeImg" οnclick="$('img',this).attr('src', 'http://localhost:10000/code/getPicCode.action?v=' + (new Date()).getTime())"> <img src="http://localhost:10000/code/getPicCode.action" width="85" height="31"> </a> </div>
|
/* 获取手机号验证码 */ $("#js-phoneCodeBtn").click(function(){ //获取输入的手机号 var phonenum = $("#phone").val();
//需要判断手机号是否符合规范 $.ajax({ url:"http://localhost:10000/code/getPhoneCode.action", data:"phonenum"+phonenum, dataType:'jsonp', success:function(data){ alert(data); } });
//发起请求,传递手机号获取验证码的接口 //获取返回的数据
}); |
后台方法:
/** * 获取手机验证码 * */ @RequestMapping(value="/getPhoneCode",produces= {"text/plain;charset=utf-8"}) @ResponseBody public String getPhoneCode(String phonenum,String callback) { //创建验证码 ValidateCode validateCode = new ValidateCode(140, 40, 4, 20); String code = validateCode.getCode();//获取图片内容 //把验证码缓存 Jedis jedis = jedisInterface.getJedis(); jedisInterface.set(phonenum, code, jedis); jedisInterface.close(jedis); String result = callback==null? "验证码是"+code:callback+"('"+"验证码是"+code+"')"; return result;
} |
SONP目前还是比较流行的跨域方式,虽然JSONP使用起来方便,但是也存在一些问题:
首先, JSONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码,而此时除了完全放弃 JSONP 调用之外,没有办法追究。因此在使用不是你自己运维的 Web 服务时,一定得保证它安全可靠。
其次,要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给<script>元素新增了一个 onerror事件处理程序,但目前还没有得到任何浏览器支持。为此,开发人员不得不使用计时器检测指定时间内是否接收到了响应。