¡¾·±ÌåÖÐÎÄ¡¿
¡¾ÉèΪÊ×Ò³¡¿
¡¾¼ÓÈëÊղء¿
µ±Ç°Î»ÖãºÍøÕ¾ÖÆ×÷Ê×Ò³ >> AJAX½Ì³Ì >> AJAXÈçºÎ´¦ÀíÊéÇ©ºÍ·­Ò³°´Å¤

AJAXÈçºÎ´¦ÀíÊéÇ©ºÍ·­Ò³°´Å¤

2007-05-15 08:00:00  ×÷Õߣº  À´Ô´£º»¥ÁªÍø  ä¯ÀÀ´ÎÊý£º0  ÎÄ×Ö´óС£º¡¾´ó¡¿¡¾ÖС¿¡¾Ð¡¡¿
¼ò½é£º¡¡¡¡±¾ÆªÎÄÕÂÌṩÁËÒ»¸ö¿ªÔ´JavaScript¿â£¬ËüÌṩÁ˸øAJAXÓ¦ÓóÌÐòÖÐÌí¼ÓÊéÇ©ºÍ»áÍ˰´Å¥µÄ¹¦ÄÜ¡£ÔÚѧϰÍêÕâ¸ö½Ì³Ìºó£¬¿ª·¢Õß½«Äܹ»¶Ô¿ª·¢AJAXÓ¦ÓÃÅöµ½µÄÎÊÌâ»ñµÃÒ»¸ö½â¾ö·½°¸£¬Õâ¸öÌØÐÔÉõÖÁGoogle Maps ºÍ Gmail...
¹Ø¼ü×Ö£ºÊéÇ© ´¦Àí ÈçºÎ AJAX

¡¡¡¡±¾ÆªÎÄÕÂÌṩÁËÒ»¸ö¿ªÔ´JavaScript¿â£¬ËüÌṩÁ˸øAJAXÓ¦ÓóÌÐòÖÐÌí¼ÓÊéÇ©ºÍ»áÍ˰´Å¥µÄ¹¦ÄÜ¡£ÔÚѧϰÍêÕâ¸ö½Ì³Ìºó£¬¿ª·¢Õß½«Äܹ»¶Ô¿ª·¢AJAXÓ¦ÓÃÅöµ½µÄÎÊÌâ»ñµÃÒ»¸ö½â¾ö·½°¸£¬Õâ¸öÌØÐÔÉõÖÁGoogle Maps ºÍ Gmail ÏÖÔÚ¶¼²»Ìṩ£ºÌṩһ¸öÇ¿´óµÄ£¬¿ÉÓõÄÊéÇ©ºÍǰ½ø»ØÍ˰´Å¥£¬ÈçͬÆäËûµÄWEBÓ¦ÓÃÒ»ÑùµÄÐÐΪ¡£

¡¡¡¡AJAX¡°ÈçºÎ´¦ÀíÊéÇ©ºÍ»ØÍ˰´Å¥¡±²ûÊöÁËAJAXÓ¦ÓóÌÐò¿ª·¢ÊéÇ©ºÍ»ØÍ˰´Å¥¹¦ÄÜÅöµ½µÄÑÏÖØµÄÎÊÌ⣻¿ÉÒÔ½â¾öÒÔÉÏÎÊÌâµÄÒ»¸ö¿ªÔ´¿ò¼Ü£¬²¢Ìá¹©ÕæÊµ¡¢¼òµ¥µÄÀúÊ·¼Ç¼¿â£¬»¹ÌṩÁ˼¸¸öÔËÐÐÖеÄÀý×Ó¡£

¡¡¡¡±¾ÎİÑÕâ¸ö¿ò¼ÜÌṩµÄÖØÒª·¢ÏÖ·ÖÁ½¸ö²¿·ÖÀ´ËµÃ÷£ºÊ×ÏÈ£¬Ò»¸öÒþ²ØµÄHTML±íµ¥ÓÃÀ´»º´æ´óÁ¿¶ÌÔݵÄÔÚ¿Í»§¶ËÐÅÏ¢¡£ÕâЩ»º´æÎªÍøÒ³µ¼º½ÌṩÁËÇ¿´óµÄÖ§³Ö¡£Æä´Î£¬Ò»¸öÒþ²ØµÄIFrameºÍ³¬¼¶Á´½ÓÓÃÀ´½ØÈ¡ºÍ¼Ç¼ä¯ÀÀÆ÷µÄÀúʷʼþÌṩ»ØÍ˰´Å¥ºÍÏòǰ°´Å¥µÄÖ§³Ö¡£ÒÔÉÏÁ½¸ö¼¼Êõ¶¼ÊÇͨ¹ý°ü×°ÔÚÒ»¸ö¼òµ¥µÄJavaScript¿âÖÐÀ´ÊµÏÖ¼òµ¥¿ª·¢¡£

