如何在URL中显示Ajax请求？
我想要的是有更改页面的一部分的链接，以及它的dynamicurl，我可以指定variables，如#calendar=10_2010tabview=tab2
Check this for an exact example: 点击这里精确的演示
所以这里是我需要的链接格式：
#calendar=10_2010&tabview=tab2
我需要像calendar和tabview的链接variables，所以我可以改变多个事情在一个单一的网页上没有realoading。
或者像http://www.wbhomes.com.au这样的其他格式，这正是我想要的，但是第一种格式也不错，但是这样更漂亮。
-
http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1
要求
-
需要从示例邮件的任何地方访问，或者如果我只是写在url栏。
-
链接应该在历史logging中，所以如果我按下后退或前进button，页面需要被访问。
-
页面刷新也需要工作。
一些资源：
例子：
-
www.developer.yahoo.com/
-
www.facebook.com – 您的个人资料页面上的侧边栏链接
-
www.wbhomes.com.au/ – 100％接近我想要的
-
www.flickr.com/
-
www.youtube.com
一些教程：
-
www.ajaxpatterns.org/
-
www.contentwithstyle.co.uk/
请帮帮我！ 我从来没有find任何解决scheme来做到这一点，但我不想使用jquery或任何API，或任何库，我想有一个工作的Javascript/AJAX和PHP脚本。
对于在你的问题中链接的演示，实现这个function实际上非常简单 – 因为它根本不使用任何AJAX（当你开始添加AJAX的时候，会变得更加困难，稍后再解释）。 为了实现这个function， 升级链接以使用散列，然后绑定到hashchange事件。 不幸的是，hashchange事件并不是跨浏览器兼容的，幸运的是有很多“历史/远程插件”可用 – 我们多年来首选的jQuery历史已经被certificate是jQuery History ，它是开源的，得到了很好的支持， – ）。
虽然在为Facebook， WBHomes和Balupton.com等网站添加AJAXfunction时，您将开始面对一系列严重困难的问题！ （我知道，因为我是最后两个站点的首席架构师！）。 其中一些问题是：
- 如何优雅和方便地升级某些内部链接，以使用历史和AJAXfunction，并检测何时散列已经改变？ 同时保持其他链接像以前一样工作。
- 如何从“www.yoursite.com/myapp/a/b/c”redirect到“www.yoursite.com/myapp/#/a/b/c”？ 并保持使用者顺畅的体验，使3次必要的redirect尽可能平滑。
- 如何使用AJAX提交表单值和数据并更新散列？ 反之亦然，如果他们不支持Javascript。
- 如何检测AJAX请求所要的页面的哪个特定区域？ 这样子页面显示正确的页面。
- 当AJAX状态改变时如何改变页面标题？ 和其他非页面内容。
- 如何在AJAX状态加载和更改时执行良好的介绍/输出效果？ 使得用户不会被留在黑暗中。
- 如何通过AJAXlogin时更新侧边栏login信息？ 显然，我们不希望左上angular的loginbutton在那里。
- 如何仍然支持没有启用JS的用户的网站？ 这样，它优雅地降级，仍然可以通过search引擎索引。
我所知道的唯一的开源和可靠的项目，试图解决所有这些提到的非常棘手的问题已被certificate是jQuery Ajaxy 。 它实际上是前面提到的jQuery History项目的一个扩展，提供了一个漂亮优雅的高级界面，可以将AJAXfunction添加到组合中，以照顾幕后的难题，所以我们不必担心。 这也是前面提到的最后几个商业网站中select的解决scheme。
祝你好运，如果你还有其他问题，那就发表评论这个答案，我会尽快得到它:-)
更新：现在有HTML5历史API（pushState，popState），它弃用了HTML4的hashchangefunction。 History.js现在是jQuery History的hashchange ，为HTML5 History API提供跨浏览器兼容性，为HTML4浏览器提供可选的 hashchange回退。 jQuery Ajaxy将升级为History.js
我想你可以很容易地使用HTML5中的onHashChange事件，或者使用一个JavaScript库来模拟浏览器中的“哈希”行为，这些行为不具备完整的HTML 5支持。 一个这样的图书馆可能是MooTools ，但也有很多其他的。
如果你有一个支持HTML 5的浏览器，或者模拟这种行为的库只是使用：
window.sethash（ “＃newsection”）;
从JavaScript更改为新的东西，和/或callbackonHashChange事件来拦截它，这取决于你的用例场景。
CorMVC Jquery Framework就是这样做的，它是开源的，你可以挖掘源代码并从中获取逻辑。
而且实际上它非常简单。 创作者在下面的这个video中很好地讲述它。
resources/jing/2009-12-21_0933.swf
PS抱歉不能发布第二个链接BC我是一个新的用户。
Szevasz .. 🙂
HTML
<a href="/bye.php?user=abc&page=messages" onclick="return goToWithAjax(this);">bye</a>
使用Javascript
function goToWithAjax(hash) { hash = hash.href ? hash.getAttribute("href", 2) : hash; ajax( hash, function( response ) { document.getElementById("content").innerHTML = response; }); hash = ("#!/" + hash).replace("//","/"); window.location.hash = hash; return false; } ////////////////////////////////////////////////////////////////////////////// function getXmlHttpObject() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } function ajax(url, onSuccess, onError) { var xmlHttp = getXmlHttpObject(); xmlHttp.onreadystatechange = function () { if (this.readyState == 4) { // onError if (this.status != 200) { if (typeof onError == 'function') { onError(this.responseText); } } // onSuccess else if (typeof onSuccess == 'function') { onSuccess(this.responseText); } } }; xmlHttp.open("GET", url, true); xmlHttp.send(null); return xmlHttp; }
这是大多数新的AJAX开发人员所不具备的。 这是一个相当简单的问题来解决。
首先你需要的是在jquery.com上免费的jQuery核心
接下来，您将需要Ben Alman的jQuery哈希修改插件，您可以在这里find： http ： //benalman.com/projects/jquery-hashchange-plugin/对于支持html5的新版浏览器，您将不需要hashchange事件，但你会为旧版本的浏览器。 你不必做任何事情，只要在你的页面中包含这个脚本，就可以处理剩下的事情。
现在为你的链接，你将需要构build它们的查询string时尚就像这样：
<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>
现在你有链接去页面，并可以在PHP中处理的情况下JavaScriptclosures。 您所要做的就是使用超级全局$ _GET并parsing查询string来处理页面内容。
现在在你的JavaScript页面上，你将需要使你的链接触发hashchange。 你可以通过用这样的＃replace？q =来做到这一点。
$(".dynlnk").each(function(){ $(this).attr("href", $(this).attr("href").replace("?q=", "#")); });
现在你的链接将会触发hashchange，剩下的事情就是把hashchange绑定到一个执行某个操作的函数上。 这可以通过jQuery来完成，就像这样：
$(window).bind( 'hashchange', function(e){ //this splits the part after the hash so you can handle the parts individually. //to handle them as one just use location.hash pageparts = location.hash.split("/"); });
现在只需添加你所做的代码来处理你的Ajax和内容。
现在你只需要最后一点的JavaScript来触发hashchange，以防止页面加载一个哈希开始，所以你只要调用窗口的触发函数，当页面加载
$(window).trigger( 'hashchange' );
希望这个很清楚，如果没有的话，不要犹豫，联系我来问更多的问题。
使用散列链接允许可join书签/可共享的链接触发JavaScript代码，而不是重新加载页面。 Ben Almans jQuery hashchange事件允许你将一个事件处理程序绑定到hashchange事件，这个插件可以和那些通常不支持的浏览器一起工作。 绑定到hashchange的事件处理程序可以读取URL的哈希部分，并调用任何函数。
// register event handler function bindHashchange() { $(window).bind('hashchange', function(event) { event.preventDefault(); var label = location.hash.substring(1); handleLabel(label); }); // trigger event so handler will be run when page is opened first time // otherwise handler will only run when clicking on hash links $(window).trigger('hashchange'); } // read and handle hash part of url function handleLabel(label) { if ( label.length > 0 ) { // using label from url switchPage(label); } else { // use the default label, if no hash link was present switchPage('start'); } } // in this case, load hidden <div>'s into a <div id="content"> function switchPage(label) { if ( label == 'start ) { $('div#content').html($('div#start')); } else if ( label == 'some_other_page' ) { // do something else } }
这个其他事件处理程序可以在同一个url中处理由点（'。'）分隔的两个参数。
function processHash() { var str = location.hash.substring(1); var pos = $.inArray('.', str); var label = ''; var arg = ''; if ( pos > -1 ) { label = str.substring(0, pos); } else { label = str.substring(0); } if ( pos > 1 ) { arg = str.substring(pos+1); } if ( label.length == 0 ) { // the default page to open of label is empty loadContent('start'); } else { // load page, and pass an argument loadContent(label, arg); } }
如果使用正则expression式，则可以parsing任何字符组合。
var registry = {}; // split on character '.' var args = label.split(/\./g); for ( i in args ) { var arg = args[i]; // split on character '=' var temp = arg.split('='); var name = temp[0]; var value = temp[1]; // store argument in registry registry[name] = value; } // registry is loaded, ready to run application that depends on arguments
这将改变url：
mysite的/＃company.page = items.color =红
进入下面的JavaScript对象：
对象{company = undefined，page =“items”，color =“red”}
那么这只是在选定的元素上运行jQuery的show（）或hide（）函数的问题。
这可以转化为非jQuery JavaScript，但是这样会失去Ben Alman提供的function，这对便携式解决scheme至关重要。
你想要的是一种支持AJAX 历史的方法，可以使用许多已经存在的库来完成。 我会推荐阅读YUI 3的历史页面 。
