<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/是跨域的,因為不同域名。
                      • http://www.vshd.tw調用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){
                          $.each(data.data,function () {
                              alert("時間:" + this.time +",內容:" + this.info);
                          });
                      }
                      var demoJSONP = function () {
                          $.getScript("http://www.vshd.tw/open/api/kuaidi/get.shtml?orderNo=887180351164743887&callback=testjsonp");
                      }
                      </script>

                      這個接口您不要去嘗試使用,因為它的數據來自百度而已。

                      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",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(默認為:callback)
                          jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名
                          success : function(json){
                              alert('success');
                          },
                          error:function(){
                              alert('fail');
                          }
                      });
                      </script>
                      支付掃碼

                      所有贊助/開支都講公開明細,用于網站維護:贊助名單查看

                      正在加載... ...

                      甘肃11选五基本走势图