第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例：關鍵字建議清單 15-4 應用實例：關鍵字建議清單

15-1 Mobile PHP 建立第一個 jQuery Mobile 程式 jQuery Mobile 的介面元素 PHP 的行動裝置偵測

建立第一個 jQuery Mobile 程式 - 說明 jQuery Mobile 是 jQuery 專案小組開發，一套建立在 jQuery 函數庫的使用介面系統（ User Interface System ），一個觸控最佳化的 Web 框架，提供眾 多最佳化觸控操作的使用介面元素，可以讓我們 不用撰寫一行 JavaScript 程式碼，就輕鬆使用 HTML 標籤建立 Mobile Web 應用程式的使用介面。

建立第一個 jQuery Mobile 程式 - 下載 jQuery Mobile 可以在官方網站免費下載，其下載 網址： ，請捲 動視窗找到 ZIP File ，點選【 Zip File: jquery.mobile zip 】超連結下載完整 JavaScript 、 CSS 和 image 檔案，其下載檔名是： jquery.mobile zip 。

建立第一個 jQuery Mobile 程式 - jQuery Mobile 程式結構： Ch15_1_1.html(1) 01: 02: 03: 04: 05: <meta name="viewport" content="width=device-width, initial-scale=1"> 06: Ch15_1_1.html 07: 08: 09: 10: 11:

建立第一個 jQuery Mobile 程式 - jQuery Mobile 程式結構： Ch15_1_1.html(2) 11: 12: 13: 14: jQuery Mobile 15: 16: 17: jQuery Mobile 是基於 jQuery 建立的框架， 18: 支援 iOS 、 Android 、 BlackBerry 、 bada 、 19: Windows Phone 、 webOS 、 Symbian 和 20: MeeGo 的手機網頁應用程式開發。 21: 22: 23: 製作者 : 陳會安 24: 25: 26: 27:

建立第一個 jQuery Mobile 程式 - jQuery Mobile 程式結構 ( 程式碼說明 1) 第 4~5 列：在 區塊加上 標籤指定編碼 utf-8 和行動裝置尺寸與縮放比例， content 屬性值 有 2 個參數，如下表所示： 參數說明 width 指定瀏覽器顯示寬度，屬性值 device-width 是行 動裝置的螢幕寬度，也可以指定數值的絕對寬 度 initial- scale 指定畫面使用多少倍 viewport 顯示， 1 是指 1 個 viewport 顯示螢幕的像素（即 1 個點）等於 1 個螢 幕像素

建立第一個 jQuery Mobile 程式 - jQuery Mobile 程式結構 ( 程式碼說明 2) 第 7~9 列：在 區塊使用 和 標籤 含括 jQuery 和 jQuery Mobile 程式碼檔案和樣式表（.js 和.css 檔案是從 jQuery Mobile 下載 ZIP 檔案取出， 再加上 images 目錄的圖示檔）。

建立第一個 jQuery Mobile 程式 - jQuery Mobile 程式結構 ( 程式碼說明 3) 第 12~25 列： jQuery Mobile 是使用標記驅動（ Markup-driven ）建立與配置頁面，即 HTML5 的 data-role 屬性定義 div 元素是什麼？在最外層 div 元 素的 data-role 屬性值是 page ，表示是頁面，可以 分成三個區段，其說明如下表所示： 標籤的區段說明 頁面標題列，可以在此元素建立巡覽列 頁面實際內容 頁面註腳列，加上 data-position="fixed" 屬性 ，可以讓註腳列永遠顯示在底部

jQuery Mobile 的介面元素 - 多頁面 在同一 jQuery Mobile 程式檔可以建立多個頁面，例如： id 屬性值為 home 和 about 的 2 個頁面，如下所示： … … 關於本書 … …

