¡¡¡¡±¾ÆªÎÄÕÂÌṩÁËÒ»¸ö¿ªÔ´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 ²¢²»ËæÊéǩһÆð³ÖÐø»¯£¬µ±ä¯ÀÀÆ÷¹Ø±Õ£¬ä¯ÀÀÆ÷»º´æ±»Çå³ýºÍÓû§Çå³ýÀúÊ·¼Ç¼µÄʱºò£¬ËûÒ²¾ÍÏûʧÁË¡£

