AJAX 的 client/server 溝通 機制探究 馮彥文 隨想行動科技 2 講師介紹 • 馮彥文 • 隨想行動科技 • Javaworld.tw: tempo • Email: yenwen.feng@willmobile.com • Blog: http://www.pocketshark.com/blog/p age/tempo 3 這個故事, 就從兩個技術人在一 次研討會中的偶然相遇開始… 4 傑克: Hi 珍妮佛, 你知道這個 session 最主要是 講? 5 內容主題 • AJAX – 利用 AJAX 提高網站與使用者的互動性 (Rich Internet Application) – User Interface: DHTML – 非同步傳輸: XMLHttpRequest(XHR) 與其他方 式, 與他們的黑暗面 • AJAX Framework – 學習如何利用 DWR(DirectWeb Remoting) 來 簡化 AJAX 與 Java 間的網路存取, 且為網站 增添更多功能 – AJAX / Reverse AJAX 6 我們的目標 • 即時股市報價 – http://www.marketwatch.com – http://localhost:8080/dwr-reverse/before.jsp – http://localhost:8080/dwr-reverse/after.jsp 7 我們的目標 • Web 聊天室 – http://gabbly.com/http://www.pocketshark.com/blog/page/te mpo/ – http://localhost:8080/dwr-chat/before.jsp – http://localhost:8080/dwr-chat/after.jsp 8 What We Will Focus on Here Browser Compatibility, Cross- Domains, Java Data Marshalling, JSON, JSON-RPC,DOJO, DWR, GWT, iframe, Prototype,Timeout & Error Handling, Reverse AJAX, History & Bookmarks, scriptTag, Web Framework Integration, XHR, XML AJAX 非同步傳輸 1:35 10 珍妮佛: 什麼是 AJAX? 什麼 又是非同步傳輸? 11 AJAX Asynchronous JavaScript And XML XHTML&CSS DOM JavaScript XMLHttpRequest AJAX = DHTML + XHRAJAX = DHTML + XHR 12 Classic Web Applications From: http://adaptivepath.com/publications/essays/archives/000385.php 13 AJAX Web Applications From: http://adaptivepath.com/publications/essays/archives/000385.php 14 傑克: 那我該如何利用 AJAX 存取遠端網站資料呢? 15 XHR(XMLHttpRequest) • JavaScript 版的 HttpConnection • 介面 – open(stringurl,stringasynch): 開 啟網頁 – send(string): 傳送資料 – onreadystatechange: 狀態改變回呼函 式 – status: HTTP 狀態 – responseXML: 回傳的 XML DOM 16 XHR • 使用者輸入觸動 XHR // 建立 XHR request = new XMLHttpRequest(); // 設定回呼函式 request.onreadystatechange=handleResponse; // 開啟連結 request.open("GET","http://abc.com",true); // 傳送資料 request.send(null); 17 XHR • 接收資料後立刻更新UI function handleResponse() { // 檢查 XHR 狀態 if(request.readyState == 4){ // 檢查 http 狀態 if(request.status == 200){ // 讀取回傳 XML 資料 vardoc = request.responseXML; // 取得網頁上需被更新的 node 位置 varnode = document.getElementById(“resp"); // 設定該 node 的內容 node.innerHTML = doc.documentElement.childNodes[0].nodeValue; } } } 18 DEMO: Hello World http://localhost:8080/xhr/index.jsp Tips & Tricks about XHR 1:40 20 珍妮佛: 傑克, 這真是太神奇了, 但傳輸的資料一定要是 XML 格 式嗎? 21 XHR 接受的資料型態 • 不, XHR 除了 XML 資料之外, 還 可以傳送 text, 所以也包括了 HTML, JavaScript (JSON) [{author:‘tempo’, title:‘智者的對談'}, {author:‘browser,koji’, title:‘JSP技術手冊'}, {author:‘caterpillar’, title:‘Spring技術手冊'}, {author:‘piggy’, title:’Java2全方位學習’]; 22 傑克: 那所有的瀏覽器都有支 援 XHR 嗎? 23 瀏覽器支援 • XHR 支援以下瀏覽器 – IE 5.0+ – Mozilla1.0+ – Safari 1.2 – Konqueor – Opera 8.0 • 但不同的瀏覽器 XHR 建立方式不同 – IE: ActiveX – Others: JavaScript 24 瀏覽器支援 function httpRequest(reqType,url){ if(window.XMLHttpRequest){ // Mozilla, Opera, Safari, … request = new XMLHttpRequest(); } else if (window.ActiveXObject){ // IE request=new ActiveXObject("Msxml2.XMLHTTP"); if (!request){ request=new ActiveXObject("Microsoft.XMLHTTP"); } } if(request){ … } else { alert("Yourbrowser does not permit the use of all "+ "of this application's features!"); } } 25 珍妮佛: 真奇怪, 我使用 XHR, 瀏覽器卻一直跳出安全性問題? 26 跨網域支援 • 有可能是其他問題, 但 XHR 限制僅能 存取該網站上的資料, 無法存取其他 網站的資料 • For example, 若此網頁的網址為 http://www.abc.com/test.jsp, 則 XHR: – 不可存取: test.abc.com/*, abc.com/* – 可存取: www.abc.com/* • AJAX SOA? 27 傑克: 少來了 tempo, 明明除 了 XHR 之外, 還有其它方式 來存取網站資料 28