AJAX (Òì²½ JavaScript ºÍ XML)
AJAX (Òì²½ JavaScript ºÍ XML) ÊǸöвúÉúµÄÊõÓï,רΪÃèÊöJavaScriptµÄÁ½ÏîÇ¿´óÐÔÄÜ.ÕâÁ½ÏîÐÔ
ÄÜÔÚ¶àÄêÀ´Ò»Ö±±»ÍøÂ翪·¢ÕßËùºöÂÔ,Ö±µ½×î½üGmail, Google suggestºÍgoogle MapsµÄºá¿Õ³öÊÀ²ÅʹÈË
ÃÇ¿ªÊ¼Òâʶµ½ÆäÖØÒªÐÔ.
ÕâÁ½Ïî±»ºöÊÓµÄÐÔÄÜÊÇ:
* ÎÞÐèÖØÐÂ×°ÔØÕû¸öÒ³Ãæ±ãÄÜÏò·þÎñÆ÷·¢ËÍÇëÇó.
* ¶ÔXMLÎĵµµÄ½âÎöºÍ´¦Àí£®
²½Öè 1 – "Çë!" --- ÈçºÎ·¢ËÍÒ»¸öHTTPÇëÇó
ΪÁËÓÃJavaScriptÏò·þÎñÆ÷·¢ËÍÒ»¸öHTTPÇëÇó, ÐèÒªÒ»¸ö¾ß±¸ÕâÖÖ¹¦ÄܵÄÀàʵÀý.
ÕâÑùµÄÀàÊ×ÏÈÓÉInternet ExplorerÒÔActiveX¶ÔÏóÒýÈë, ±»³ÆÎªXMLHTTP. ºóÀ´Mozilla, Safari ºÍÆäËû
ä¯ÀÀÆ÷·×·×·ÂЧ, ÌṩÁËXMLHttpRequestÀà,ËüÖ§³Ö΢ÈíµÄActiveX¶ÔÏóËùÌṩµÄ·½·¨ºÍÊôÐÔ.
Òò´Ë, ΪÁË´´½¨Ò»¸ö¿çä¯ÀÀÆ÷µÄÕâÑùµÄÀàʵÀý(¶ÔÏó), ¿ÉÒÔÓ¦ÓÃÈçÏ´úÂë:
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
(ÉÏÀý¶Ô´úÂë×öÁËÒ»¶¨¼ò»¯,ÕâÊÇΪÁ˽âÊÍÈçºÎ´´½¨XMLHTTPÀàʵÀý.
ʵ¼ÊµÄ´úÂëʵÀý¿É²ÎÔı¾Æª²½Öè3.)
Èç¹û·þÎñÆ÷µÄÏìӦûÓÐXML mime-type header,ijЩMozillaä¯ÀÀÆ÷¿ÉÄÜÎÞ·¨Õý³£¹¤×÷. ΪÁ˽â¾öÕâ¸ö
ÎÊÌâ, Èç¹û·þÎñÆ÷ÏìÓ¦µÄheader²»ÊÇtext/xml,¿ÉÒÔµ÷ÓÃÆäËü·½·¨Ð޸ĸÃheader.
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
½ÓÏÂÀ´Òª¾ö¶¨µ±ÊÕµ½·þÎñÆ÷µÄÏìÓ¦ºó,ÐèÒª×öʲô.ÕâÐèÒª¸æËßHTTPÇëÇó¶ÔÏóÓÃÄÄÒ»¸öJavaScriptº¯Êý
´¦ÀíÕâ¸öÏìÓ¦.¿ÉÒÔ½«¶ÔÏóµÄonreadystatechangeÊôÐÔÉèÖÃΪҪʹÓõÄJavaScriptµÄº¯ÊýÃû,ÈçÏÂËùʾ:
http_request.onreadystatechange = nameOfTheFunction;
×¢Òâ:ÔÚº¯ÊýÃûºóûÓÐÀ¨ºÅ,Ò²ÎÞÐè´«µÝ²ÎÊý.ÁíÍ⻹ÓÐÒ»ÖÖ·½·¨,¿ÉÒÔÔÚìéÒ³(fly)Öж¨Ò庯Êý¼°Æä¶Ô
ÏìÓ¦Òª²ÉÈ¡µÄÐÐΪ,ÈçÏÂËùʾ:
http_request.onreadystatechange = function(){
// do the thing
};
ÔÚ¶¨ÒåÁËÈçºÎ´¦ÀíÏìÓ¦ºó,¾ÍÒª·¢ËÍÇëÇóÁË.¿ÉÒÔµ÷ÓÃHTTPÇëÇóÀàµÄopen()ºÍsend()·½·¨, ÈçÏÂËùʾ:
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
* open()µÄµÚÒ»¸ö²ÎÊýÊÇHTTPÇëÇó·½Ê½ – GET, POST, HEAD »òÈκηþÎñÆ÷ËùÖ§³ÖµÄÄúÏëµ÷Óõķ½Ê½
. °´ÕÕHTTP¹æ·¶,¸Ã²ÎÊýÒª´óд;·ñÔò,ijЩä¯ÀÀÆ÷(ÈçFirefox)¿ÉÄÜÎÞ·¨´¦ÀíÇëÇó.ÓйØHTTPÇëÇó·½·¨µÄÏê
ϸÐÅÏ¢¿É²Î¿¼
Ïà¹ØÎĵµ£º
±¾ÎÄÖ÷ÒªÊdzöÓÚÓÐÅóÓÑʹÓÃÎÒÔÀ´Ð´µÄautocompleteµÄJS¿Ø¼þ¡£µ±Êý¾ÝÁ¿´óµÄʱºò£¬»á³öÏÖЧÂʼ«ÆäÂýµÄÇé¿ö£¬ÎÒÔÚÕâ¶Îʱ¼ä×ö³öµÄһЩ²âÊÔÒ²¼°Ò»Ð©¾Ñ飬Óë´ó¼Ò·ÖÏí£¬Èç¹ûÓдíµÄµØ·½£¬»¹ÇëÖ¸³ö¡£
¾¹ý²âÊÔ£¬ÎÒÃǻᷢÏÖÈçϵÄÇé¿ö»òÕß˵µÄ½áÂÛ£¬Èç¹ûÄúµÄ²âÊÔ½á¹ûÓëÎҵIJ»·û£¬Çë˵Ã÷ÔÒò£¬ÒÔ±ãÏ໥ѧϰ¡£
1£©µ±Ò»¸ö½Ï´óµÄHTML×Ö· ......
Ò³ÃæÌá½»Êý¾ÝÒ»°ãÓÐÁ½ÖÖ·½·¨£ºget,post¡£post¾ÍÊÇËùνµÄformÌá½»£¬Ê¹ÓÃÊÓͼ£»getÊÇͨ¹ýurlÌá½»¡£
Get·½·¨Ò»°ãÓúǫ́´úÂ루Èçasp,asp.net£©»ñµÃ²ÎÊý£¬´úÂëºÜ¼òµ¥£ºRequest.QueryString["id"];¼´¿É»ñÈ¡¡£
ÓÐЩʱºòÐèÒªÖ±½ÓÔÚǰ̨»ñÈ¡url²ÎÊý£¬ÒªÓõ½javascript£¬jsûÓÐÖ±½Ó»ñÈ¡url²ÎÊýµÄ·½·¨£¬ÄÇô£¬ÎÒÃÇÈçºÎͨ¹ýjs ......
var
xmlDoc
=
null
;
function
parseXML
(
xmlUrl
)
{
¡¡¡¡try
{
¡¡¡¡¡¡¡¡//IE
¡¡¡¡¡¡¡¡xmlDoc
=
new
ActiveXObject
(
"Microsoft.XMLDOM"
);
¡¡¡¡¡¡¡¡xmlDoc
.
async
=
false
;
¡¡¡¡¡¡¡¡xmlDoc
......
<?
XML DOM¶ÁÈ¡½ÚµãÐÅÏ¢Óöµ½ÎÊÌâ×ܽ᣺
1:NodeList: ʹÓýڵãµÄchildNodesÊôÐÔ»òÕßdocument¶ÔÏóµÄgetElementsByTagName()·½·¨£¬¾Í»á·µ»ØÒ»¸ö°üº¬½ÚµãÁбíµÄNodeList
2: ÔÚ XML DOM ÖУ¬½ÚµãµÄ¹ØÏµ±»¶¨ÒåΪ½ÚµãµÄÊôÐÔ£º
· parentNode
· childNodes
· ......
³£¹æµÄ·½·¨Êǽ«ÄêÔÂÈÕÈ¡³ö£¬È»ºó·Ö±ðÅжϷ¶Î§£¬È»ºó¾ÍÅжÏÈòÄê2ÔµÄÌìÊý
¿ÉÒÔͨ¹ýnew Date(string)µÄ¹¹Ô죬±È½ÏÄêÔÂÈÕ×Ö·ûÊÇ·ñ·¢Éú±ä»¯Åжϡ£
function CheckDate(text) {
if (!text) return false;
text = text.replace(/[\/-]0?/g, "/");
if (!text.match(/^\d{4}\/\d{1,2}\/\d{1,2}$/)) return true;
......