JSONP的跨域请求

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" onclick="$('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事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。