¡¡¡¡ÎÊÌ⣺

¡¡¡¡ÊéÇ©ºÍ»ØÍ˰´Å¥ÔÚ´«Í³µÄ¶àÒ³ÃæµÄWebÓ¦ÓóÌÐòÖй¤×÷µÄ·Ç³£ºÃ¡£µ±Óû§ä¯ÀÀÍøÕ¾µÄʱºò£¬ä¯ÀÀÆ÷µÄµØÖ·À¸¼ÇÂ¼ËæÐµÄURLs¸üУ¬ÕâЩ¼Ç¼¿ÉÒÔ¿½±´µ½email »òÕß ÊéÇ©Öй©ÒÔºóʹÓ᣻ØÍ˺Íǰ½ø°´Å¥¿ÉÒÔ°ïÖúÓû§ÔÚËûä¯ÀÀ¹ýµÄÍøÒ³ÖÐÏòǰ»òÏòºó·­¶¯¡£

¡¡¡¡AJAX Ó¦ÓóÌÐòÈ´ÊDz»Í¬µÄ£¬ËûÃÇÊÇÔËÐÐÔÚÒ»¸öÍøÒ³Öеĸ´ÔÓ³ÌÐò¡£ä¯ÀÀÆ÷²¢²»ÊÇΪÕâÀà³ÌÐòÖÆ×÷µÄ¨D¨D¨DÕâÀà³ÌÐòÊǹýÈ¥µÄ£¬ÔÚÿ´ÎÊó±êµã»÷µÄʱºòÐèÒªÖØÐÂË¢ÐÂÕû¸öÒ³Ãæ¡£

¡¡¡¡ÔÚÀàËÆGmailµÄAJAXÈí¼þÖУ¬ä¯ÀÀÆ÷µÄµØÖ·À¸ÔÚÓû§Ñ¡Ôñ¹¦Äܺ͸ıä³ÌÐò״̬µÄʱºò±£³Ö²»±ä£¬ÕâÈÃÊéÇ©ÔÚÕâÀà³ÌÐòÖÐÎÞ·¨Ê¹Óá£Î´À´£¬Èç¹ûÓû§°´Ï¡°»ØÍË¡±°´Å¥À´³·ÏúÉϴε͝×÷£¬¶øä¯ÀÀÆ÷ºÍÓ¦ÓóÌÐò·ÖÀëµÄ×´¿ö»áÈÃÓû§ºÜ³Ô¾ª¡£

¡¡¡¡½â¾ö·½°¸£º

¡¡¡¡¿ªÔ´Really Simply History (RSH)¿ò¼Ü¿ÉÒÔÓÃÀ´½â¾öÉÏÃæµÄÎÊÌ⣬ΪAJAXÓ¦ÓóÌÐòÌṩÊéÇ©ºÍ¿ØÖÆ¡°»ØÍË¡±¡¢¡°Ïòǰ¡±°´Å¥µÄ¹¦ÄÜ¡£RSH Ŀǰ»¹ÊÇBeta ״̬£¬¿ÉÒÔÔÚFirefox 1.0 , Netscape 7+,Internet Explorer 6+µÈä¯ÀÀÆ÷ÉϹ¤×÷£¬Ä¿Ç°»¹²»Ö§³ÖSafariä¯ÀÀÆ÷¡£¿ÉÒԲο¼£º±àÂëÌìÌãºSafari:²»¿ÉÄܵÄDHTMLÀúÊ·¼Ç¼¡£

¡¡¡¡Óм¸ÀàAJAX¿ò¼ÜĿǰҲ֧³ÖÊéÇ©ºÍÀúÊ··ÃÎʵÄÎÊÌ⣬µ«ÕâЩ¿ò¼ÜÒòΪʵÏÖ·½Ê½µÄ²»Í¬£¬Ä¿Ç°¶¼Óм¸¸ö´óBug¡£Î´À´£¬ºÜ¶àAJAX¿ò¼Ü£¬±ÈÈçBackbase ºÍ Dojo ½«»áÕûºÏÀúÊ·ä¯ÀÀµÄ¹¦ÄÜ£»ÕâЩ¿ò¼ÜΪAJAXÓ¦ÓóÌÐò²ÉÓÃÍêÈ«²»Í¬µÄ±à³ÌÄ£ÐÍ£¬Ç¿ÆÈ³ÌÐòԱʹÓÃÍêÈ«²»Í¬µÄ·½Ê½À´ÊµÏÖÀúÊ·ä¯ÀÀµÄ¹¦ÄÜ¡£

