锘??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-榧犳爣縐誨埌榪炴帴瀵硅薄涓婏紝婊戝嚭鎻愮ず灞傛晥鏋?
Live Demo婕旂ず
--------------------------------------------------------------------------------
4) Sliding top panel using mootools-浠縡lash鐨勮彍鍗曠Щ鍔ㄦ晥鏋?
Live Demo婕旂ず
--------------------------------------------------------------------------------
5) Create a Slick Tabbed Content Area using CSS & jQuery-tab鏍囩鍒囨崲鍐呭鏍規嵁楂樺害鑷姩緙撳啿縐誨姩鍙樺寲
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()-
鏂囧瓧綰靛悜鎺掓晥鏋?
Checkout the Demo here.婕旂ず
Download it from here.涓嬭澆
--------------------------------------------------------------------------------
11) Drag. Drop. Lock.-
鍙嫋鍔ㄧ殑灞?
Checkout the Live Demo婕旂ず
--------------------------------------------------------------------------------
12) WebAppers Simple Javascript Progress Bar with CSS-榪涘害鏉?鐐逛腑闂? -鎸夐挳鍙互鐩存帴棰勮鏁堟灉錛?
Checkout the Live Demo婕旂ず
Download it from here.涓嬭澆
--------------------------------------------------------------------------------
13) moowheel-鏁版嵁鍥炬爣鐨勫姩鐢繪樉紺烘晥鏋?
object.
Checkout the Live Demo婕旂ず
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
14) Sliding top panel using mootools-
Download tutorial from Here
--------------------------------------------------------------------------------
15) Mocha UI-ajax js浠縲indows妗岄潰鎿嶄綔鐨勬晥鏋滐紝
Checkout the Demo here.婕旂ず
--------------------------------------------------------------------------------
16) ddMenu-
ajax瀹炵幇鍙抽敭鑿滃崟鏁堟灉
Checkout the Demo here.婕旂ず
Download it from here.涓嬭澆
--------------------------------------------------------------------------------
17) googleDrive-google鍦板浘灝忓伐鍏鳳紝瀹炵幇灝忔苯杞﹀湪鍦板浘涓婅椹訛紝鐢ㄦ柟鍚戦敭 鎺у埗杞﹀ご蹇呴』鏈濆悜椹礬鍓嶆柟錛屽線杈逛笂寮灝變細寮涓嶄笅鍘匯?
--------------------------------------------------------------------------------
18) GlassBox-ajax瀹炵幇綾諱技vista緋葷粺 紿楀彛鍗婇忔槑鐨勭幓鐠冩晥鏋?
Checkout the Demo here.婕旂ず
Download it from here.涓嬭澆
--------------------------------------------------------------------------------
19) ProtoFlow-ajax鐩哥墖灞曠ず鏁堟灉錛屽乏鍙蟲粴鍔ㄥ茍鏈夊掑獎鏁堟灉
Checkout the Demo here.婕旂ず
Download it from here.涓嬭澆
--------------------------------------------------------------------------------
20) ASP.NET AJAX AutoComplete Control (Facebook look)-綾諱技google鎼滅儲杈撳叆妗?涓嬫媺鏄劇ず鐩稿叧鍏抽敭瀛楃殑鏁堟灉錛?
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閿欒鎻愮ず錛岀偣鍑繪寜閽?
涓嬫柟鏄劇ず瀵硅瘽紿楀彛
Checkout the Demo here.婕旂ず
Download it from here.涓嬭澆
--------------------------------------------------------------------------------
22) Flexigrid-鏁版嵁琛ㄦ牸table 綰靛悜鐨勨滃垪鈥?鍙互浠縠xcel涓鏍?鎷栧姩
Checkout the Demo here.婕旂ず
Download it from here.涓嬭澆
--------------------------------------------------------------------------------
23) prettyPhoto a jQuery lightbox clone-涓庣幇鍦ㄦ祦琛岀殑ligtbox 鏁堟灉綾諱技錛岀偣灝忓浘錛屽ぇ鍥懼脊鍑猴紝鍛ㄥ洿欏甸潰鍙樼伆鑹插崐閫忔槑銆?
Checkout the Demo here.婕旂ず
Download it from here.涓嬭澆
--------------------------------------------------------------------------------
24) JavaScript Color Fading Script-js瀹炵幇棰滆壊娓愬彉鍔ㄧ敾鏁堟灉錛岄紶鏍囩Щ鍒拌〃鏍?鏂囧瓧涓婏紝棰滆壊緙撴參娓愬彉錛岃屼笉鏄竴鑸琧ss瀹炵幇鐨勯鑹茬洿鎺ュ垏鎹€?
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铏氭嫙鍏ㄦ櫙錛?60搴︾幆緇曞浘鐗囨祻瑙堬紝榧犳爣縐誨埌鍥劇墖涓嬫柟錛屾樉紺哄乏鍙沖強x鍋滄鎸夐挳錛?
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鈥?綆鍗曠殑緗戦〉鐗坉reamweaver錛岀偣鍑誨乏渚у垪鍑虹殑html鍏冪礌,瀹炴椂鍦ㄤ腑闂寸殑html浠g爜閮ㄥ垎鏄劇ず錛屽彲浠ユ嫋鍔ㄦ敼鍙樺厓绱犳墍鍦ㄤ綅緗窡灞炴?鍙充晶鐐筩reat棰勮欏甸潰鏁堟灉
--------------------------------------------------------------------------------
30) The Sliding date-picker-鏃墮棿琛紝鍙互鎷栧姩閫夋嫨鐗瑰畾鏃墮棿孌?
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鐗╀歡濡備笅…
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鎺ュ彈璦婃伅鏂板鑸囨煡瑭紝鍒ゆ柗鐨勬柟寮忔槸妾㈡煡璜嬫眰鍙冩暩task鏄痵end鎴杚uery銆?
Servlet鏈冧互XML鍌沖洖鐩墠List鐣朵腑鐨勮▕鎭紝瀹㈡埗绔彲浠ユ煡瑭㈡垨鎻掑叆鏂拌▕鎭檪錛屽彇寰楃洰鍓峀ist涓殑璦婃伅錛屾帴钁楀湪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>
鍦ㄧ恫闋佷腑錛屼嬌鐢ㄨ呭彲浠ュ湪杓稿叆璦婃伅寰屾寜涓嬫寜閳曢佸嚭璩囪▕錛屼甫鍦╔ML鍥炴噳鍙栧緱鏅傦紝灝囪▕鎭互涓鍒椾竴鍒楃殑琛ㄦ牸鏂瑰紡欏ず鍑轟締錛屽彟澶栭倓璦畾浜嗛辨湡鎬х殑杓錛屽嵆浣夸笉杓稿叆鏂拌▕鎭紝涔熷彲浠ラ辨湡鎬х殑鍙栧緱鏂扮殑鑱婂ぉ璦婃伅…
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;
鐩存帴鐢ˋJAX錛屽緦绔敤JSP/Servlet錛屾偍瑕佸皪璜嬫眰鍙冩暩鍋氫簺鍒ゆ柗錛岀湅鐪嬫槸鏂板璦婃伅鎴栨煡瑭紝涓﹁鑷杓稿嚭XML錛屾湁鐨勬矑鐨?#8230;
鏀規垚DWR鐨勮┍錛屽氨寰堢啊鍠簡錛屽鍊嬬啊鍠殑Java鐗╀歡…
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;
}
}
鎺ヨ憲…鍦╠wr.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>
浣跨敤鑰呭彇寰楄▕鎭檪錛屾槸鐩存帴鍌沖洖List鐗╀歡錛岃孡ist涓鐨勬槸Message鐗╀歡錛孧essage鐗╀歡鏄嚜璦傜墿浠訛紝conterver璦畾鐐?bean錛岃〃紺篋WR鏈冭嚜鍕曞皣Message鐨刧etter鍚嶇ū杞夋彌鐐哄偝鍥炲鎴剁鐨凧avaScript鐗╀歡涓殑灞э紝渚嬪Message涓湁 getText()錛屽墖鍦ㄥ鎴剁鍙互鐢╩essage.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>
鐣禠ist鐗╀歡鍌沖洖鏅傦紝瀹冩垚鐐篻otMessages(messages)涓殑messages鐗╀歡錛岃宮essages鐗╀歡涓寘鎷?Message鐗╀歡杞夋彌寰屽皪鎳夌殑JavaScript鐗╀歡錛岀敱鏂兼垜鍊戝凡綞撹ō瀹氫簡Converter錛屾墍浠ュ彲浠ョ敤messages[data].text渚?鍙栧緱鍌沖洖鐨勮▕鎭?#8230;
綈″柈鎶撳嬬暙闈?#8230;
]]>
鎽樿錛?/span>鏈枃浠嬬粛浜?/span>Ajax鐨勫熀鏈師鐞嗭紝浜や簰榪囩▼鍜屼笌涔嬬浉鍏崇殑鎶鏈強綆鍗曠殑瀹炵幇鏂規硶錛屽湪姝ゅ熀紜涓婄粰鍑轟簡涓涓畬鏁寸殑瀹炰緥錛屼互浣垮緱鑳藉瀵?/span>Ajax鏈変竴涓洿娓呮鐨勭悊瑙c?/span>
鍏抽敭瀛楋細Ajax錛?/span>JavaScript錛?/span>DOM錛屾棤鍒鋒柊欏甸潰錛屼笉瀹屽叏鍒鋒柊
寮曡█
璁$畻鏈烘闈㈠簲鐢ㄤ嬌鎴戜滑寰椾互鐢ㄤ互鍓嶄笉鑳芥兂璞$殑鏂瑰紡澶勭悊澶ч噺鐨勫鏉傛暟鎹紱鍩轟簬璁$畻鏈虹綉緇滅殑C/S妯″紡搴旂敤浣垮緱鍏變韓鏁版嵁鍜岃祫婧愭垚涓虹幇瀹炪傜劧鑰岋紝姝eC/S妯″紡鐨勫簲鐢ㄦ槸鐢變簬浜轟滑涓嶆弧瓚沖崟鏈虹殑妗岄潰搴旂敤涓鏍鳳紝浜轟滑瀵?/span>C/S妯″紡涔熷績瀛樻姳鎬ㄤ簡錛?/span>C/S妯″紡闄や簡甯︾粰鎴戜滑鏁版嵁鍜岃祫婧愬叡浜殑渚垮埄涔嬪錛屼篃緇欐垜浠甫鏉ヤ簡浠ゆ垜浠紙紼嬪簭寮鍙戣璁′漢鍛橈級鍜屽鎴峰ご鐤肩殑閮ㄧ講鍜屽彂甯冮棶棰樸備簬鏄紝B/S妯″紡搴旂敤搴旇繍鑰岀敓錛岃屼笖寰楀埌浜嗚繀閫熺殑鍙戝睍銆?/span>B/S妯″紡搴旂敤絎﹀悎涓瀹氳鑼冪殑嫻忚鍣ㄤ綔涓洪氱敤瀹㈡埛绔紝浠庤岃В鍐充簡C/S妯″紡涓渶浠や漢澶寸柤鐨勯儴緗插拰鍙戝竷闂銆備絾鏄紝鍒版騫舵病鏈夌粨鏉燂紝B/S铏界劧瑙e喅浜嗗簲鐢ㄧ殑閮ㄧ講鍜屽彂甯冮棶棰橈紝鍗村洜涓虹縐嶉檺鍒訛紝浣垮緱搴旂敤娌℃湁浜嗕互鍓嶄赴瀵岀殑浜や簰錛屽茍涓旀瘡嬈′笌鏈嶅姟鍣ㄧ殑浜や簰閮借瀹屽叏鍒鋒柊欏甸潰錛岃繖鏄潪甯哥碂緋曞拰浠や漢涓嶅揩鐨勩傛湰鏂囪璁轟簡濡備綍瑙e喅欏甸潰瀹屽叏鍒鋒柊鍜岀己涔忎氦浜掓х殑闂錛屾垜浠敤鐨勬柟娉曞氨鏄曗?/span>Ajax銆?/span>
Ajax
閭d箞錛?/span>Ajax鍒板簳鏄粈涔堝憿錛?/span>Ajax錛?/span>Asynchronous JavaScript + XML錛夛紝鍗沖紓姝?/span>JavaScript + XML鐨勭緝鍐欙紝榪欏彧鏄渶鍒濈殑瑙傜偣錛屾渶鍒濈敱Jesse James Garrett鍒涢犲嚭鏉ョ殑銆備絾鏄紝Ajax鐜板湪鐨勮鐩栭潰宸茬粡鏈変簡榪涗竴姝ョ殑鎵╁睍錛屾妸鍏佽嫻忚鍣ㄤ笌鏈嶅姟鍣ㄩ氫俊鑰屾棤闇鍒鋒柊褰撳墠欏甸潰鐨勬妧鏈兘娑電洊鍦ㄥ叾涓簡銆?/span>
鍧︾巼鐨勮錛?/span>Ajax騫朵笉鏄粈涔堟柊椴滅帺鑹恒備篃灝辨槸璇達紝Ajax騫朵笉鏄竴縐嶅叏鏂扮殑鎶鏈紝鑰屾洿鍍忎竴縐嶆妧宸э紝鏄妸榪囧幓鐨勫嚑縐嶆妧鏈閥濡欑粨鍚堢殑鎶宸с傜湡姝d笌Ajax鐩稿叧鐨勬柊鍚嶈瘝搴旇鏄?/span>XMLHttpRequest鈥曗曚竴涓渶鏃╁湪IE 5涓嚭鐜幫紝鏈榪戝紑濮嬪湪澶氭暟嫻忚鍣ㄥ緱鍒版敮鎸佺殑鐢ㄦ潵瀹炵幇寮傛閫氫俊鐨勫璞°傛濡傚墠闈㈡墍璇達紝B/S妯″紡鏄埄鐢ㄦ祻瑙堝櫒浣滀負鍏墮氱敤鐨勫鎴風錛屾墍浠ヨ鎯沖紓姝ラ氳鎴愪負鍙兘錛屽繀欏昏寰楀埌嫻忚鍣ㄧ殑鏀寔銆傚鏋滀笉鏄湁浜嗘祻瑙堝櫒瀵?/span>XMLHttpRequest瀵硅薄鐨勫箍娉涙敮鎸侊紝鎴戜滑鍙兘涓嶄細鐪嬪埌Ajax鐨勪粖澶╋紝鏇翠笉浼氱湅鍒拌澶氬Ajax鐨勮憲鍚嶅簲鐢紝濡?/span>Google Map錛?/span>Google Suggest錛?/span>Ta-da List絳夈?/span>
Ajax鐨勫鐞嗚繃紼嬫槸鎬庢牱鐨勫憿錛熶笅鍥句負Ajax搴旂敤鐨勬爣鍑嗗鐞嗘ā寮忋?/span>
鏁版嵁搴?/span> XHR 浜嬩歡 Function callback() {//……} 鏈嶅姟鍣ㄨ祫婧?/span> 1 2 6 3 5 4
鍥?/span> 1 鏍囧噯Ajax澶勭悊榪囩▼
浠庡浘涓垜浠彲浠ョ湅鍑猴細鐢變簨浠惰Е鍙戯紝鍒涘緩涓涓?/span>XMLHttpRequest瀵硅薄錛屾妸HTTP鏂規硶錛?/span>Get/Post錛夊拰鐩爣URL浠ュ強璇鋒眰榪斿洖鍚庣殑鍥炶皟鍑芥暟璁劇疆鍒?/span>XMLHttpRequest瀵硅薄錛岄氳繃XMLHttpRequest鍚戞湇鍔″櫒鍙戦佽姹傦紝璇鋒眰鍙戦佸悗緇х畫鍝嶅簲鐢ㄦ埛鐨勭晫闈氦浜掞紝鍙湁絳夊埌璇鋒眰鐪熸浠庢湇鍔″櫒榪斿洖鐨勬椂鍊欐墠璋冪敤callback()鍑芥暟錛屽鍝嶅簲鏁版嵁榪涜澶勭悊銆?/span>
鍦ㄨ繖涓氦浜掕繃紼嬩腑錛屾秹鍙婂埌鍑犵鎴戜滑涓嶅緱涓嶆彁鐨勬妧鏈細
1錛?nbsp;XHTML鍜?/span>CSS鈥曗曠敤鏉ヤ嬌琛ㄧ幇鏍囧噯鍖栵紱
2錛?/span>DOM鈥曗曞姩鎬佺殑淇敼鏂囨。鐨勫唴瀹瑰拰緇撴瀯錛?/span>
3錛?/span>XML鈥曗曡繘琛屾暟鎹殑浜ゆ崲鍜屽鐞嗭紱
4錛?/span>JavaScript鈥曗曞涓婅堪鍑犵鎶鏈繘琛岀粦瀹氾紝浣垮叾鎴愪負鍗忓悓宸ヤ綔鐨勬暣浣撱?/span>
Ajax鐩稿叧鎶鏈強鍩烘湰鍘熺悊
1錛?/span>XMLHttpRequest綆浠?/span>
XMLHttpRequest錛屾槸鎴戜滑寰椾互瀹炵幇寮傛閫氳鐨勬牴鏈傛渶鏃╁湪IE 5 涓互ActiveX緇勪歡瀹炵幇錛涙渶榪戯紝Mozilla 1.0鍜?/span>Safari 1.2涓疄鐜頒負鏈湴瀵硅薄銆?/span>XMLHttpRequest铏界劧涓嶆槸W3C鏍囧噯錛屼絾鍗村緱鍒頒簡FireFox銆丼afari銆丱pera銆並onqueror銆両E絳夌粷澶у鏁版祻瑙堝櫒鐨勬敮鎸併傝繖灝變嬌寰桝jax鏈変簡浠婂ぉ濡傜伀濡傝嵓鐨勫彂灞曘?/span>
鐢╔MLHttpRequest榪涜寮傛閫氳錛岄鍏堝繀欏葷敤JavaScript鍒涘緩涓涓猉MLHttpRequest瀵硅薄瀹炰緥銆傚垱寤篨MLHttpRequest瀵硅薄瀹炰緥鐨勪唬鐮佹竻鍗曞涓嬫墍紺猴細
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
鍙互鐪嬪嚭錛屽垱寤篨MLHttpRequest瀵硅薄鐩稿綋瀹規槗銆傞鍏堬紝澹版槑涓涓叏灞鍙橀噺xmlHttp鐢ㄦ潵淇濆瓨鍗沖皢鍒涘緩鐨刋MLHttpRequest瀵硅薄鐨勫紩鐢紱鐒跺悗錛屽湪createXMLHttpRequest()鏂規硶涓畬鎴愬叿浣撳垱寤哄伐浣溿傚洜涓篒E涓庡叾浠栨祻瑙堝櫒瀵筙MLHttpRequest 瀵硅薄鐨勫疄鐜版柟娉曚笉鍚岋紝鍥犳鍦ㄥ垱寤烘椂錛岄氳繃涓涓垎鏀鍙ヨ繘琛屽垽鏂傚鏋渨indow.ActiveXObject璋冪敤榪斿洖true錛屽垯璇佹槑涓篒E嫻忚鍣紝閭d箞灝遍氳繃浼犻?#8220;Microsoft.XMLHTTP”緇橝ctiveXObject()鏉ュ垱寤篨MLHttpRequest瀵硅薄錛屽惁鍒欏氨鎶奨MLHttpRequest瀹炵幇涓烘湰鍦癑avaScript瀵硅薄銆俋MLHttpRequest瀵硅薄鍦ㄤ笉鍚屾祻瑙堝櫒涓婄殑瀹炵幇鏄吋瀹圭殑錛屾墍浠ュ彲浠ョ敤鍚屾牱鐨勬柟娉曡闂甔MLHttpRequest鐨勬柟娉曞拰灞炴с?/span>
琛?1 鏍囧噯XMLHttpRequest鏂規硶
鏂?nbsp; 娉?/span> |
璇?nbsp; 鏄?/span> |
abort() getAllResponseHeader() getResponseHeader("Header") open("method", "url") send(content) setRequestHeader("header", "value") |
鍋滄褰撳墠璇鋒眰 鎶奌TTP璇鋒眰鐨勬墍鏈夊搷搴斿ご閮ㄤ綔涓洪敭/鍊煎榪斿洖 榪斿洖鎸囧畾棣栭儴鐨勪覆鍊?/span> 寤虹珛瀵規湇鍔″櫒鐨勮皟鐢?/span> 鍚戞湇鍔″櫒鍙戦佽姹?/span> 鎶婃寚瀹氶閮ㄨ緗負鎵鎻愪緵鐨勫?/span> |
琛?2 鏍囧噯XMLHttpRequest灞炴?/span>
灞?nbsp; 鎬?/span> |
璇?nbsp; 鏄?/span> |
onreadystatechange readyState responseText responseXML status statusText |
姣忎釜鐘舵佹敼鍙橀兘浼氳Е鍙戣繖涓簨浠跺鐞嗗櫒 璇鋒眰鐨勭姸鎬侊細0錛嶆湭鍒濆鍖栵紝1錛嶆鍦ㄥ姞杞斤紝2錛嶅凡鍔犺澆錛?錛嶄氦浜掍腑錛?錛嶅畬鎴?/span> 鏈嶅姟鍣ㄧ殑鍝嶅簲錛岃〃紺轟負涓涓枃鏈瓧絎︿覆鍊?/span> 鏈嶅姟鍣ㄧ殑鍝嶅簲錛岃〃紺轟負涓涓猉ML 鏈嶅姟鍣ㄧ殑HTTP鐘舵佺爜 HTTP鐘舵佺爜鐨勭浉搴旀枃鏈?/span> |
2錛?/span>鍒╃敤XMLHttpRequest瀵硅薄鍙戦佺畝鍗曡姹?/span>
鍒涘緩浜哫MLHttpRequest瀵硅薄錛屽茍浜嗚В浜哫MLHttpRequest瀵硅薄鐨勬柟娉曞拰灞炴т箣鍚庯紝璁╂垜浠潵鐪嬬湅鎬庢牱鍒╃敤XMLHttpRequest瀵硅薄鍙戦佺畝鍗曠殑璇鋒眰銆傚埄鐢╔MLHttpRequest瀵硅薄鍙戦佺畝鍗曡姹傜殑鍩烘湰姝ラ濡備笅錛?/span>
1錛?nbsp;鍒涘緩XMLHttpRequest瀵硅薄瀹炰緥銆?/span>
2錛?nbsp;璁懼畾XMLHttpRequest瀵硅薄鐨勫洖璋冨嚱鏁幫紝鍒╃敤onreadystatechange灞炴с?/span>
3錛?nbsp;璁懼畾璇鋒眰灞炴э細璁懼畾HTTP鏂規硶錛圙ET鎴朠OST錛夛紱璁懼畾鐩爣URL銆傚埄鐢╫pen()鏂規硶銆?/span>
4錛?nbsp;灝嗚姹傚彂閫佺粰鏈嶅姟鍣ㄣ傚埄鐢╯end()鏂規硶銆?/span>
3錛?/span>鍒╃敤DOM瀵規湇鍔″櫒鍝嶅簲榪涜澶勭悊
鍓嶉潰宸茬粡璁劇疆浜嗗洖璋冨嚱鏁幫紝鍥炶皟鍑芥暟姝f槸鐢ㄦ潵澶勭悊鏈嶅姟鍣ㄥ搷搴斾俊鎭殑銆備絾鏄紝鍒繕浜嗘垜浠殑鏈緇堢洰鐨勶細瑙e喅欏甸潰瀹屽叏鍒鋒柊鍜岀己涔忎氦浜掓х殑闂銆傚湪鏈嶅姟鍣ㄥ鎴戜滑鐨勮姹備俊鎭綔鍑哄搷搴斿悗錛屾垜浠氨寰楀疄鐜伴〉闈㈢殑鏃犵紳鏇存柊錛堝氨鏄棤闂儊鐨勬洿鏂頒俊鎭級銆傝瀹炵幇榪欎竴鐐癸紝閭d箞灝變笉寰椾笉鎻愬埌DOM浜嗐?/span>
DOM錛圖ocument Object Model錛?鏂囨。瀵硅薄妯″瀷錛屾槸浠ラ潰鍚戝璞℃柟寮忔弿榪伴〉闈㈡枃妗g殑瀵硅薄妯″瀷銆侱OM涓畾涔変簡錛屼笌騫沖彴鍜岃璦鏃犲叧鐨勶紝鐢ㄦ潵琛ㄧず鍜屼慨鏀規枃妗f墍闇鐨勫璞°佷互鍙婅繖浜涘璞$殑灞炴у拰鏂規硶銆傞氳繃DOM錛屾垜浠彲浠ユ妸欏甸潰涓婄殑鏁版嵁鍜岀粨鏋勬娊璞℃垚涓涓爲鍨嬭〃紺猴紝榪涜屽彲浠ラ氳繃DOM涓畾涔夌殑灞炴у拰鏂規硶瀵規枃妗h繘琛屾搷浣滐紝濡傞亶鍘嗐佺紪杈戠瓑銆?/span>
榪欐牱錛屾湇鍔″櫒鐩稿簲淇℃伅灝卞彲浠ラ氳繃DOM鐨勬柟娉曞拰灞炴э紝鍔ㄦ佺殑鏇存柊鍒伴〉闈㈢殑鐩稿簲鑺傜偣銆?/span>
浠庤屼嬌鐢ㄦ埛鎰熻涓嶅埌鍒鋒柊榪囩▼鐨勫瓨鍦紝鎻愰珮浜嗕氦浜掓с?/span>
4錛?/span>涓涓畬鏁寸殑渚嬪瓙
鍦ㄨ繖閲屾垜浠粰鍑轟竴涓畬鏁寸殑鍒╃敤Ajax鐨勫疄渚嬨傚疄渚嬪寘鍚袱涓枃浠訛細Request.htm鍜孯esponse.xml銆傞氳繃Request.htm鍚戞湇鍔″櫒鍙戦佽姹傦紝鑰孯esponse.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="鍒楀嚭鎵鏈夋部嫻風渷甯?
conclick="startRequest('all');"/>
<div id="all"></div>
<input type="button" value="鍒楀嚭姹熷寳娌挎搗鐪佸競"
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>騫夸笢</prov>
<prov>騫胯タ</prov><prov>嫻峰崡</prov><prov>涓婃搗</prov>
<prov>鍙版咕</prov><prov>棣欐腐</prov><prov>婢抽棬</prov>
</south>
</provs>
灝忕粨
鎴戜滑宸茬粡浜嗚В浜咥jax鐨勫熀鏈師鐞嗗拰鐩稿叧鐨勬妧鏈傚叾瀹烇紝Ajax灝辨槸閫氳繃JavaScript鍒涘緩XMLHttpRequest瀵硅薄錛屽啀鐢盝avaScript璋冪敤XMLHttpRequest瀵硅薄鐨勬柟娉曞畬鎴愬紓姝ラ氫俊錛涚劧鍚庯紝鍐嶇敱JavaScript閫氳繃DOM鐨勫睘鎬у拰鏂規硶錛屽畬鎴愰〉闈㈢殑涓嶅畬鍏ㄥ埛鏂般?/span>
鍙傝冩枃鐚?/span>
1錛嶳yan Asleson , Nathaniel T.Schutta 钁楅噾鐏電瓑璇戙夾jax鍩虹鏁欑▼ 浜烘皯閭數鍑虹増紺?/span>
2錛庡紶鏅撻緳 鍩轟簬Ajax鐨剋eb搴旂敤 銆婄數鑴戝紑鍙戜笌搴旂敤銆嬬19鍗風8鏈?nbsp;17锝?8欏?/span>
3錛庡彶鑳滆緣 Ajax鎶鏈湪WEB瀹㈡埛绔紑鍙戜腑鐨勫簲鐢?銆婁腑鍥界鐞嗕俊鎭寲銆?006騫?鏈堢9鍗風6鏈? 88锝?0欏?/span>