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