¡¡¡¡Ïà·´£¬RSH ÊÇÒ»¸ö¿ÉÒÔ°üº¬ÔÚÏÖÓÐAJAXϵͳµÄµ¥Ä£¿é¡£Î´À´£¬RSH¿â»á½øÒ»²½¸Ä½ø±ÜÃâºÍÆäËû¿ò¼ÜµÄÏà¹Ø¹¦ÄܳåÍ»¡£

¡¡¡¡RSH ÀúÊ·¿ò¼ÜÓÉÁ½¸öJavaScriptÀà×é³É£ºDhtmlHistory ºÍ HistoryStorage¡£

¡¡¡¡DhtmlHistory ÀàΪAJAXÓ¦ÓóÌÐòÌṩÀúÊ·ä¯ÀÀ¼Ç¼µÄ³éÏó¡£AJAX Ò³Ãæ add() ÀúÊ·ä¯ÀÀ¼Ç¼Ê¼þµ½ä¯ÀÀÆ÷£¬±£´æÖ¸¶¨ÐµĵØÖ·ºÍÏà¹ØµÄÀúÊ·Êý¾Ý¡£DhtmlHistory ÀàʹÓÃHashÁ¬½Ó¸üÐÂä¯ÀÀÆ÷µ±Ç°µÄURL£¬±ÈÈ磺#new-location£¬Í¬Ê±°ÑÀúÊ·Êý¾ÝºÍеÄURL¹ØÁª¡£AJAX Ó¦ÓóÌÐò°Ñ×Ô¼º×¢²áΪÀúÊ·ä¯ÀÀµÄ¼àÌýÆ÷£¬µ±Óû§Ê¹Óà ¡°Ç°½ø¡±¡°»ØÍË¡±°´Å¥À´ä¯ÀÀʱ£¬ÀúÊ·ä¯ÀÀʱ¼ä±»´¥·¢£¬µ÷Óà add() ·½·¨À´Ìṩ¸øä¯ÀÀÆ÷еĵØÖ·£¬²¢±£´æÀúÊ·Êý¾Ý¡£

¡¡¡¡µÚ¶þ¸öÀà: HistoryStorageÔÊÐí³ÌÐòÔ±±£´æÈÎÒâµÄÀúÊ·ä¯ÀÀÊý¾Ý¡£ÔÚÆÕͨµÄÍøÒ³ÖУ¬µ±Óû§ä¯ÀÀµ½Ò»¸öеÄÍøÖ·£¬ä¯ÀÀÆ÷Ð¶ÔØ²¢Çå³ýµ±Ç°ÍøÒ³ËùÓеijÌÐòºÍJavaScript״̬£¬Èç¹ûÓû§·µ»ØÊ±£¬ËùÓеÄÊý¾Ý¶¼¶ªÊ§ÁË¡£HsitoryStorage ÀàÌṩ´øÓÐHash±íµÄAPIͨ¹ý put() , get() , hasKey()¡¡µÈ·½·¨À´½â¾öÕâÀàÎÊÌâ¡£ÉÏÃæµÄ·½·¨ÔÊÐí³ÌÐòÔ±±£´æÓû§Àë¿ªÍøÒ³Ê±µÄÈÎÒâÊý¾Ý£¬µ±Óû§°´¡°»ØÍË¡±°´Å¥ÖØÐ·µ»ØÊ±£¬ÀúÊ·Êý¾Ý¿ÉÒÔͨ¹ýHistoryStorageÀàÀ´·ÃÎÊ¡£ÎÒÃÇÆð³õͨ¹ýʹÓÃÒþ²ØµÄ±íµ¥×Ö¶ÎÀ´ÊµÏÖ£¬ÒòΪä¯ÀÀÆ÷×Ô¶¯±£´æÒ»¸ö±íµ¥ÖÐ×Ö¶ÎÖµ£¬ÉõÖÁÓû§Àë¿ªÍøÒ³µÄʱºòÒ²Èç´Ë¡£

