13-3jQuery的Ajax技术.ppt

第13章 通訊與網路 13-1 檢查網路狀態 13-2 打電話與傳簡訊 13-3 jQuery的Ajax技術 13-4 RESTful API與JSON 13-5 應用實例：台北市政府公開資料平台 13-1 檢查網路狀態-Connection API 因為行動裝置的網路可能因為訊號收不到或微弱造成連線中斷，換句話說，行動裝置不同於桌上型電腦，可以保證網路連線一定存在，我們需要檢查網路狀態來了解目前是否在連線中，而且是使用哪一種方式來連線，如下所示： var networkState = work.connection.type; 程式碼使用connection物件的type屬性取得目前網路連線類型，其值是Connection物件常數UNKNOWN、ETHERNET、WIFI、CELL_2G、CELL_4G等。 type屬性值Connection.NONE表示目前沒有網路連線，所以，我們可以使用if條件來檢查連線狀態，如下所示： if (networkState == Connection.NONE) { // 沒有連線 } 13-1 檢查網路狀態-網路狀態事件(說明) PhoneGap在0.9.6版開始新增網路狀態事件online和offline，其說明如下表所示： 13-1 檢查網路狀態-網路狀態事件(範例) PhoneGap程式註冊online和offline的程式碼，如下所示： function onDeviceReady() { document.addEventListener(offline, onOffline, false); document.addEventListener(online, onOnline, false); } function onOffline() { // 處理offline事件 } function onOnline() { // 處理online事件 } 13-1 檢查網路狀態-網路狀態事件(圖例) 13-2 打電話與傳簡訊-說明 雖然我們建立的jQuery Mobile網頁就是一頁HTML5網頁，不過，我們仍然可以整合電話功能，也就是在a標籤的href屬性使用URI Schemes通訊協定來打電話、傳簡訊和寄送電子郵件。 13-2 打電話與傳簡訊-打電話 在jQuery Mobile網頁超連結可以使用【tel:】通訊協定來打電話，其語法如下所示： tel:電話號碼 語法的URI Scheme可以指定撥號的電話號碼（源於日本的i-Mode標準），如下所示： a href=tel:0223963257 data-role=button旗標客服/a 「:」符號後是撥號的電話號碼，不過，它並不能直接打電話，而是啟動行動裝置內建撥號程式來顯示我們設定的電話號碼。 13-2 打電話與傳簡訊-傳簡訊 在jQuery Mobile網頁超連結可以使用【sms:】通訊協定來傳送簡訊（Short Message Service），其語法如下所示： sms:電話號碼[?參數] 語法的URI Scheme可以指定傳送簡訊的電話號碼，如下所示： a href=sms:5556 data-role=button傳簡訊/a 超連結可以啟動簡訊工具來編輯和傳送簡訊。如果需要，我們還可以加上參數的簡訊內容，如下所示： a href=sms:5556?body=你好! data-role=button傳簡訊與內容/a 「?」符號後是參數，以此例是body參數，即簡訊內容。 13-2 打電話與傳簡訊-傳送電子郵件 如同傳送簡訊，電子郵件是改為【mailto:】通訊協定來傳送電子郵件，如下所示： a href=mailto:hueyan@?subject=測試 data-role=button寄送電子郵件/a 超連結可以啟動郵件工具寄送郵件，並且自動填入郵件主旨。 13-2 打電話與傳簡訊-圖例 13-3 jQuery的Ajax技術 13-3-1 非同步HTTP請求 13-3-2 建立Ajax應用程式 13-3-3 使用jQuery的Ajax方法 1-2-4 由上而下的設計方法 13-3 jQuery的Ajax技術 Ajax是Asynchronous JavaScript And XML的縮寫，即非同步JavaScript和XML技術。Ajax可以讓Web應用程式在瀏覽器建立出如同桌上型Windows應用程式一般的使用介面。 Ajax技術的核心是非同步HTTP請求（Asynchronous HTTP Requests），此種HTTP請求可以不用等待伺服端回應，即可讓使用者執行其他互動操作，例如：更改購物車購買的商品數量後，不需