jQuery Mobile 的介面元素 - 巡覽工具列 jQuery Mobile 只需在 div 元素指定 data- role="navbar" 屬性，就可以將其中 ul 和 li 元素轉變 成巡覽工具列，如下所示： 首頁 搜尋 關於 data-icon 屬性是預設圖示，例如： home 、 search 和 info 等。

jQuery Mobile 的介面元素 - 對話方塊 jQuery Mobile 頁面除了可以填滿整個行動裝置的 螢幕外，也可以建立成對話方塊，我們只需在開 啟頁面的超連結加上 data-rel 屬性值 dialog ，如下所 示： 關於本書 上述 a 元素可以將 id 屬性值 about 的頁面以對話方塊 來開啟。

jQuery Mobile 的介面元素 - ListView ListView 是行動裝置最常見的使用介面，它是一個清單， 可以顯示清單資料、建立巡覽或顯示清單項目的結果資料 。 jQuery Mobile 可以將 HTML 項目編號（ ol 和 li 元素）或項 目清單（ ul 和 li 元素）轉換成 ListView ，即加上 data- role="listview" 屬性，如下所示： HTML5 CSS3 JavaScript jQuery data-inset="true" 屬性可以讓清單置中顯示和將四角改為圓 角。

jQuery Mobile 的介面元素 - 按鈕 按鈕（ Buttons ）是觸控使用介面最重要的介面元 素之一， jQuery Mobile 可以將 a 元素顯示成按鈕外 觀，只需加上 data-role="button" 屬性，就可以將 超連結轉換成按鈕外觀，如下所示： 確定

PHP 的行動裝置偵測 - 說明 PHP 的行動裝置偵測是在判斷瀏覽器傳回的標頭資 訊，以便判斷使用的是哪一種作業系統或瀏覽器 ，如此，可以判斷使用者是使用哪一種瀏覽裝置 ： PC 或手機等行動裝置。

PHP 的行動裝置偵測 - 使用者代理 User-Agent 使用者代理 User-Agent 是 HTTP 標頭資訊的一個特 殊字串，可以讓伺服器識別客戶端使用的作業系 統、版本、 CPU 類型和瀏覽器種類等資訊， PHP 程 式碼是使用 $_SERVER 預定變數取得此資訊，如下 所示： echo $_SERVER["HTTP_USER_AGENT"]; 上述程式碼取得參數使用者代理 User-Agent 的標頭 資訊。

PHP 的行動裝置偵測 - PHP 的行動裝置偵測函數 現在，我們可以使用 User-Agent 和 PHP 正規運算式建立 mobile_detect() 函數，可以判斷瀏覽裝置是否為行動裝置，如下所示： function mobile_detect() { $mobile_device_list ='/(alcatel|amoi|android|avantgo|blackberry |benq|cell|cricket|docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod |j2me|java|midp|mini|mmp|mobi|motorola|nokia|palm|panasonic |philips|phone|sagem|sharp|smartphone|sony|symbian|t-mobile |telus|vodafone|wap|webos|wireless|xda|xoom|zte)/i'; if (preg_match($mobile_device_list, $_SERVER['HTTP_USER_AGENT'])) return true; else return false; }

PHP 的行動裝置偵測 - 建立自動切換的 PC 與 Mobile 網站 ( 架構 ) 對於 PC 與 Mobile 網站來說，我們可以針對不同裝 置建立專屬網頁，分別位於不同的子目錄，例如 ： PC 版是位在 desktop 子目錄； Mobile 版是位在 mobile 子目錄，如下圖所示：

PHP 的行動裝置偵測 - 建立自動切換的 PC 與 Mobile 網站 ( 程式碼 ) PHP 程式 Ch15_1_3.php 使用 mobile_detect() 函數（ MobileDetect.inc 引入檔）判斷轉址至哪一個子目 錄的 index.php 首頁，如下所示： include("MobileDetect.inc"); // 偵測裝置是否是 Mobile if (mobile_detect()) header("Location: mobile/index.php"); else header("Location: desktop/index.php");

