• 1. AJAX(Asynchronous JavaScript And XML)
  • 2. 什麼是AJAX?AJAX翻成中文就是「非同步JavaScript 和XML技術」,主要是讓web應用程式建立更快、更容易使用的介面。 AJAX技術使用非同步HTTP請求,在Browser和Web server之間傳遞XML資料,使Browser只更新部分網頁內容而不用重新載入整個網頁。
  • 3. 使用AJAX的時機 像 Google Maps 的使用中,Browser 與 Web server 之間需要傳遞非常大量的圖形資料,如果利用傳統的同步方式,在全部的圖形下載完成之前,我們沒辦法對網頁進行操作,而使用者點選往左、往右的按鈕後,使用者又得等待另一次的圖形載入。反之,如果我們可以在使用者操作的時候,非同步的下載其它圖形呢?這樣速度會變快,也不必一再的重新載入網頁。
  • 4. AJAX相關技術HTML/XHTML、CSS:在browser顯示使用者介面和相關內容 XML:伺服器非同步傳遞資料 XML DOM:當client端非同步取得XML資料後,可以進一步使用JavaScript和XMLDOM來取出所需資訊 XMLHttpRequest:利用 XMLHttpRequest 物件與遠端的 Web server 進行非同步的資料交換
  • 5. XHTML(Extensible HyperText Markup Language)  XHTML是W3C制定用來取代HTML的下一世代HTML。XHTML文件比HTML文件的標籤要求更加嚴格,必須遵循XML文件的撰寫規則。其規則如下: 不可省略結尾標籤,保證所有標籤都是成雙成對。  標籤和屬性都是使用小寫的英文字母,例如、。  屬性值需要用引號括起來,例如。  name屬性用id屬性取代。  XHTML文件架構和HTML文件相似,只是在文件開頭使用XML(不一定需要)和DOCTYPE(指定XML文件驗證的DTD)的宣告。  XHTML文件的副檔名為.xhtml或者和XML文件一樣用.xml。也可以像HTML文件一樣用.html或.htm,不過此時要刪除第一列的宣告。
  • 6. XHTML範例01:  02:  04:  05:   06: XHTML Example 07:  08:   09:  

    test

    10:  11:  第1行是宣告此為XML文件。 第2~3行是DTD宣告。 第4~11行是HTML文件,在html標籤裡的名稱空間是XML的寫法。
  • 7. XML DOM DOM全名叫Document Object Model物件模型,XML DOM是XML文件設計的介面物件,可以將XML文件視為一顆樹狀結構的節點。    DOM是W3C建議規格,提供程式語言標準程式設計介面的屬性、方法和物件,程式設計者能夠透過DOM瀏覽HTML文件或XML文件,新增、刪除和修改結點資料。 s95 001 帥哥 DOM剖析器schoolidstudentidname上面XML文件在經過DOM剖析之後,就成為一顆樹狀結構的節點。
  • 8. 同步HTTP請求Browser 輸入URLWeb Server HTTP請求 HTTP回應 HTTP請求 HTTP回應 執行操作時間軸 在同步HTTP請求過程中,回應的內容都是整頁網頁,所以在等待回應的時間內,使用者唯一能做的只有等待,只能等到收到回應後,才能執行操作。
  • 9. 非同步HTTP請求Browser 輸入URLWeb Server HTTP請求 HTTP回應 HTTP請求 HTTP回應 執行操作 執行其它操作 時間軸 AJAX引擎 AJAX的HTTP請求和使用者輸入資料的互動操作是不同步的,因為HTTP請求是在背景執行,執行後也不用等待回應,而是由AJAX引擎來處理請求,回應和顯示,使用者操作不會因發出請求而中斷。
  • 10. AJAX架構與傳統架構簡圖 客戶端BrowserWeb serverDatabaseHTTP請求 HTML+CSS 伺服端傳統架構 客戶端BrowserHTTP請求 XML資料DatabaseWeb server 伺服端AJAX架構AJAX引擎HTTP請求 HTML+CSS
  • 11. AJAX實例-Google翻譯  在上面圖例的搜尋欄位中,使用者輸入文字,例如:apple後,按下按鈕就會顯示相關翻譯的內容,但是Browser並沒有重新載入網頁,只有更新下方區域的內容。因為Google 使用AJAX技術,讓網頁非同步取得伺服端提供的翻譯內容。
  • 12. AJAX程式範例-圖書資訊索引  本例的程式架構是由HTML表單的使用介面、Java Script 程式碼的Ajax引擎和伺服端ASP程式與Access資料庫組成,如下圖所示:使用者互動Ajax引擎 Ajax.jsHTML表單 AjaxDatabase.htm支援ASP的 Web serverASP程式 getBook.aspAccess資料庫 MyBook.mdbHTTP請求 回應XML資料ServerClient函數呼叫 更新標籤內容  上面AjaxDatabase.htm擁有HTML表單使用介面的下拉式選單,當使用者改變選擇,就呼叫Ajax.js的Java Script函數來取得資料庫的圖書資訊,它是建立在XMLHttpRequest物件來送出非同步HTTP請求至伺服端的getBook.asp。
  • 13. AJAX程式範例-圖書資訊索引  在Server端的ASP用AOD元件從Access資料庫取得指定書號的圖書資料後,建立XML文件來傳回Client端,Client端的Ajax引擎在取得XML文件的圖書資料後,更新
    標籤以表格顯示相關資料。Access資料庫內容:
  • 14. AJAX程式範例-圖書資訊索引  執行AjaxDatabase.htm後在下拉式的選單選JavaScript選項,就可以在下方看到表格顯示所選圖書的詳細資料,如下圖所示: 請注意!更新圖書資料並沒有重新載入整個網頁,只有更新下方 內容。
  • 15. AJAX程式範例-圖書資訊索引// 建立XMLHttpRequest物件 function getHttpRequestObject(handler) { // 建立XMLHttpRequest物件 var httpRequest = null; if ( window.XMLHttpRequest) { // IE7, Mozilla, Safari等瀏覽程式 httpRequest = new XMLHttpRequest(); } else if ( window.ActiveXObject ) { // IE5, IE6 // 找出最新版MSXML剖析器 var msxmls = [ "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"]; for ( i=0; i< msxmls.length; i++ ) { try { // 建立XMLHttpRequest物件 httpRequest = new ActiveXObject(msxmls[i]); break; } catch ( e ) { return null; } } } // 指定事件處理程序的名稱 httpRequest.onreadystatechange = handler; return httpRequest; } // 開啟和送出非同步請求 function makeRequest(httpRequest, url) { httpRequest.open("GET", url, true); // 開啟 httpRequest.send(null); // 送出 }JavaScript程式:Ajax.jsgetHttpRequestObject()函數可以判斷Browser種類來建立XMLHttpRequest物件。 makeRequest()函數可以開啟和送出HTTP請求。
  • 16. AJAX程式範例-圖書資訊索引var xmlHttp; // 送出HTTP請求來取得圖書資訊 function getBook(value) { // 建立XMLHttpRequest物件 xmlHttp = getHttpRequestObject(showBook); if ( xmlHttp != null ) { var url = "getBook.asp"; // 建立URL網址 url = url + "?code=" + value; makeRequest(xmlHttp, url); // 建立HTTP請求 } else { alert ("錯誤! 瀏覽程式不支援XMLHttpRequest物件!"); return; } }JavaScript程式:Ajax.jsgetBook()函數呼叫 getHttpRequestObject()和makeRequest()函數來送出非同步的HTTP請求。
  • 17. AJAX程式範例-圖書資訊索引// 顯示圖書的詳細資訊 function showBook() { if ( xmlHttp.readyState == 4 ) { // 取得回應 var xmlResult = xmlHttp.responseXML; var objNode = xmlResult.documentElement.childNodes; var str = ""; // 顯示所有XML節點 for ( i = 0; i < objNode.length; i++ ) { switch(i){ case 0: str = str + ""; break; case 1: str = str + ""; break; case 2: str = str + ""; break; case 3: str = str + ""; break; } } result.innerHTML = str + "
    " +"編號: "+ objNode.item(i).text; str = str + "
    " +"書名: "+ objNode.item(i).text; str = str + "
    " +"售價: "+ objNode.item(i).text; str = str + "
    " +"出版日期: "+ objNode.item(i).text; str = str + "
    "; } }JavaScript程式:Ajax.jsshowBook()函數是onreadystatechange屬性指定的處理程序。 49~60行的if條件判斷是否完成回應,如果是,在51行取得送出的XML DOM物件,52行取得所有子節點,55~74行使用FOR迴圈建立表格圖書資料。
  • 18. AJAX程式範例-圖書資訊索引ASP程式:getBook.asp<% ' 文件內容格式為XML Response.ContentType = "text/xml" ' 不儲存在客戶端快取 Response.Expires = 0 Dim objDBConn, strDSNless, strSQL ' 建立資料庫物件 Set objDBConn = Server.CreateObject("ADODB.Connection") ' DSN-less字串 strDSNless = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & _ Server.Mappath("MyBooks.mdb") ' 建立SQL指令 strSQL = "SELECT * FROM Books WHERE Code = '" strSQL = strSQL & Request.QueryString("code") & "'" ' 開啟資料來源 objDBConn.Open strDSNless ' 執行SQL指令 Set objRS = objDBConn.Execute(strSQL) Response.Write("") Response.Write("") Response.Write("" & objRS("Code") & "") Response.Write("" & objRS("Title") & "") Response.Write("" & objRS("Price") & "") Response.Write("" & objRS("PubtDate") & "") Response.Write("") Set objRS = Nothing ' 關閉資料庫連結 objDBConn.Close Set objDBConn = Nothing %> getBook.asp使用ADO元件來查詢Access資料庫的圖書資料。 01~14行在建立Connection物件後,使用取得的書參數來建立查詢的SQL指令。16行開啟資料來源,18行執行SQL指令取得RecordSet物件。19~25行使用取得記錄資料來建立XML元素book。