¡¡¡¡Àý×Ó£ºÏÈ´ÓÒ»¸ö¼òµ¥µÄÀý×Ó¿ªÊ¼°É£º

¡¡¡¡Ê×ÏÈ£¬ÐèÒªRSH¿ò¼ÜµÄÍøÒ³ÖÐÐèÒª°üº¬ dhtmlHistory.js ½Ì±¾£º

History framework -->

¡¡¡¡DHTML ÀúÊ·Ó¦ÓóÌÐò±ØÐëÔÚͬ¼¶Ä¿Â¼Ï°üº¬blank.htmlÎļþ¡£Õâ¸öÎļþ×Ô¶¯±»RSH¿ò¼Ü°ó¶¨ÐèÒª±»IEä¯ÀÀÆ÷ʹÓá£ÕýÈç¸Õ²ÅÌáµ½µÄ£¬RSHʹÓÃÒ»¸öÒþ²ØµÄIframeÀ´±£´æºÍÔö¼ÓIEä¯ÀÀÆ÷µÄ¸Ä±ä¡£Õâ¸öIframeÐèÒªÖ¸¶¨Ò»¸öʵ¼ÊµÄÎļþλÖòÅÄÜÕý³£¹¤×÷£¬Õâ¾ÍÊÇblank.html¡£

¡¡¡¡RSH ¿ò¼Ü´´½¨ÁËÒ»¸ö½ÐdhtmlHistoryµÄÈ«¾Ö¶ÔÏó£¬ÕâÊÇ¿ØÖÆä¯ÀÀÆ÷ÀúÊ·ä¯ÀÀ¼Ç¼µÄÈë¿Úµã¡£µÚÒ»²½ÔÚÍøÒ³Íê³É×°ÔØºóÐèÒª³õʼ»¯ dhtmlHistory ¶ÔÏó¡£

window.onload = initialize;