PHP 的行動裝置偵測 - 建立自動切換的 PC 與 Mobile 網站 ( 圖例 )

15-2 Ajax 的基礎 Ajax 簡介 非同步 HTTP 請求 Ajax 應用程式架構

Ajax 簡介 - 說明 Ajax 是 Asynchronous JavaScript And XML 的縮寫，譯成中文 就是非同步 JavaScript 和 XML 技術。 Ajax 可以讓 Web 應用程 式如同 Windows 應用程式一般，在瀏覽器建立快速、更佳 和容易使用的操作介面。 Ajax 是由 Jesse James Garrett 最早提出的名稱，事實上， Ajax 並不是全新的網頁技術，它是以一種新方法來整合現 存的多種網頁技術。不過，直到 Ajax 被大量使用在 Google 網頁設計，例如： Gmail 、 Google Suggest 和 Google Maps 後 ， Ajax 技術才受到大家的重視，並且快速成為目前網頁設 計技術上的一顆耀眼新星。

Ajax 簡介 - Ajax 的相關技術 HTML/XHTML 和 CSS ：在瀏覽器顯示使用者介面和 呈現相關資料。 XML ：伺服端非同步傳遞的資料。 XML DOM ：當客戶端非同步取得 XML 資料後，可 以進一步使用 JavaScript 程式碼和 XML DOM 取出所 需的資訊。 XMLHttpRequest 物件： JavaScript 程式碼是透過 XMLHttpRequest 物件來建立非同步 HTTP 請求。

非同步 HTTP 請求 - 說明 Ajax 技術的核心是非同步 HTTP 請求（ Asynchronous HTTP Requests ），此種 HTTP 請求可以不用等待伺服端回應，即 可讓使用者執行其他互動操作，例如：更改購物車的購買 商品數量後，不需等待重新載入整個網頁，或自行按下按 鈕來更新網頁，就可以接著輸入送貨的相關資訊。 簡單的說，非同步 HTTP 請求可以讓網頁使用介面，不會因 為 HTTP 請求的等待回應而中斷，因為同步 HTTP 請求需要重 新載入整頁網頁內容，如果網路稍慢，可能看見空白頁和 網頁逐漸載入的過程，這是和 Windows 應用程式使用者介 面間的最大差異。

非同步 HTTP 請求 - 同步 HTTP 請求 傳統 HTTP 請求的過程是同步 HTTP 請求（ Synchronous HTTP Requests ），如下圖所示：

非同步 HTTP 請求 - 非同步 HTTP 請求 Ajax 技術是使用非同步 HTTP 請求，除了第 1 次載入網頁外 ， HTTP 請求是在背景以 XMLHttpRequest 物件來送出的 HTTP 請求，送出後，並不需要等待回應，所以不會影響到使用 者在瀏覽器進行的互動，如下圖所示：

Ajax 應用程式架構 Ajax 應用程式架構的最大差異是在客戶端，新增 JavaScript 撰寫的 Ajax 引擎來處理 HTTP 請求，和取 得伺服端回應的 XML 資料，如下圖所示：

15-3 jQuery 的 Ajax 方法 jQuery 的 Ajax 方法簡介 使用 jQuery 的 Ajax 方法

jQuery 的 Ajax 方法簡介 - 說明 Ajax 請求的第一步是建立 XMLHttpRequest 物件， 雖然 Internet Explorer 、 Firefox 、 Safari 、 Chrome 和 Opera 等瀏覽器都提供 XMLHttpRequest 物件。不過 ，有些是內建物件；有些不是，所以，不同瀏覽 器使用 JavaScript 建立 XMLHttpRequest 物件的程式 碼也不同。 jQuery 函數庫提供多種方法來提出 XHR 請求（即 XMLHttpRequest 請求），而不用自行判斷使用的 瀏覽器來建立 XMLHttpRequest 物件，可以大幅減 少程式碼的複雜度，輕鬆建立跨瀏覽器的 Ajax 應 用程式。

