<div id="wh8kw"><tr id="wh8kw"></tr></div>
          1. <div id="wh8kw"></div>

                      <dd id="wh8kw"></dd>

                    1. JSONP 教程

                      JSONP是一种使用模式,人们常常把JSONP和JSON混淆,他们虽然有关系,但是描述的不是一个事物,JSONP是JSON with Padding的简称。本篇会说明JSONP是一个什么?怎么是去使用。

                      通俗讲,JSONP 为解决跨域而诞生。是为了基于浏览器Web请求不通源之间的请求。

                      为了下面更好的讲解JSONP,先解释一下跨域。

                      具体讲,是解决不同源,被浏览器监管Javascript的安全限制。

                      • http://www.vshd.tw调用http://www.vshd.tw/json/是不会跨域的。
                      • http://www.vshd.tw 调用http://www.itboy.net/json/是跨域?#27169;?#22240;为不同域名。
                      • http://www.vshd.tw</code>&#35843;&#29992;<code>https://icp.sojson.com/search1_baidu.com.html 是跨域的。因为是不同二级域名。
                      • http://www.vshd.tw:8080调用http://www.vshd.tw:8081 是跨域的。因为是不同端口。
                      • http://www.vshd.tw调用http://www.vshd.tw 是跨域的。因为是不同请求协议,http和https。
                      • 188.188.188.20调用199.199.199.99 是跨域的。因为不同IP。
                      • localhost调用127.0.0.1 也是跨域的。其实他也是不同域名。

                      JSONP for Java (一)

                      前端代码,Javascript:

                      <script>
                          //jsonp回调方法,一定要写在jsonp请求前面
                          function callback(txt){
                              alert(txt);
                          }
                      </script>
                      <script src ="/demo/testJsonp.shtml" type="text/javascript" ></script>

                      后端代码,Java:

                      /**
                       * jsonp 测试
                       * @return
                       */
                      @RequestMapping(value="testJsonp",method=RequestMethod.GET)
                      @ResponseBody
                      public String testJsonp(){
                      	return "callback('test jsonp');";
                      }

                      前端会alert弹出的内容“test jsonp”

                      JSONP for Java ,自定义callback函数(二)

                      前端代码,Javascript:

                      <script>
                          //jsonp回调方法,一定要写在jsonp请求前面
                          function testjson(txt){
                              alert(txt);
                          }
                      </script>
                      <script src ="/demo/testJsonp.shtml?callback=testjson" type="text/javascript" ></script>

                      后端代码,Java:

                      /**
                       * jsonp 测试
                       * @return
                       */
                      @RequestMapping(value="testJsonp",method=RequestMethod.GET)
                      @ResponseBody
                      public String testJsonp(String callback){
                      	return callback +"('test jsonp');";
                      }

                      JSONP for Java ,jQuery Ajax请求

                      前端代码,Javascript:

                      <script>
                      var testjsonp = function(data){
                          for(var i in data){
                              alert( i +":" + data[i]);
                          };
                      }
                      var demoJSONP = function () {
                          //nowIp() 为获取当前的IP,这个函数是我自己的。
                         $.getScript("https://open.onebox.so.com/dataApi?type=ip&src=onebox&tpl=0&num=1&query=ip&url=ip&ip="+nowIp()+"&callback=testjsonp");
                      
                      }
                      </script>

                      这个接口您不要去尝试使用,因为它的数据来自百度而?#36873;?/p>

                      JSONP for PHP ,jQuery

                      PHP代码:

                      <?php
                          $data = ".......";
                          $callback = $_GET['callback'];
                          echo $callback.'('.json_encode($data).')';
                          exit;
                      ?>

                      前端代码,Javascript:

                      <script>
                      $.ajax({
                          type : "post",
                          url : "ajax.php",
                          dataType : "jsonp",
                          jsonp: "callback",//传递给请求处理程序或页面?#27169;?#29992;以获得jsonp回调函数名的参数名(默认为:callback)
                          jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
                          success : function(json){
                              alert('success');
                          },
                          error:function(){
                              alert('fail');
                          }
                      });
                      </script>
                      支付扫码

                      所有赞助/开支都讲公开明?#31119;?#29992;于网站维护:赞助名单查看

                      正在加载... ...

                      甘肃11选五基本走势图