ʹÓÃjQuery¼ò»¯Ajax¿ª·¢——Ajax¿ª·¢ÈëÃÅ
jQueryÊÇÒ»¸ö¿ÉÒÔ¼ò»¯ JavaScript?ÒÔ¼°AJAX£¨Asynchronous JavaScript
+XML£¬Òì²½JavascriptºÍXML£©±à³ÌµÄJavascript¿â¡£²»Í¬ÓÚÆäËûµÄJavascript¿â£¬jQueryÓÐËû×Ô¼ºµÄÕÜѧ£¬Ê¹Äã¿É
ÒԺܼòµ¥µÄ±àд´úÂë¡£ÕâÆªÎÄÕÂ¾Í»á´øÁìÄã¼ûʶһÏÂjQueryµÄÕÜѧ£¬Ì½ÌÖÒ»ÏÂËûµÄÌØÐÔÒÔ¼°¹¦ÄÜ£¬²¢ÇÒ»á×öһЩajaxµÄʾÀý£¬ÒÔ¼°ÈçºÎʹÓÃplug-
in£¨²å¼þ£©À´À©Õ¹jQuery¡£
1. ʲôÊÇjQuery£¿
jQueryÊǸöºÜÓÅÐãµÄ
Javascript¿â£¬Ëüµ®ÉúÓÚ2006Ä꣬³ö×ÔJohnResigÖ®ÊÖ¡£²»¹ÜÄãÊÇÒ»¸öjavascriptÐÂÊÖ£¬µ«ÊÇÈ´Ïë³¢ÊÔÒ»ÏÂ
DOM£¨Document
ObjectModel£©ÒÔ¼°AjaxµÄ·±ÔÓ£¬ÒÖ»òÄãÊǸöjavascriptר¼Ò¼¶ÈËÎµ«ÊÇÒѾÑá¾ëÁË·´¸´µÄÖØ¸´ÄÇÎÞζµÄDOMÒÔ¼°Ajax½Å
±¾£¬jQuery¶¼½«ÊÇÄãµÄ²»¶þÑ¡Ôñ¡£
jQuery»á°ïÖúÄã±£³Ö´úÂëµÄ¼òµ¥ºÍ¼ò½à¡£Äã²»±ØÔÙȥдһ´ó¶ÑÖØ¸´µÄÑ»·»òÕßÊÇDOMµ÷Óýű¾£¬
ʹÓÃjQuery£¬Ä㽫ºÜ¿ìÕÒµ½¹Ø¼üµã£¬²¢ÇÒ¿ÉÒÔÒÔ×îÉٵĴúÂë±í´ïÄãµÄ˼Ïë¡£
jQueryµÄÕÜѧÆäʵºÜµ¥Ò»£º¼òµ¥¡¢¿ÉÖØÓᣵ±ÄãÀí½â²¢ÇÒ
ÈÏͬÕâÖÖ˼ÏëµÄʱºò£¬Äã¾Í¿ÉÒÔ¿ªÊ¼Ìå»áÒ»ÏÂʹÓÃjQueryÄÜÈÃÄãµÄ±à³Ì±äµÃ¶àôÇáËÉÓä¿ìÁË£¡
2. һЩ¼òµ¥¸ÅÄî
Õâ
ÀïÊǸö¼òµ¥µÄÀý×Ó£¬ÏòÄãչʾjQueryÈçºÎÓ°ÏìÄã±àдµÄ´úÂë¡£×öµÄÊÂÇéÆäʵºÜ¼òµ¥£¬±ÈÈç¶ÔÒ³ÃæÉÏÄ³Ò»ÇøÓòÄÚµÄËùÓÐÁ´½Ó¶¼Ìí¼ÓÒ»¸öclickÏìӦʼþ£¬Äã
¿ÉÒÔʹÓÃÒ»°ãµÄJavascriptÒÔ¼°DOMÀ´Ð´£¬´úÂë¼ûListing1£º
[url=]Listing 1. DOM
scripting without jQuery
[/url]
var external_links =
document.getElementById('external_links');
var links =
external_links.getElementsByTagName('a');
for (var i=0;i <
links.length;i++) {
var link = links.item(i);
link.onclick
= function() {
return confirm('You are going to visit: ' + this.href);
};
}
Èç
¹ûʹÓÃjQueryµÄ»°ÊµÏÖÈçÏ£º
[url=]Listing 2. DOM scripting with jQuery
[/url]
$('#external_links a').click(function() {
return
confirm('You are going to visit: ' + this.href);
});
ºÜ¾ªÑÈ£¬ÊÇ
°É£¿Ê¹ÓÃjQueryµÄ»°£¬Äã¿ÉÒԺܿìÕÒµ½¹Ø¼üµã£¬²¢ÇÒÖ»ÐèÒª±í´ïÄãÐèÒª±í´ïµÄ£¬
¶ø²»ÐèÒªÂÞÀïÂÞà¡£²»ÐèÒª¶ÔÕâÐ©ÔªËØ½øÐÐÑ»·£¬click()º¯
Êý¿ÉÒÔ´¦ÀíºÃÕâÒ»ÇС£¶øÇÒÄ㲻Ҫл̫¶àµÄ²Ù×÷DOMµÄ´úÂ룬
ÄãÐèÒªµÄ½ö½öÊÇʹÓúÜÉÙµÄ×Ö·û¶¨ÒåÄãÒªÕÒµÄÄǸöÔªËØ¡£
À´¿´Ò»ÏÂÕâ¶Î´ú
ÂëÊÇÈçºÎ¹¤×÷µÄ£¬ÓеãС¼¼ÇÉ¡£Ê×ÏÈ£¬¿´µ½$()º¯Êý--jQueryÀï×îÓÐÓõÄ×î
Ïà¹ØÎĵµ£º
XMLHttpRequest ¶ÔÏóʹ AJAX ³ÉΪ¿ÉÄÜ¡£
XMLHttpRequest
XMLHttpRequest ¶ÔÏóÊÇ AJAX µÄ¹Ø¼ü¡£
¸Ã¶ÔÏóÔÚ Internet Explorer 5.5 Óë 2000 Äê 7 Ô·¢²¼Ö®ºó¾ÍÒѾ¿ÉÓÃÁË£¬µ«ÊÇÔÚ 2005 ÈËÃÇ¿ªÊ¼ÌÖÂÛ AJAX ºÍ Web 2.0 ֮ǰ£¬Õâ¸ö¶ÔÏó²¢Ã»Óеõ½³ä·ÖµÄÈÏʶ¡£
´´½¨ XMLHttpRequest ¶ÔÏó
²»Í¬µÄä¯ÀÀÆ÷ʹÓò»Í¬µÄ·½·¨À´´´½¨ ......
AjaxÖÐsend·½·¨²ÎÊýµÄʹÓÃ
Ò»°ãÇé¿öÏ£¬Ê¹ÓÃAjaxÌá½»µÄ²ÎÊý¶àÊÇЩ¼òµ¥µÄ×Ö·û´®£¬¿ÉÒÔÖ±½ÓʹÓÃGET·½·¨½«ÒªÌá½»µÄ²ÎÊýдµ½open·½·¨µÄurl²ÎÊýÖУ¬´Ëʱsend·½·¨µÄ²ÎÊýΪnull¡£
ÀýÈç £º
var url = "login.jsp?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url, ......
¸Õ¿ªÊ¼Ñ§Ajax£¬¿´µ½ºÜ¶àÍøÉϵĴúÂë¶¼ÓÃGet·½·¨Ìá½»²ÎÊý£¬TomcatĬÈÏISO±àÂëʵÔÚÊÇÈÃÈËÍ·Í´£¬¶Ô¸¶ÂÒÂëÎÒ¶¼ÊÇÓùýÂËÆ÷×ö×Ö·û±àÂë¹ýÂ˵ģ¬Get·½·¨¹ýÂËÆ÷¼àÌý²»µ½£¬ËùÒÔÎÒһֱϲ»¶Ê¹ÓÃPost·½·¨£¬ÏÂÃæ¶ÔAjax GetºÍPost·½·¨×öÒ»¶Ô±È
GET£º
<mce:script type="text/javascript"><!--
var xmlHttpRequest;
......
ʲôÊÇ AJAX?
¡¡¡¡AJAX (Òì²½ JavaScript ºÍ XML) ÊǸöвúÉúµÄÊõÓï,רΪÃèÊöJavaScriptµÄÁ½ÏîÇ¿´óÐÔÄÜ.ÕâÁ½ÏîÐÔÄÜÔÚ¶àÄêÀ´Ò»Ö±±»ÍøÂ翪·¢ÕßËùºöÂÔ,Ö±µ½×î½üGmail, Google suggestºÍgoogle MapsµÄºá¿Õ³öÊÀ²ÅʹÈËÃÇ¿ªÊ¼Òâʶµ½ÆäÖØÒªÐÔ.
¡¡¡¡ÕâÁ½Ïî±»ºöÊÓµÄÐÔÄÜÊÇ:
¡¡¡¡ÎÞÐèÖØÐÂ×°ÔØÕû¸öÒ³Ãæ±ãÄÜÏò·þÎñÆ÷·¢ËÍÇëÇó.
¡¡¡ ......