跨域jsonp應用及原理

項目開發中，由於先後端數據分離，因此要用ajax進行數據請求，直接請求後端人員電腦接口，會出現跨域問題。最後用到jsonp對這方面進行處理，下面是個人一些理解。

應用

　　後端返回數據格式：

callBack({
    "base": "http://www.baidu.com",
    "name": "baidu"
});

　　

　　前端調用：

　　

    <script type="text/javascript">
       function callBack(data){
         var base=data.base;
       }
     </script>
     <script type="text/javascript" src="http://localhost:8080/one/data.js"></script>

 

　　或者用jQuery的調用方法：

    $.ajax({
      type:"post",
      url:"http://localhost:8080/one/data.js",
      dataType:"jsonp",
      jsonpCallback:"callBack", //和後臺方法名保持一致
      success:function(data){
         var base=data.base;
      }
    });

 

原理

　　因同源策略限制，ajax不能直接請求其它域的數據，而後網頁是能夠直接請求其它域的js文件的（還要樣式文件，圖片等），因此用script引入的方法能夠避開跨域的問題從而加載到須要數據。

　　通常服務器返回的json數據以下：

{
    "base": "http://www.baidu.com",
    "name": "baidu"
}

　　那咱們來看下面一段代碼：

<script type="text/javascript">
  //定義方法
  function callBack(data){
    var base=data.base;
  }
  //調用方法
  callBack({
      "base": "http://www.baidu.com",
      "name": "baidu"
  });
</script>

 

　從上面能夠看出若是咱們把調用方法這塊放在服務器，並把要傳的數據做參數傳入，在前端用script方式引用就能獲取數據了。

　　因此後端服務器數據返回模式（這裏用js文件代替）：data.js

callBack({
    "base": "http://www.baidu.com",
    "name": "badu"
});

　　前端引用代碼：

　　jquery的ajax方法中有集成jsonp用法，以下：

 

　　也就是dataType參數值變成"jsonp"，添加jsonpCallback參數，參數的值就是後臺服務器引用的方法名。到這裏，你們都知道jsonp的用法和原理了吧。