AJAX的client和server沟通机制探究

13
傑克: 那我該如何利用 AJAX 存取遠端網站資料呢?
14
XHR(XMLHttpRequest)
•JavaScript 版的 HttpConnection •介面
–open(string url,string asynch): 開 啟網頁 –send(string): 傳送資料 –onreadystatechange: 狀態改變回呼函 式 –status: HTTP 狀態 –responseXML: 回傳的 XML DOM
17
DEMO: Hello World
http://localhost:8080/xhr/index.jsp
18
Tips & Tricks about XHR
1:40
珍妮佛: 傑克, 這真是太神奇了, 但傳輸的資料一定要是 XML 格 式嗎?
20
XHR 接受的資料型態
•不, XHR 除了 XML 資料之外, 還 可以傳送 text, 所以也包括了 HTML, JavaScript (JSON)
–回傳資料為 HTML 格式
•<script>
–回傳資料為 JavaScript 格式
•但都可以經過額外的步驟轉換為 XML 或 JavaScript
30
<iframe>與<script>優缺點
•優點
–可以跨網域存取資料, 不像 XHR 有限制 –<iframe> 瀏覽過的網頁會被加入瀏覽器的歷 史紀錄內 –支援較多的瀏覽器
16
XHR
•接收資料後立刻更新UI
function handleResponse() { // 檢查 XHR 狀態 if(request.readyState == 4){ // 檢查 http 狀態 if(request.status == 200){ // 讀取回傳 XML 資料 var doc = request.responseXML; // 取得網頁上需被更新的 node 位置 var node = document.getElementById(“resp"); // 設定該 node 的內容 node.innerHTML = doc.documentElement.childNodes[0].nodeValue; } } }
15
XHR
•使用者輸入觸動 XHR
// 建立 XHR request = new XMLHttpRequest(); // 設定回呼函式 request.onreadystatechange=handleResponse; // 開啟連結 request.open("GET","",true); // 傳送資料 request.send(null);
24
珍妮佛: 真奇怪, 我使用 XHR, 瀏覽器卻一直跳出安全性問題?
25
跨網域支援
•有可能是其他問題, 但 XHR 限制僅能 存取該網站上的資料, 無法存取其他 網站的資料 •For example, 若此網頁的網址為 /test.jsp, 則 XHR:
–不可存取: /*, /* –可存取: /*
•缺點
–使用起來較繁瑣 –僅支援 HTTP GET
31
tempo: 那我來做個整理吧
32
各種方法比較
33
小細節需要注意
•三種傳輸方式
–XHR, <iframe>, <script>
•三種資料格式
–XML, HTML, JavaScript
•跨網域問題 •瀏覽器支援問題 •上一頁/下一頁與書籤問題*
21
傑克: 那所有的瀏覽器都有支 援 XHR 嗎?
22
瀏覽器支援
•XHR 支援以下瀏覽器
–IE 5.0+ –Mozilla 1.0+ –Safari 1.2 –Konqueor –Opera 8.0
•但不同的瀏覽器 XHR 建立方式不同
–IE: ActiveX –Others: JavaScript
var sObj = document.createElement('iframe'); sObj.src = ‘’; sObj.onload = function() { iframe_loaded( sObj ); }; document.body.appendChild( sObj );
•<script>
var sObj = document.createElement('script'); sObj.src = ‘’; document.body.appendChild( sObj );
29
<iframe>與<script>資料接收
•<iframe>
•AJAX Framework
–學習如何利用 DWR(Direct Web Remoting) 來 簡化 AJAX 與 Java 間的網路存取, 且為網站 增添更多功能 –AJAX / Reverse AJAX
5
我們的目標
• 即時股市報價
– – http://localhost:8080/dwr-reverse/before.jsp – http://localhost:8080/dwr-reverse/after.jsp
37
Direct Web Remoting
1:50
傑克: 什麼是 DWR 呢?
3•RPC-Style AJAX •Easy AJAX for Java •Easy to integrate •AJAX:
–Expose Java to the Browser
7
What We Will Focus on Here
CrossDomains, Java Data Marshalling, JSON, JSON-RPC, DOJO, DWR, GWT, iframe,
Browser Compatibility,
Prototype, Timeout & Error Handling,
23
瀏覽器支援
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("Your browser does not permit the use of all "+ "of this application's features!"); } }
AJAX 的 client/server 溝通 機制探究
馮彥文
隨想行動科技
講師介紹
•馮彥文 •隨想行動科技 •Javaworld.tw: tempo •Email: yenwen.feng@ •Blog: /blog/p age/tempo
11
Classic Web Applications
From: /publications/essays/archives/000385.php
12
AJAX Web Applications
From: /publications/essays/archives/000385.php
好吧tempo我只是想要存取網站上的資料而已36ajaxframework非同步傳輸?xhriframescript各有不同的優bugs與標準?自行維護非同步傳輸底層不容易37ajaxframework非同步傳輸?現有的ajaxframework都有提供自己的xhrutility或包裝framework
•Reverse AJAX:
–Expose JavaScript to the Server
40
DWR
From: /dwr/overview/dwr
41
珍妮佛: 我也想試試 DWR, 我 該如何安裝呢?
42
Step 1: Download
•從網站下載 DWR: /dwr/download •Copy dwr.jar into WEB-INF/lib
•現有的AJAX Framework都有提供自己的XHR Utility或包裝
–Framework: Google Web Toolkit, ZK, Dojo, … –RPC: DWR, JSON-RPC, … –Libraries: Prototype, …
•DWR 是其中最專業也是支援最廣的 AJAX 非同步傳輸 Framework
[{author:‘tempo’, title:‘智者的對談 智者的對談'}, 智者的對談 {author:‘browser,koji’, title:‘JSP技術手冊 技術手冊'}, 技術手冊 {author:‘caterpillar’, title:‘Spring技術手冊 技術手冊'}, 技術手冊 {author:‘piggy’, title:’Java2全方位學習’]; 全方位學習’ 全方位學習
2:00
43
Step 2: web.xml
•修改 web.xml, 新增 DwrServlet
<servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <servlet-class> org.directwebremoting.servlet.DwrServlet </servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>
2
這個故事, 就從兩個技術人在一 次研討會中的偶然相遇開始…
3
傑克: Hi 珍妮佛, 你知道這個 session 最主要是 講?
4
內容主題
•AJAX
–利用 AJAX 提高網站與使用者的互動性 (Rich Internet Application) –User Interface: DHTML –非同步傳輸: XMLHttpRequest (XHR) 與其他 方式, 與他們的黑暗面
6
我們的目標
• Web 聊天室
– //blog/page/te mpo/ – http://localhost:8080/dwr-chat/before.jsp – http://localhost:8080/dwr-chat/after.jsp
•AJAX SOA?
26
傑克: 少來了 tempo, 明明除 了 XHR 之外, 還有其它方式 來存取網站資料
27
<iframe>與<script>
•是的, 利用 <iframe> 與 <script> 也可以達到相同的功能, 但需要轉幾 個彎
28
<iframe>與<script>使用
•<iframe>
Reverse
AJAX, History & Bookmarks,
scriptTag, Web Framework Integration,
XHR,
XML
8
AJAX 非同步傳輸
1:35
珍妮佛: 什麼是 AJAX? 什麼 又是非同步傳輸?
10
AJAX
Asynchronous JavaScript And AJAX = DHTML + XHR XHTML&CSS XML DOM JavaScript XMLHttpRequest
34
珍妮佛: 好吧 tempo, 這太複 雜了, 我只是想要存取網站上 的資料而已
35
透過 AJAX Framework 來做 非同步傳輸
•XHR, <iframe>, <script> 各有不同的優 點與缺點 •瀏覽器有不同的 bugs 與標準 •自行維護非同步傳輸底層不容易
36
透過 AJAX Framework 來做 非同步傳輸