ʹÓà jQuery ¼ò»¯ Ajax ¿ª·¢
¿´¿´ Ajax ºÍ DOM ½Å±¾±à³Ì¾¿¾¹Óжà¼òµ¥
ÎĵµÑ¡Ïî
½«´ËÒ³×÷Ϊµç×ÓÓʼþ·¢ËÍ
¼¶±ð£º Öм¶
Jesse Skinner, Web ¿ª·¢ÈËÔ±, Freelance
2007 Äê 5 ÔÂ 16 ÈÕ
jQuery ÊÇÒ»¸öJavaScript ¿â£¬ËüÓÐÖúÓÚ¼ò»¯ JavaScript™ ÒÔ¼° Asynchronous JavaScript + XML (Ajax) ±à³Ì¡£ÓëÀàËÆµÄ JavaScript ¿â²»Í¬£¬jQuery ¾ßÓжÀÌØµÄ»ù±¾ÔÀí£¬¿ÉÒÔ¼ò½àµØ±íʾ³£¼ûµÄ¸´ÔÓ´úÂ롣ѧϰ jQuery »ù±¾ÔÀí£¬Ì½Ë÷ÆäÌØÐԺ͹¦ÄÜ£¬Ö´ÐÐһЩ³£¼ûµÄ Ajax ÈÎÎñ²¢ÕÆÎÕÈçºÎʹÓòå¼þÀ©Õ¹ jQuery¡£
jQuery ÊÇʲô£¿
jQuery ÓÉ John Resig ´´½¨ÓÚ 2006 Äê³õ£¬¶ÔÓÚÈκÎʹÓà JavaScript ´úÂëµÄ³ÌÐòÔ±À´Ëµ£¬ËüÊÇÒ»¸ö·Ç³£ÓÐÓÃµÄ JavaScript ¿â¡£ÎÞÂÛÄúÊǸոսӴ¥ JavaScript ÓïÑÔ£¬²¢ÇÒÏ£Íû»ñµÃÒ»¸öÄܽâ¾öÎĵµ¶ÔÏóÄ£ÐÍ£¨Document Object Model£¬DOM£©½Å±¾ºÍ Ajax ¿ª·¢ÖÐһЩ¸´ÔÓÎÊÌâµÄ¿â£¬»¹ÊÇ×÷Ϊһ¸öÑá¾ëÁË DOM ½Å±¾ºÍ Ajax ¿ª·¢ÖÐÎÞÁĵÄÖØ¸´¹¤×÷µÄ×ÊÉî JavaScript ר¼Ò£¬jQuery ¶¼»áÊÇÄúµÄÊ×Ñ¡¡£
jQuery ÄܰïÖúÄú±£Ö¤´úÂë¼ò½àÒ×¶Á¡£ÄúÔÙÒ²²»±Ø±àд´ó¶ÑÖØ¸´µÄÑ»·´úÂëºÍ DOM ½Å±¾¿âµ÷ÓÃÁË¡£Ê¹Óà jQuery£¬Äú¿ÉÒÔ°ÑÎÕÎÊÌâµÄÒªµã£¬²¢Ê¹Óþ¡¿ÉÄÜ×îÉٵĴúÂëʵÏÖÄúÏëÒªµÄ¹¦ÄÜ¡£
ºÁÎÞÒÉÎÊ£¬jQuery µÄÔÀíÊǶÀÒ»ÎÞ¶þµÄ£ºËüµÄÄ¿µÄ¾ÍÊDZ£Ö¤´úÂë¼ò½à²¢¿ÉÖØÓᣵ±ÄúÀí½â²¢Ìå»áÕâÒ»ÔÀíºó£¬±ã¿ÉÒÔ¿ªÊ¼Ñ§Ï°±¾½Ì³ÌÁË£¬¿´¿´ jQuery ¶ÔÎÒÃǵıà³Ì·½Ê½ÓжàÉٸĽø°É¡£
»ØÒ³Ê×
һЩ¼òµ¥µÄ´úÂë¼ò»¯
ÏÂÃæÊÇÒ»¸ö¼òµ¥Ê¾Àý£¬Ëü˵Ã÷ÁË jQuery ¶Ô´úÂëµÄÓ°Ïì¡£ÒªÖ´ÐÐÒ»Ð©ÕæÕý¼òµ¥ºÍ³£¼ûµÄÈÎÎñ£¬±È·½ËµÎªÒ³ÃæµÄÄ³Ò»ÇøÓòÖеÄÿ¸öÁ´½Ó¸½¼ÓÒ»¸öµ¥»÷£¨click£©Ê¼þ£¬Äú¿ÉÒÔʹÓô¿ JavaScript ´úÂëºÍ DOM ½Å±¾À´ÊµÏÖ£¬Èç Çåµ¥ 1 Ëùʾ¡£
Çåµ¥ 1. ûÓÐʹÓà jQuery µÄ DOM ½Å±¾
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);
};
}
Çåµ¥ 2 ÏÔʾÁËʹÓà jQuery ʵÏÖµÄÏàͬµÄ¹¦ÄÜ¡£
Çåµ¥ 2. ʹÓÃÁË jQuery µÄ DOM ½Å±¾
Ïà¹ØÎĵµ£º
ΪÁËÈø÷ΪÄܹ»Á˽âʲôÊÇAJAX£¬ÒÔÏÂÊÇÒ»¸öAJAXµÄÊÖ¹¤·¶Àý£¨¼´²»ÒýÓÃÈκεÄLibrary»òAJAX
framework£©£¬´Ë·¶ÀýÆÄΪ¾«ÒªÒ×¶®£¬Æä×÷ÓÃÖ÷ÒªÊÇ͸¹ýClient ¶ËµÄBrowserÀ´¼´Ê±¼à¿ØWeb ·þÎñÆ÷×ÊÔ´»òЧÄܱ仯£¬¸÷λֻҪ×ö¹ý
Ò»±é·¶Àý¾ÍÄܹ»Á˽âAJAXÔÚÍøÒ³¿ª·¢ÉÏÊǶàô¾ßÓÐÍþÁ¦ÁË¡£
ÏÈÀ´¿´¿´Ð§¹ûͼ£º
±¾·¶ÀýÊÇÒ»¸ö¼òµ¥µÄA ......
Ò»¡¢ н¨Ò»¸öAjax_StartµÄÍøÕ¾
¶þ¡¢ ÔÚÍøÕ¾ÖÐÌí¼ÓÒ»¸öweb·þÎñ£¨ws_start.asmx£©
ÔÚvs2008ÖУ¬Ìí¼ÓÒ»¸öweb·þÎñÉú³ÉÁËÁ½¸öÎļþ£¬Ò»¸öÊÇasmxÎļþ£¬Ò»¸öÊÇÔÚApp_codeÀïµÄcsÎļþ£»ÎÒ¾õµÃÕâÑù²¢²»ºÃ£¬Ö ......
AJAX(Asynchronous JavaScript and XML):»ùÓÚXMLµÄÒì²½JavaScript£¬¼ò³ÆAJAX,ÊǶàÖÖ¼¼ÊõµÄ×ÛºÏ.
Ò»ÖÖ¿Í»§¶Ë¼¼Êõ ,Ϊ»¥ÁªÍøÓû§Ìṩ¸ü¼ÓÓÑÉÆµÄ½»»¥½çÃæ,¸ü¼ÓÁ÷³©µÄÓû§ÌåÑé.Ò²¾ÍÊÇËùνµÄÅÖ¿Í»§¶Ë,Ê¹ÍøÒ³µÄЧ¹ûÄܹ»Ïñ°²×°ÔÚ¼ÆËã»úÉϵÄÓ¦ÓÃÈí¼þ»òϵͳһÑùÓѺûªÀö.
ËüÓÉÈçÏÂËÄÖÖ¼¼Êõ×é³É:CSS + DOM + XMLHttpRe ......
ʹÓÃjsµ÷ÓÃXMLHttpRequest½øÐÐajaxͨѶʱ£¬Èç¹û·þÎñÆ÷¶ËÒª´«µÝµÄÊý¾ÝÖÐÓÐÖÐÎÄʱ£¬ÎÒÃǵĽâ¾ö°ì·¨¡£
1¡¢Ò³Ã棺
Ò»°ãÔÚÒ³ÃæÎÒÃÇΪÁË·½±ã£¬×îºÃʹÓÃUTF-8±àÂë¡£
2¡¢·þÎñÆ÷¶Ë£º
ÎÒÃÇÔÚ·þÎñÆ÷¶ËµÄ´úÂëÀïÃæ¶Ôresponse¶ÔÏóµÄÉèÖÃÈçÏ£º
//ÉèÖÃresponseµÄ±àÂë
......
¿´¿´ Ajax ºÍ DOM ½Å±¾±à³Ì¾¿¾¹Óжà¼òµ¥
ÎĵµÑ¡Ïî
½«´ËÒ³×÷Ϊµç×ÓÓʼþ·¢ËÍ
¼¶±ð£º Öм¶
Jesse Skinner, Web ¿ª·¢ÈËÔ±, Freelance
2007 Äê 5 ÔÂ 16 ÈÕ
jQuery ÊÇÒ»¸öJavaScript ¿â£¬ËüÓÐÖúÓÚ¼ò»¯ JavaScript™ ÒÔ¼° Asynchronous JavaScript + XML (Ajax) ±à³Ì¡£ÓëÀàËÆµÄ JavaScript ¿â²»Í¬£¬jQuery ¾ßÓжÀ ......