??xml version="1.0" encoding="utf-8" standalone="yes"?> Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1311605
* Date : 2013-12-5
* Email : larry.li@aicent.com
*/
var Session = function() {
var defaults = {
title : 'Session Notification',
message : 'Your session is about to expire.',
keepAliveUrl : '/admin/session/keep-alive',
redirUrl : '/account/timed-out',
logoutUrl : '/account/logout',
warnAfter : 900000, // 15 minutes
redirAfter : 1200000 // 20 minutes
};
var o = defaults, dialogTimer, redirTimer;
var controlRedirTimer = function(action) {
switch(action) {
case 'start':
// Dialog has been shown, if no action taken during redir period, redirect
redirTimer = setTimeout(function(){
window.location = o.redirUrl;
}, o.redirAfter - o.warnAfter);
break;
case 'stop':
clearTimeout(redirTimer);
break;
case 'restart':
clearTimeout(redirTimer);
redirTimer = setTimeout(function(){
window.location = o.redirUrl;
}, o.redirAfter - o.warnAfter);
break;
}
};
var controlDialogTimer = function(action) {
switch(action) {
case 'start':
dialogTimer = setTimeout(function(){
$('#sessionTimeout-dialog').modal('show');
controlRedirTimer('start');
}, o.warnAfter);
break;
case 'stop':
clearTimeout(dialogTimer);
break;
case 'restart':
clearTimeout(dialogTimer);
dialogTimer = setTimeout(function(){
$('#sessionTimeout-dialog').modal('show');
controlRedirTimer('restart');
}, o.warnAfter);
break;
}
};
var doKeepAlive = function() {
$.ajax({
type: 'POST',
url: o.keepAliveUrl,
success: function() {
// Stop redirect timer and restart warning timer
controlRedirTimer('restart');
controlDialogTimer('restart');
}
});
};
return {
sessionTimeout: function(options) {
if ( options ) { o = $.extend( defaults, options ); }
var warning_dialog = '<div class="modal fade" id="sessionTimeout-dialog">'
+' <div class="modal-dialog modal-small">'
+' <div class="modal-content">'
+' <div class="modal-header">'
+' <button id="_close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'
+' <h4 class="modal-title">'+ o.title +'</h4>'
+' </div>'
+' <div class="modal-body">'+ o.message +'</div>'
+' <div class="modal-footer">'
+' <button id="sessionTimeout-dialog-logout" type="button" class="btn btn-default">Logout</button>'
+' <button id="sessionTimeout-dialog-keepalive" type="button" class="btn btn-primary" data-dismiss="modal">Stay Connected</button>'
+' </div>'
+' </div>'
+' </div>'
+'</div>';
$('body').append(warning_dialog);
$('#sessionTimeout-dialog-logout').on('click', function () { window.location = o.logoutUrl; });
$('#_close,#sessionTimeout-dialog-keepalive').click(function() {
doKeepAlive();
});
// Begin warning period
controlDialogTimer('start');
},
sessionTimeoutKeepAlive: function() {
controlRedirTimer('restart');
controlDialogTimer('restart');
}
};
}();
$(function() {
Session.sessionTimeout({
title: 'Session Timeout Notification',
message: 'Your session is about to expire.',
keepAliveUrl: contextPath + '/admin/session/keep-alive',
redirUrl: contextPath + '/account/login',
logoutUrl: contextPath + '/account/logout',
warnAfter: 1500000,
redirAfter: 1780000
});
$(document).ajaxComplete(function() {
Session.sessionTimeoutKeepAlive();
});
});
]]>
演示http://efectorelativo.net/laboratory/noobSlide/sample.html
Checkout the Demo here.下蝲
2) Growl 2.0 with Mootools-
囑ֱ渐隐渐显效果
演示: 打开演示,点击左侧Show Growl Smoke. Show Growl 卛_看到效果
下蝲:
--------------------------------------------------------------------------------
3) Easiest Tooltip and Image Preview Using jQuery-鼠标Udq接对象上,滑出提示层效?
Live Demo演示
--------------------------------------------------------------------------------
4) Sliding top panel using mootools-仿flash的菜单移动效?
Live Demo演示
--------------------------------------------------------------------------------
5) Create a Slick Tabbed Content Area using CSS & jQuery-tab标签切换内容Ҏ高度自动~冲Ud变化
Live Demo演示
--------------------------------------------------------------------------------
6) Custom JavaScript Dialog Boxes-ajax对话框效果,周围面变灰白色
Live Demo演示
Download tutorial from Here下蝲
--------------------------------------------------------------------------------
7) Facebook Sliders With Mootools and CSS -
按钮拖动 控制囄透明度高宽度
Checkout the Live Demo演示
--------------------------------------------------------------------------------
8 ) Making a Javascript Video Player-
Checkout the Demos here.
--------------------------------------------------------------------------------
9) Ajax mosaic builder-
无数张图片组合排列拼贴成一张图的效?
Checkout the Demo here.演示
--------------------------------------------------------------------------------
10) jQuery flipv()-
文字U向排效?
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
11) Drag. Drop. Lock.-
可拖动的?
Checkout the Live Demo演示
--------------------------------------------------------------------------------
12) WebAppers Simple Javascript Progress Bar with CSS-q度?点中? -按钮可以直接预览效果Q?
Checkout the Live Demo演示
Download it from here.下蝲
--------------------------------------------------------------------------------
13) moowheel-数据图标的动LC效?
object.
Checkout the Live Demo演示
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
14) Sliding top panel using mootools-
Download tutorial from Here
--------------------------------------------------------------------------------
15) Mocha UI-ajax js仿windows桌面操作的效果,
Checkout the Demo here.演示
--------------------------------------------------------------------------------
16) ddMenu-
ajax实现右键菜单效果
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
17) googleDrive-google地图工P实现汽车在地图上行Ӟ用方向键 控制车头必须朝向马\前方Q往边上开׃开不下厅R?
--------------------------------------------------------------------------------
18) GlassBox-ajax实现cMvistapȝ H口半透明的玻璃效?
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
19) ProtoFlow-ajax相片展示效果Q左x动ƈ有倒媄效果
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
20) ASP.NET AJAX AutoComplete Control (Facebook look)-cMgoogle搜烦输入?下拉昄相关关键字的效果Q?
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
21) ADamnIT - JS error notification- A free reporting service that
emails you when a JS error occurs in your webpages.面js错误提示Q点L?
下方昄对话H口
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
22) Flexigrid-数据表格table U向的“列?可以仿excel一?拖动
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
23) prettyPhoto a jQuery lightbox clone-与现在流行的ligtbox 效果cMQ点图Q大囑ּ出,周围面变灰色半透明?
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
24) JavaScript Color Fading Script-js实现颜色渐变动画效果Q鼠标移到表?文字上,颜色~慢渐变Q而不是一般css实现的颜色直接切换?
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
25) Rotator-
Checkout the Demo here.
Download it from here.
--------------------------------------------------------------------------------
26) Kotatsu - a simple html table generator-
--------------------------------------------------------------------------------
27) jQuery virtual tour-js虚拟全景Q?60度环l图片浏览,鼠标Ud囄下方Q显C左叛_x停止按钮Q?
Checkout the Demo here.演示
Download it from here.下蝲
--------------------------------------------------------------------------------
28) Usable directory listings with a little Dojo-
Checkout the Demo here.
Download a zip of the header and .htaccess files here.
--------------------------------------------------------------------------------
29) Cuzillion?单的|页版dreamweaverQ点d侧列出的html元素,实时在中间的html代码部分昄Q可以拖动改变元素所在位|跟属?右侧点creat预览面效果
--------------------------------------------------------------------------------
30) The Sliding date-picker-旉表,可以拖动选择特定旉D?
Checkout the Demo here.演示
Download it from here.下蝲
]]>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package onlyfun.caterpillar;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
private static LinkedList<Message> messages = new LinkedList<Message>();
public ChatRoomServlet() {
super();
}
private List<Message> addMessage(String text) {
if (text != null && text.trim().length() > 0) {
messages.addFirst(new Message(text));
while (messages.size() > 10) {
messages.removeLast();
}
}
return messages;
}
private List<Message> getMessages() {
return messages;
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Message> list = null;
if("send".equals(request.getParameter("task"))) {
list = addMessage(request.getParameter("msg"));
}
else if("query".equals(request.getParameter("task"))){
list = getMessages();
}
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
for(int i = 0; i < list.size(); i++) {
String msg = list.get(i).getText();
out.println("<message>" + msg + "</message>");
}
out.println("</response>");
}
}
Message物g如下…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package onlyfun.caterpillar;
public class Message {
private long id = System.currentTimeMillis();
private String text;
public Message(String newtext) {
text = newtext;
if (text.length() > 256) {
text = text.substring(0, 256);
}
text = text.replace('<', '[');
text = text.replace('&', '_');
}
public long getId() {
return id;
}
public String getText() {
return text;
}
}
Servlet接受a息新增與查詢,判斷的方式是檢查請求參數task是send或query?
Servlet會以XML傛_目前List當中的訊息,客戶端可以查詢或插入新訊息時Q取得目前List中的a息Q接著在web.xml中設定一?#8230;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>
</description>
<display-name>
ChatRoomServlet</display-name>
<servlet-name>ChatRoomServlet</servlet-name>
<servlet-class>
onlyfun.caterpillar.ChatRoomServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ChatRoomServlet</servlet-name>
<url-pattern>/ChatRoomServlet</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>
在網頁中Q用者可以在輸入a息後按下按鈕送出資訊Q並在XML回應取得時,訊息以一列一列的表格方式示ZQ另外還a定了週期性的輪詢Q即使不輸入新訊息,也可以週期性的取得新的聊天a息…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Chat Room</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function sendMessage() {
var msg = document.getElementById("text").value;
if(msg == "") {
refreshMessage();
return;
}
var param = "task=send&msg=" + msg;
ajaxRequest(param);
document.getElementById("text").value = "";
}
function queryMessage() {
var param = "task=query";
ajaxRequest(param);
}
function ajaxRequest(param) {
var url = "ChatRoomServlet?timestamp" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = refreshMessage;
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;");
xmlHttp.send(param);
}
function refreshMessage() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var messages = xmlHttp.responseXML.getElementsByTagName("message");
var table_body = document.getElementById("dynamicUpdateArea");
var length = table_body.childNodes.length;
for (var i = 0; i < length; i++) {
table_body.removeChild(table_body.childNodes[0]);
}
var length = messages.length;
for(var i = length - 1; i >= 0 ; i--) {
var message = messages[i].firstChild.data;
var row = createRow(message);
table_body.appendChild(row);
}
setTimeout("queryMessage()", 2000);
}
}
}
function createRow(message) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
</script>
</head>
<body>
<p>
Your Message:
<input id="text"/>
<input type="button" value="Send"
onclick="sendMessage()"/>
</p>
<p>Messages:</p>
<table align="left">
<tbody id="dynamicUpdateArea"></tbody>
</table>
</body>
</html>
單抓個畫?#8230;
直接用AJAXQ後端用JSP/ServletQ您要對請求參數做些判斷Q看看是新增a息或查詢,並要自行輸出XMLQ有的沒?#8230;
ҎDWR的話Q就很簡單了Q寫個簡單的Java物g…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package onlyfun.caterpillar;
import java.util.LinkedList;
import java.util.List;
public class Chat {
private static LinkedList<Message> messages = new LinkedList<Message>();
public List addMessage(String text) {
if (text != null && text.trim().length() > 0) {
messages.addFirst(new Message(text));
while (messages.size() > 10) {
messages.removeLast();
}
}
return messages;
}
public List getMessages() {
return messages;
}
}
接著…在dwr.xml中開放一?#8230;
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="Chat">
<param name="class" value="onlyfun.caterpillar.Chat"/>
</create>
<convert converter="bean" match="onlyfun.caterpillar.Message"/>
</allow>
</dwr>
使用者取得訊息時Q是直接傛_List物gQ而List中裝的是Message物gQMessage物g是自a物Ӟcontervera定?beanQ表CDWR會自動將Message的getter名稱轉換為傳回客戶端的JavaScript物g中的屬性,例如Message中有 getText()Q則在客戶端可以用message.text這樣的方式來存取?
接著是簡單的客戶端網?#8230;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
<script src="dwr/interface/Chat.js" type="text/javascript"></script>
<script src="dwr/engine.js" type="text/javascript"></script>
<script src="dwr/util.js" type="text/javascript"></script>
<script type="text/javascript">
function sendMessage() {
var text = DWRUtil.getValue("text");
DWRUtil.setValue("text", "");
Chat.addMessage(text, gotMessages);
}
function gotMessages(messages) {
var chatlog = "";
for (var data in messages) {
chatlog = "<div>" + messages[data].text +
"</div>" + chatlog;
}
DWRUtil.setValue("chatlog", chatlog);
setTimeout("queryMessage()", 2000);
}
function queryMessage() {
Chat.getMessages(gotMessages);
}
</script>
</head>
<body>
<p>
Your Message:
<input id="text"/>
<input type="button" value="Send"
onclick="sendMessage()"/>
</p>
<p>Messages:</p>
<div id="chatlog"></div>
</body>
</html>
當List物g傛_時,它成為gotMessages(messages)中的messages物gQ而messages物g中包?Message物g轉換後對應的JavaScript物gQ由於我們已E設定了ConverterQ所以可以用messages[data].text?取得傛_的訊?#8230;
單抓個畫?#8230;
]]>
摘要Q?/span>本文介绍?/span>Ajax的基本原理,交互q程和与之相关的技术及单的实现ҎQ在此基上给Z一个完整的实例Q以使得能够?/span>Ajax有一个更清楚的理解?/span>
关键字:AjaxQ?/span>JavaScriptQ?/span>DOMQ无h面Q不完全h
引言
计算机桌面应用我们得以用以前不能想象的方式处理大量的复杂数据;Z计算机网l的C/S模式应用使得׃n数据和资源成为现实。然而,正如C/S模式的应用是׃Z不满_机的桌面应用一PZ?/span>C/S模式也心存抱怨了Q?/span>C/S模式除了带给我们数据和资源共享的便利之外Q也l我们带来了令我们(E序开发设计h员)和客户头疼的部v和发布问题。于是,B/S模式应用应运而生Q而且得到了迅速的发展?/span>B/S模式应用W合一定规范的览器作为通用客户端,从而解决了C/S模式中最令h头疼的部|和发布问题。但是,到此q没有结束,B/S虽然解决了应用的部v和发布问题,却因为种U限Ӟ使得应用没有了以前丰富的交互Qƈ且每ơ与服务器的交互都要完全h面Q这是非常糟p和令h不快的。本文讨Z如何解决面完全h和缺乏交互性的问题Q我们用的方法就是―?/span>Ajax?/span>
Ajax
那么Q?/span>Ajax到底是什么呢Q?/span>AjaxQ?/span>Asynchronous JavaScript + XMLQ,卛_?/span>JavaScript + XML的羃写,q只是最初的观点Q最初由Jesse James Garrett创造出来的。但是,Ajax现在的覆盖面已经有了q一步的扩展Q把允许览器与服务器通信而无需h当前面的技术都늛在其中了?/span>
坦率的讲Q?/span>Ajaxq不是什么新鲜玩艺。也是_Ajaxq不是一U全新的技术,而更像一U技巧,是把q去的几U技术y妙结合的技巧。真正与Ajax相关的新名词应该?/span>XMLHttpRequest――一个最早在IE 5中出玎ͼ最q开始在多数览器得到支持的用来实现异步通信的对象。正如前面所_B/S模式是利用浏览器作ؓ光用的客LQ所以要惛_步通讯成ؓ可能Q必要得到览器的支持。如果不是有了浏览器?/span>XMLHttpRequest对象的广泛支持,我们可能不会看到Ajax的今天,更不会看到许多对Ajax的著名应用,?/span>Google MapQ?/span>Google SuggestQ?/span>Ta-da List{?/span>
Ajax的处理过E是怎样的呢Q下图ؓAjax应用的标准处理模式?/span>
数据?/span> XHR 事g Function callback() {//……} 服务器资?/span> 1 2 6 3 5 4
?/span> 1 标准Ajax处理q程
从图中我们可以看出:׃件触发,创徏一?/span>XMLHttpRequest对象Q把HTTPҎQ?/span>Get/PostQ和目标URL以及hq回后的回调函数讄?/span>XMLHttpRequest对象Q通过XMLHttpRequest向服务器发送请求,h发送后l箋响应用户的界面交互,只有{到h真正从服务器q回的时候才调用callback()函数Q对响应数据q行处理?/span>
在这个交互过E中Q涉及到几种我们不得不提的技术:
1Q?nbsp;XHTML?/span>CSS――用来表现标准化;
2Q?/span>DOM――动态的修改文档的内容和l构Q?/span>
3Q?/span>XML――进行数据的交换和处理;
4Q?/span>JavaScript――对上述几种技术进行绑定,使其成ؓ协同工作的整体?/span>
Ajax相关技术及基本原理
1Q?/span>XMLHttpRequest?/span>
XMLHttpRequestQ是我们得以实现异步通讯的根本。最早在IE 5 中以ActiveXlg实现Q最q,Mozilla 1.0?/span>Safari 1.2中实Cؓ本地对象?/span>XMLHttpRequest虽然不是W3C标准Q但却得CFireFox、Safari、Opera、Konqueror、IE{绝大多数浏览器的支持。这׃得Ajax有了今天如火如荼的发展?/span>
用XMLHttpRequestq行异步通讯Q首先必ȝJavaScript创徏一个XMLHttpRequest对象实例。创建XMLHttpRequest对象实例的代码清单如下所C:
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
可以看出Q创建XMLHttpRequest对象相当Ҏ。首先,声明一个全局变量xmlHttp用来保存卛_创徏的XMLHttpRequest对象的引用;然后Q在createXMLHttpRequest()Ҏ中完成具体创建工作。因为IE与其他浏览器对XMLHttpRequest 对象的实现方法不同,因此在创建时Q通过一个分支语句进行判断。如果window.ActiveXObject调用q回trueQ则证明为IE览器,那么通过传?#8220;Microsoft.XMLHTTP”lActiveXObject()来创建XMLHttpRequest对象Q否则就把XMLHttpRequest实现为本地JavaScript对象。XMLHttpRequest对象在不同浏览器上的实现是兼容的Q所以可以用同样的方法访问XMLHttpRequest的方法和属性?/span>
?1 标准XMLHttpRequestҎ
?nbsp; ?/span> |
?nbsp; ?/span> |
abort() getAllResponseHeader() getResponseHeader("Header") open("method", "url") send(content) setRequestHeader("header", "value") |
停止当前h 把HTTPh的所有响应头部作为键/值对q回 q回指定首部的串?/span> 建立Ҏ务器的调?/span> 向服务器发送请?/span> 把指定首部设|ؓ所提供的?/span> |
?2 标准XMLHttpRequest属?/span>
?nbsp; ?/span> |
?nbsp; ?/span> |
onreadystatechange readyState responseText responseXML status statusText |
每个状态改变都会触发这个事件处理器 h的状态:0Q未初始化,1Q正在加载,2Q已加蝲Q?Q交互中Q?Q完?/span> 服务器的响应Q表CZؓ一个文本字W串?/span> 服务器的响应Q表CZؓ一个XML 服务器的HTTP状态码 HTTP状态码的相应文?/span> |
2Q?/span>利用XMLHttpRequest对象发送简单请?/span>
创徏了XMLHttpRequest对象Qƈ了解了XMLHttpRequest对象的方法和属性之后,让我们来看看怎样利用XMLHttpRequest对象发送简单的h。利用XMLHttpRequest对象发送简单请求的基本步骤如下Q?/span>
1Q?nbsp;创徏XMLHttpRequest对象实例?/span>
2Q?nbsp;讑֮XMLHttpRequest对象的回调函敎ͼ利用onreadystatechange属性?/span>
3Q?nbsp;讑֮h属性:讑֮HTTPҎQGET或POSTQ;讑֮目标URL。利用open()Ҏ?/span>
4Q?nbsp;请求发送给服务器。利用send()Ҏ?/span>
3Q?/span>利用DOMҎ务器响应q行处理
前面已经讄了回调函敎ͼ回调函数正是用来处理服务器响应信息的。但是,别忘了我们的最l目的:解决面完全h和缺乏交互性的问题。在服务器对我们的请求信息作出响应后Q我们就得实现页面的无缝更新Q就是无闪烁的更C息)。要实现q一点,那么׃得不提到DOM了?/span>
DOMQDocument Object ModelQ?文档对象模型Q是以面向对象方式描q页面文档的对象模型。DOM中定义了Q与q_和语a无关的,用来表示和修Ҏ档所需的对象、以及这些对象的属性和Ҏ。通过DOMQ我们可以把面上的数据和结构抽象成一个树型表C,q而可以通过DOM中定义的属性和ҎҎ档进行操作,如遍历、编辑等?/span>
q样Q服务器相应信息可以通过DOM的方法和属性,动态的更新到页面的相应节点?/span>
从而用户感觉不到hq程的存在,提高了交互性?/span>
4Q?/span>一个完整的例子
在这里我们给Z个完整的利用Ajax的实例。实例包含两个文ӞRequest.htm和Response.xml。通过Request.htm向服务器发送请求,而Response.xml模仿了从服务器返回的响应。两个文件清单如下:
<!--Request.htm----------------------------------------------------------->
<html>
<head>
<title>Ajax应用实例</title>
<script type="text/javaScript">
var xmlHttp;
var requestType="";
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(theRequestType){
requestType = theRequestType;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET","Response.xml",true);
xmlHttp.send(null);
}
function myCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
if(requestType=="all")
listAll();
else if(requestType=="north")
listNorth();
}
}
}
function listAll(){
var xmlDoc = xmlHttp.responseXML;
var allProvs = xmlDoc.getElementsByTagName("prov");
outputList("all",allProvs);
}
function listNorth(){
var xmlDoc = xmlHttp.responseXML;
var north = xmlDoc.getElementsByTagName("north")[0];
var northProvs = north.getElementsByTagname("prov");
outputList("north",northProvs);
}
function outputList(title,provs){
var out=title;
var currentProv = null;
for(var i=0;i<provs.length;i++){
currentProv = provs[i];
out = out + “<br/>” + currentProv.childNodes[0].nodeValue;
}
document.getElementById(title).innerHTML = out;
}
</script>
</head>
<body>
<h1> Ajax应用实例</h1>
<form action="#">
<input type="button" value="列出所有沿L?
conclick="startRequest('all');"/>
<div id="all"></div>
<input type="button" value="列出江北沿v省市"
conclick="startRequest('north');"/>
<div id="north"></div>
</form>
</body>
</html>
<!--Response.xml---------------------------------------------------------->
<?xml version="1.0"encoding="utf-8" ?>
<provs>
<north>
<prov>辽宁</prov><prov>沛_</prov><prov>天|</prov>
<prov>׃</prov><prov>江苏</prov>
</north>
<south>
<prov>江</prov><prov>徏</prov><prov>q东</prov>
<prov>q西</prov><prov>南</prov><prov>上v</prov>
<prov>台湾</prov><prov>香港</prov><prov>澳门</prov>
</south>
</provs>
结
我们已经了解了Ajax的基本原理和相关的技术。其实,Ajax是通过JavaScript创徏XMLHttpRequest对象Q再由JavaScript调用XMLHttpRequest对象的方法完成异步通信Q然后,再由JavaScript通过DOM的属性和ҎQ完成页面的不完全刷新?/span>
参考文?/span>
1QRyan Asleson , Nathaniel T.Schutta 著金늭译《Ajax基础教程 人民邮电出版C?/span>
2Q张晓龙 ZAjax的web应用 《电脑开发与应用》第19L8?nbsp;17?8?/span>
3Q史胜辉 Ajax技术在WEB客户端开发中的应?《中国管理信息化?006q?月第9L6? 88?0?/span>