JSONP

      最近項目中用到了JSONP,提及來也會用,至少完成了我想要的功能,可是呢,當朋友忽然問起我:哎,JSONP是什麼啊,表示竟無從提及,忽然就詞窮了。javascript

      首先從同源策略提及,基於安全緣由,瀏覽器存在同源策略機制,同源策略阻止從一個源加載的文檔或腳本獲取或設置另外一個源加載的文檔的屬性。html

     script標籤時具有跨域的能力的,利用script標籤的跨域能力,就是jsonp的基礎。前端

     JSONP的基本思想實現:網頁經過添加一個<script>元素,向服務器請求JSON數據,不受同源政策限制,服務器收到請求,將數據放在一個指定名字的回調函數中傳遞java

回來。 當經過<script>元素調用數據,相應內容必須用javascript函數名和圓括號包裹。web

     JSONP由兩部分構成:回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字通常是在請求中指定的。數據就是傳入回調函數中的ajax

數據。json

     JSONP是經過動態<script>元素來使用的,使用時能夠爲src屬性指定一個跨域URL,這裏的<script>元素與<img>元素相似,都有能力不受限制地從其餘域加載資源,segmentfault

由於JSONP是有效的js代碼,在請求完成後,即在JSONP相應加載到頁面中後,會馬上執行。跨域

     function handleResponse(response){瀏覽器

       console.log(response);

    }

    var script=document.createElement('script');

    script.src="http://freegeoip.net/json/?callback=handLeResponse";

    document.body.insertBefore(script,document.body.firstChild);

     JSONP簡單易用,老式瀏覽器所有支持,服務器改造很小,能直接訪問相應文本,支持在瀏覽器與服務器之間雙向通訊。

     使用<script>元素進行ajax傳輸,不受同源策略的影響,所以可使用它們從其餘的服務器請求數據,並且,包含JSON

編碼數據的相應體會自動解碼(即執行)。

    不足:JSONP是從其餘域中加載代碼執行,若是其餘域不安全,可能或在響應中夾帶一些惡意代碼,所以不是在本身運維

的web服務時,必定要保證安全可靠。

     其次,要肯定JSON請求是否請求失敗並不容易,目前使用計時器檢測指定時間內是否接受到了響應。

     兩點問題-->  

       1. JSONP是須要動態建立script標籤的,是否須要處理這些script元素。

       2. JSONP請求的時候,服務器發生錯誤怎麼辦,前端怎樣處理這個錯誤。

     關於1--> jsonp動態建立的節點是須要刪除的,主要處理方法有兩種:

        (1) onload/complete時,刪除節點,例如JQuery

        (2)暫不刪除節點,積累到必定數目時才刪除,好比yui。

      jsonp建立script節點後,一般會掛上onload,onreadystatechange,onerror 等事件。

      當刪除script標籤時,元素的屬性仍是能夠獲取到的。要回收這段js能夠手動清除script元素全部屬性:

     var jsonp=document.getElementById('myJson');//取得script元素

      for(var prop in jsonp){
         delete jsonp[prop];

     }

    關於2:設定一段延時,超過設定時間無響應則進行超時處理。

 

     

  來源:http://www.cnblogs.com/xiaohuochai/p/6568039.html

          https://segmentfault.com/q/1010000000483131             

相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息