【PhoneGAP學習】Android PhoneGap框架(2)--重要知識點的預先學習 (jsonp)

關於JSONP 

PhoneGAP中沒有直接使用jsonp,本地代碼同源請求的時候使用的是XHR,而需要跨域訪問的時候則需要用JSONP,這個是需要開發者自己去實現網頁跨域操作。

JSONP是什麼,與JSON什麼關係?

JSON: 

基於文本的數據描述格式,和XML一樣在Web 應用數據傳遞保存具有相同重要的地位大放異彩,JSON主要是服務於Javascirpt,這正好XML在Javascript中進行解析的複雜提供了強大的候補。JSON格式可以表示字符串,NUMBER,BOOLEAN, 數組,以及MAP,其中每個元素之間KEY:VALUE用”,”分割,數組用[]表示,MAP用{key:Value}表示。

如下的關於people的Json數據格式:

{
"people":[
{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
{"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
{"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
]
}
該people的KEY值對應的是一個3元素的數組,每個元素是一個OBJECT,沒個OBJECT都有3個元素組成,KEY分別是firstName,lastName,email.

這種輕量級的數據經常被用來JAVASCRIPT內部或者與本地代碼進行數據交互的格式。雙方只要知道其中的數據結構將很方便的獲得KEY所對應的值。

其實在Andriod裏面所用到的JSONObject通過Iterator就可以如解析XML一樣進行遍歷,得到該數據結構的KEY和VALUE的數據。


JSONP:

JSONP不是數據格式,而是對JSON的一種使用模式。可以利用ajax用於跨域進行數據傳輸。而JSONP的跨域是利用HTML裏面的元素進行對其他域的請求而實現的。

衆所周知,<script>、<iframe>標籤裏src屬性可以請求其他域的js或者asp的,
所以JSONP就是利用script 訪問其他域(自己域也可)的請求request,得到反饋response的過程。

(這位 博主將JSONP分析的很清楚,可以參考一下。)

如果要理解這個概念,首先拋棄JQUERY和AJAX的弄得一頭霧水的使用方法,
用硬代碼實現該JSONP的跨域。

客戶端代碼:

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<script type="text/javascript">
	 function callback(option) {
		alert(option.result);
	 }	
	</script>
    <script type="text/javascript" src="http://192.168.23.1/jsonpTest/test2.js"></script>

</head>
<body>
</body>
</html>
服務端代碼:

test2.js

callback({result:"the file is from server"});
其中客戶端function callback一定要放在<script src=>前面,否則,當加載test2.js的時候,找不到callback方法的異常。

得到的結果是這樣的:



所以爲了避免寫硬代碼,ajax採用了將callback方法名稱傳到服務器端的做法,這樣就可以做到通用性和靈活性了。

如果使用ajax訪問的話,就不能直接寫test2.js的代碼了,將回調函數作爲參數傳過去後,需要在服務端將方法名和需要傳遞的參數以JSON的格式如test.js代碼的內容的樣子拼湊起來,服務器端可以用servlet或者asp寫resonse。

客戶端用JQUERY訪問的話就如同:

  $.ajax({
        url: 'http://192.168.23.1/jsonpTest/jsonpServlet',
        dataType: "jsonp",
        jsonp: "callback",
        success: function (data) {
            alert(option.result);
        }
    })
其中url的話就是服務端地址,jquery很聰明的將jsonp的callback+內部定義的ID值一起作爲回調函數名,
servlet中將paramter的回調函數名這個KEY值獲取後,拼湊成下面的數據,
回調函數名({result:"the file is from server"});
成功回調的情況下設置給response,就如同執行了test2.js一樣。callback+內部定義的ID值的回調函數名回調後,

如果成功在jquery就執行sucess方法,因此就可以從服務器獲取相應的回調了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章