jsonp原理及使用_javascript技巧

初識jsonp
jsonp 全名為JSON with Padding，是為了解決跨域請求資源而產生的解決方案。很多時候我們需要在客戶端取得伺服器資料進行操作，一般我們會使用ajax webservice做此事，但是如果我們希望取得的資料和目前頁面並不是一個網域，著名的同源策略（不同網域的客戶端腳本在沒明確授權的情況下，不能讀寫對方的資源）會因為安全性原因決絕請求，也就是我們不能直接向其它網域發送請求以取得資源。
在localhot域上有一個books.php，裡麵包含腳本對test.com域的books.php發送get請求，希望獲取其book列表資源，這就是一個跨域請求資源

複製程式碼 程式碼如下:

$.ajax({
      url: 'http://test.com/books.php'
        });

頁面會報一個這樣的錯誤：XMLHttpRequest cannot load http://test.com/books.php . Origin http://localhost is not allowed by Access-Control-Allow-Origin.jsonp是為了解決這個問題出現的。

jsonp原理
雖然有同源策略的限制，但是並不是HTML上所有資源都必須是同一個域的，我們常見的頁面為了節省流量或加載速度採用Google或微軟的jQuery CDN，在頁面上我們可以這樣寫就可以引用jQuery了

複製程式碼 程式碼如下:

程式碼如下:

程式碼如下:

iframe、img、style、script等元素的src屬性可以直接向不同域請求資源，jsonp正式利用script標籤跨域請求資源的

簡單實作localhost的books.php希望取得網域test.com的books列表，在網域test.com內book列表儲存在books.xml中test.com/ books.xml

複製程式碼


程式碼如下:




   
       
   
        Luke Welling
     Luke Welling
    

   
        David ley
   

明顯JavaScript不能直接取得books.xml，在test.com中需要有一個機制將xml轉換為json （這也就是為什麼叫jsonp，其實和ajax一樣，返回的資料不一定是json格式，只是json很好用），並動態拼接一條javascript調用語句返回，這個例子中直接使用php頁面拼接test .com/bookservice.php

複製程式碼


程式碼如下:

程式碼如下:

    $json=json_encode(simplexml_load_file($path));

    $callbackFn=$_GET['callback'];    echo "$callbackFn($json);";?>這樣換個​​文件內容>一個json物件

複製程式碼 程式碼如下:

{"book":[
{"@attributes":{"name":"JavaScript: The Defiitive Guide","publisher":"O'Reilly Media, Inc."}," author":"David Flanagan"},
{"@attributes":{"name":"PHP anf MySQL Web Development","publisher":"Perason Education"},"author":["Luke Welling" ,"Laura Thomson"]},
{"@attributes":{"name":"HTTP: The Defiitive Guide","publisher":"O'Reilly Media, Inc."},"author":[ "David Courley","Brian Totty"]}
]}

然後拼接為一條javascript語句交給localhost去處理，當然test.com並不知道應該拼接的方法名叫什麼，需要localhost在發送請求的時候在url中傳入一個叫callback（這個也隨便，兩邊同步就行）的參數指明。看看localhost怎麼發送請求吧
localhost/books.php

複製代碼 代碼如下:

   
   
   


   

       

; Books

       

       

       

   

我們希望在id為books的div中展示所有book，先加入一個用以顯示book的javascript函數，也就是取得到資料後的回呼函數，結合上面拼接的json格式可以這麼寫




複製程式碼

程式碼如下:

function displayBooks(books){
            var books=books.book;
   .            for(var i=0;i                var tmp=Array();
      '].name ' div>');
                        地   ' ].publisher '

');
                tmp.push('

作者: ');
   🎜>                    tmp .push(books[i].author);
                }else{
                        for(var j=0; j                        tmp.push(authors[j] ' ');                tmp.push(' div>'); //作者結束
                tmp.push('

'); // 書籍資訊結束
               >
然後就是關鍵的jsonp請求的方法了




複製程式碼


程式碼如下：

function getBooks(){

 script');            script.setAttribute('type','text/javascript');       );            document.body.appendChild(script);        }         getBooks();

在getbooks()方法中動態建立了一個腳本標籤，設定其src為test.com提供取得資料的服務介面並呼叫回呼函數，這樣我們就可以設定其src為test.com提供取得資料的服務介面並呼叫回呼函數，這樣我們就可以看看頁面的反應，在Chrome控制台下可以看到一條請求




我們就可以在localhost下獲取test.com的書了

jquery實現
在jquery中也有對jsonp的封裝，不過jquery把它放到了ajax中，不明白為什麼，畢竟這東西和ajax都不是同樣。

function getBooks(){
            $.ajax({
             url:'http://test.com/bookservice.php',
dataType:'jsonp',
                jsonp:'callback',
            });
        }


看起來完全一樣，但方便了很多，不用自己建立script標籤神馬的了，指明dataType為jsonp，回呼函數不放在url內了，而是用兩個參數分別指明。

安全性問題

當然使用jsonp會在一定程度上造成安全性問題，如果請求的站點不是新人站點，那麼可能會在返回的方法調用中包含一些惡意代碼。所以盡量向信任的網站發送請求。另外xss也常會利用jsonp向網站注入惡意程式碼。