jQuery 的 Ajax 方法簡介 - 相關方法 方法說明 load() 將伺服端的遠端文件使用 Ajax 請求來載入 getScript() 使用 Ajax 請求執行伺服端 JavaScript 程式檔案 get() 使用 HTTP GET 方法送出 Ajax 請求和取得回應 post() 使用 HTTP POST 方法送出 Ajax 請求和取得回應 getJSON() 使用 HTTP GET 方法以 Ajax 請求來取得伺服端 的 JSON 資料 ajax() 使用 XMLHttpRequest 物件送出 Ajax 請求

使用 jQuery 的 Ajax 方法 - ajax() 方法 jQuery 的 ajax() 方法是 jQuery 的 Ajax 技術核心，因為它是一 個功能強大和能夠客製化的 Ajax 方法，其語法也最為複雜 ，如下所示： $.ajax({ type: 'GET', url: 'getDateTime.php', data: { name : nameVal, type : typeVal }, success: function(data) { // 處理傳回的資料 } });

使用 jQuery 的 Ajax 方法 - 屬性 屬性說明 type HTTP 請求的方式是 GET 或 POST url 目標的 URL 網址 data 傳送至伺服器的資料 success 成功事件，當請求成功時執行的回撥函數 error 失敗事件，當請求失敗時執行的回撥函數 complete 完成事件，不論成功或失敗，請求完成時執行 的回撥函數 beforeSend 送出之前事件，當送出 Ajax 的 HTTP 請求之前 執行的回撥函數

使用 jQuery 的 Ajax 方法 - Ajax 事件 jQuery 的 Ajax 事件是在 Ajax 送出 HTTP 請求的過程中 觸發的一些 jQuery 自訂事件，我們可以在 $.ajax() 方法參數定義事件，如下所示： $.ajax({ type: 'GET', url: 'postDateTime.php', error: function() { alert(" 載入網頁錯誤 !"); }, success: function(data) { alert(" 載入網頁成功 !"); } });

使用 jQuery 的 Ajax 方法 - 程式範例 在 PHP 程式使用 ajax() 方法送出 HTTP GET 請求，可 以取得伺服端回應的 XML 文件，其內容是我們送 出的姓名，和伺服器的日期或時間資料，如下圖 所示：

15-4 應用實例：關鍵字建議清單 關鍵字建議清單的程式架構 關鍵字建議清單的使用 關鍵字建議清單的程式說明

15-4 應用實例：關鍵字建議清單 關鍵字建議清單是模擬 Google Suggest 的實作範例 ，只需在欄位輸入關鍵字，就可以在下方顯示提 示用途的建議清單。

關鍵字建議清單的程式架構 – 架構 關鍵字建議清單的程式架構是由 HTML 表單的使用 介面、 JavaScript 程式碼的 Ajax 引擎和伺服端 PHP 程 式與 MySQL 資料庫所組成，如下圖所示：

關鍵字建議清單的程式架構 – 資料庫 MySQL 資料庫 mysuggests 內含 suggest 資料表的關 鍵字記錄，擁有欄位 suggestId 和 title ，其記錄資料 如下圖所示：

關鍵字建議清單的使用 關鍵字建議清單在執行前請參考第 節執行 mysuggests.sql 建立 mysuggests 資料庫。然後啟動 Internet Explorer 輸入 AjaxSuggest.htm 的網址： ，就可 以看到執行結果，如下圖所示：

關鍵字建議清單的程式說明 關鍵字建議清單有 4 個程式檔案，包含 jQuery 函數 庫的 jquery js ， mysuggests.sql 是建立 MySQL 資料庫的 SQL 指令碼檔案。 HTML 網頁： AjaxSuggest.html Ajax 應用程式的使用介面。 PHP 程式： getSuggest.php 連接 MySQL 資料庫來取得關鍵字的記錄。