jsonp 全稱是JSON with Padding，是為了解決跨域請求資源而產生的解決方案。很多時候我們需要在客戶端獲取服務器數據進行操作，一般我們會使用ajax+webservice做此事，但是如果我們希望獲取的數據和當前頁面并不是一個域，著名的同源策略（不同域的客戶端腳本在沒明確授權的情況下，不能讀寫對方的資源）會因為安全原因決絕請求，也就是我們不能向其它域直接發送請求以獲取資源。
在localhot域上有一個books.php，里面包含腳本對test.com域的books.php發送get請求，希望獲取其book列表資源，這就是一個跨域請求資源
$.ajax({ type:'get', 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是為了解決這個問題出現的。
雖然有同源策略的限制，但是并不是HTML上所有資源都必須是同一個域的，我們常見的頁面為了節省流量或加載速度采用Google或微軟的 jQuery CDN，在頁面上我們可以這樣寫就可以引用jQuery了
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>iframe、img、style、script等元素的src屬性可以直接向不同域請求資源，jsonp正式利用script標簽跨域請求資源的
localhost的books.php希望獲得域test.com的books列表，在域test.com內book列表存儲在books.xml中
test.com/books.xml
<?xml version="1.0"?><books> <book name="JavaScript: The Defiitive Guide" publisher="O'Reilly Media, Inc."> <author>David Flanagan</author> </book> <book name="PHP anf MySQL Web Development" publisher="Perason Education"> <author>Luke Welling</author> <author>Laura Thomson</author> </book> <book name="HTTP: The Defiitive Guide" publisher="O'Reilly Media, Inc."> <author>David Courley</author> <author>Brian Totty</author> </book></books>
明顯JavaScript不能直接獲取books.xml，在test.com中需要有一個機制將xml轉化為json（這也就是為什么叫jsonp，其實和ajax一樣，返回的數據不一定是json格式，只是json很好用），并動態拼接一條javascript調用語句返回，這個例子中直接使用php頁面拼接
test.com/bookservice.php
<?php $path=$_SERVER["DOCUMENT_ROOT"].'/books.xml'; $json=json_encode(simplexml_load_file($path)); $callbackFn=$_GET['callback']; echo "$callbackFn($json);";?>
這樣首先把xml文件內容轉換成一個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
<!DOCTYPE html><html><head> <title>Books</title> <?php include('/components/headerinclude.php');?></head> <style type="text/css"> .book-title { font-size: 15px; font-weight:bold; margin-top:6px; } .book-info { color:#ccc; font-style:italic; border-bottom:dashed 1px #ccc; } </style></head><body> <div style="margin:20px;"> <div style="font-size:16px;font-weight:bold;">Books</div> <div id="books"> </div> </div></body></html>
我們希望在id為books的div中展示所有book，先添加一個用以顯示book的javascript函數，也就是獲取到數據后的回調函數，結合上面拼接的json格式可以這么寫
function displayBooks(books){ var books=books.book; var booksContainer=document.getElementById('books'); for(var i=0;i<books.length;i++){ var tmp=Array(); tmp.push('<div class="book-title">'+books[i]['@attributes'].name+'</div>'); tmp.push('<div class="book-info">'); tmp.push('<div>Publisher: '+books[i]['@attributes'].publisher+'</div>'); tmp.push('<div>Author(s): '); if(typeof books[i].author=='string'){ tmp.push(books[i].author); }else{ var authors=books[i].author; for(var j=0;j<authors.length;j++){ tmp.push(authors[j]+' '); } } tmp.push('</div>'); //end of author tmp.push('</div>'); //end of book info booksContainer.innerHTML+=tmp.join(''); } }
然后是關鍵的jsonp請求的方法了
function getBooks(){ var script=document.createElement('script'); script.setAttribute('type','text/javascript'); script.setAttribute('src','http://test.com/bookservice.php?callback=displayBooks'); document.body.appendChild(script); } getBooks();
在getbooks()方法中動態創建了一個script標簽，設置其src為test.com提供的獲取數據的service接口并傳入回調函數，這樣我們可以看看頁面的反應，在Chrome控制臺下可以看到這條請求
這樣我們就可以在localhost下獲取test.com的books了
在jquery中也有對jsonp的封裝，不過jquery把其放到了ajax中，不明白為什么，畢竟這東西和ajax不太一樣。寫一個jQuery版的
function getBooks(){ $.ajax({ type:'get', url:'http://test.com/bookservice.php', dataType:'jsonp', jsonp:'callback', jsonpCallback:'displayBooks' }); }
看起來完全一樣，不過方便了很多，不用自己創建script標簽神馬的了，指明dataType為jsonp，回調函數不放在url內了，而是使用兩個參數分別指明。
當然使用jsonp會在一定程度上造成安全性問題，如果請求的站點不是信任站點，那么可能會在返回的方法調用中包含一些惡意代碼。所以盡量向信任的站點發送請求。另外xss也經常會利用jsonp向站點注入惡意代碼。