function initialize() {

// initialize the DHTML History

// framework

dhtmlHistory.initialize();

¡¡¡¡È»ºó£¬³ÌÐòԱʹÓà dhtmlHistory.addListener() ·½·¨¶©ÔÄÀúÊ·ä¯ÀÀʼþµÄ¸Ä±ä¡£Õâ¸ö·½·¨Ê¹ÓÃÁËÒ»¸öJavaScriptµÄ»Øµ÷º¯Êý£¬µ±¼Ç¼ÀúÊ·ä¯ÀÀʼþ·¢ÉúʱÕâ¸öº¯Êý½ÓÊÕÁ½¸ö²ÎÊý¡£ÍøÒ³µÄеØÖ·ºÍÈκεÄÀúÊ·Êý¾Ý¶¼Ó¦¸Ã¹ØÁªµ½Õâ¸öʼþ£º

window.onload = initialize;

function initialize() {

// initialize the DHTML History

// framework

dhtmlHistory.initialize();

// subscribe to DHTML history change

// events

dhtmlHistory.initialize();

¡¡¡¡historyChange() ·½·¨ºÜÖ±¹Û£¬µ±Óû§ä¯ÀÀµ½Ò»¸öеÄÍøÒ³Ê±Ê¹ÓÃÒ»¸ö·½·¨½ÓÊÕ newLocation £¬Í¬Ê±ÆäËûµÄ historyData ¿ÉÒÔÑ¡Ôñ¸½¼Óµ½Õâ¸öʼþÉÏ£º

/** Our callback to receive history change

events. */

function historyChange(newLocation,

historyData) {

debug("A history change has occurred: "

+ "newLocation="+newLocation

+ ", historyData="+historyData,

true);

}

¡¡¡¡ÉÏÃæÓõ½µÄDebug() ÊÇÒ»¸ö¹¤¾ß·½·¨£¬ÓÃÀ´¼òµ¥µÄ°ÑÏûÏ¢´òÓ¡µ½ÍøÒ³ÉÏ¡£µÚ¶þ¸ö²ÎÊýÊÇBooleanÐ͵ģ¬Èç¹ûÉèÖÃÎªÕæ£¬ÔÚеÄÏûÏ¢´òÓ¡µÄʱºò½«»áÇå³þÔ­À´µÄÐÅÏ¢¡£

¡¡¡¡Add() ·½·¨¡£Ôö¼ÓÒ»¸ö°üº¬ÐµØÖ·µÄÀúʷʼþ£¬±ÈÈ磺¡°edit:SomePage¡±£¬Í¬Ê±Ò²ÌṩÁ˺ÍʼþÒ»Æð´æ´¢µÄ¿ÉÑ¡ historyDate Öµ¡£

window.onload = initialize;

function initialize() {

// initialize the DHTML History

// framework

dhtmlHistory.initialize();

// subscribe to DHTML history change

// events

dhtmlHistory.initialize();

// if this is the first time we have

// loaded the page...

if (dhtmlHistory.isFirstLoad()) {

debug("Adding values to browser "

+ "history", false);

// start adding history

dhtmlHistory.add("helloworld",

"Hello World Data");

dhtmlHistory.add("foobar", 33);

dhtmlHistory.add("boobah", true);

var complexObject = new Object();

complexObject.value1 =

"This is the first value";

complexObject.value2 =

"This is the second value";

complexObject.value3 = new Array();

complexObject.value3 = new Array();

complexObject.value3[1] = ¡¡ãarray 2¡¡À;

dhtmlHistory.add("complexObject",

complexObject);

¡¡¡¡ÔÚadd()Ö´ÐкóµÄͬʱ£¬ÐµĵØÖ·×÷Ϊһ¸öÁ´½ÓµØÖ·½«ÏÔʾÔÚä¯ÀÀÆ÷µÄURLµØÖ·À¸ÖС£±ÈÈ磺ÔÚAJAXÍøÒ³Öе±Ç°µØÖ·ÊÇ£ºhttp://codinginparadise.org/my_ajax_app£¬Ö´ÐÐÍ꣺ dhtmlHistory.add(¡°helloworld¡±,¡±Hello World Data¡±)ºóÓû§½«»áÔÚä¯ÀÀÆ÷URLµØÖ·À¸Öп´µ½ÈçϵĵØÖ·£ºhttp://codinginparadise.org/my_ajax_app#helloworld

ÕâÊÇÓû§¿ÉÒÔ¸øÕâ¸öÒ³Ãæ×öÊÕ²ØÊéÇ©£¬Èç¹ûÓû§ºóÀ´Óõ½Õâ¸öÊéÇ©µÄʱºò£¬AJAXÓ¦ÓóÌÐò¿ÉÒÔ¶ÁÈ¡µ½£º#helloworldÖµ²¢ÓÃËüÀ´³õʼ»¯ÍøÒ³¡£RSH¿ò¼Ü͸Ã÷µÄ¶ÔURLµØÖ·Öµ½øÐбàÂëºÍ½âÂë¡£

¡¡¡¡historyData ÔÚ±£´æ±È½Ï¸´ÔÓ״̬µÄʱºòºÜÓÐÓô¦¡£ÕâÊÇÒ»¸ö¿ÉÑ¡µÄÖµ£¬Ëû¿ÉÒÔÊÇJavaScriptµÄÈκÎÀàÐÍ£¬±ÈÈ磺Êý×Ö£¬×Ö·û´®£¬¶ÔÏóµÈ¡£Ê¹ÓÃÕâ¸ö¹¦ÄܵÄÒ»¸öÀý×ÓÊÇÔÚÒ»¸öÍøÒ³×Ö·û±à¼­Æ÷ÖУ¬Èç¹ûÓû§À뿪µ±Ç°ÍøÒ³¡£µ±Óû§»ØÍËʱ£¬ä¯ÀÀÆ÷½«»á°Ñ¶ÔÏ󷵻ظøÀúÊ·ä¯ÀÀ±ä¶¯¼àÌýÆ÷¡£

¡¡¡¡¿ª·¢Õß¿ÉÒÔ¸øhistoryDataÌṩ´øÓÐǶÌ×¶ÔÏóºÍÓÃÊý×é±íʾµÄ¸´ÔÓJavaScript¶ÔÏó¡£È»¶ø£¬DOM¶ÔÏóºÍä¯ÀÀÆ÷Ö§³ÖµÄ½Å±¾¶ÔÏóXMLHttpRequest£¬²¢²»±£´æ¡£×¢Ò⣺historyData ²¢²»ËæÊéǩһÆð³ÖÐø»¯£¬µ±ä¯ÀÀÆ÷¹Ø±Õ£¬ä¯ÀÀÆ÷»º´æ±»Çå³ýºÍÓû§Çå³ýÀúÊ·¼Ç¼µÄʱºò£¬ËûÒ²¾ÍÏûʧÁË¡£

ÔðÈα༭£ºadmin
±¾ÎÄÒýÓõØÖ·£º http://www.3pcode.com/web/2007/05/89086.htm
Ïà¹ØÎÄÕÂ