JSON和JSONP
JSONP和JSON好像啊,他們之間有什么聯系嗎?
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。對于JSON大家應該是很了解了吧,不是很清楚的朋友可以去json.org上了解下,簡單易懂。
JSONP是JSON with Padding的略稱。它是一個非官方的協議,它允許在服務器端集成Script tags返回至客戶端,通過javascript callback的形式實現跨域訪問(這僅僅是JSONP簡單的實現形式)。
JSONP就像是JSON+Padding一樣(Padding這里我們理解為填充), 我們先看下面的小例子然后再詳細介紹。
同源策略
為什么會出這樣的錯誤呢?這是因為所有支持Javascript的瀏覽器都會使用同源策略這個安全策略??纯窗俣鹊慕忉專?/p>
同源策略,它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指,域名,協議,端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當一個百度瀏覽器執行一個腳本的時候會檢查這個腳本是屬于哪個頁面的,即檢查是否同源,只有和百度同源的腳本才會被執行。
這就是引起為何取不到數據的原因了,那如何才能解決跨域的問題呢?沒錯,我們現在可以進入正題,來了解下什么是JSONP了。
跨域的簡單原理
光看定義還不是很明白,那首先我們先來手動做個簡單易懂的小測試。新建一個asp.net的web程序,添加sample.html網頁和一個test.js文件,代碼如下:
sample.html的代碼:
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml" > <head> <title>test</title> <script type="text/javascript" src="test.js"></script> </head> <body> </body> </html>
test.js的代碼:
alert("success");
打開sample.html后會跳出"success”這樣的這樣的信息框,這似乎并不能說明什么, 跨域問題到底怎么解決呢?好,現在我們模擬下非同源的環境,剛才我們不是已經用Visual Studio新建了一個Web程序嗎(這里我們叫A程序),現在我們再打開一個新的Visual Studio再新建一個Web程序(B程序),將我們的之前的test.js文件從A程序中移除然后拷貝到B程序中。兩個程序都運行起來后,Visual Studio會啟動內置服務器,假設A程序是localhost:20001,B程序是localhost:20002,這就模擬了一個非同源的環境了(雖然域名相同但端口號不同,所以是非同源的)。
OK,我們接下來應該改下sample.html里的代碼,因為test.js文件在B程序上了,url也就變成了localhost:20002。
新聞熱點
疑難解答
圖片精選