本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章，第2.3节，作者：【美】Brad Broulik，更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.3 Ajax驱动的导航
jQuery Mobile快速入门
在上面提到的多页面案例中（见程序清单2-3），我们了解到jQuery Mobile如何从一个内部页面导航到另外一个内部页面。当多页面文档在初始化时，内部页面已经添加到DOM中，这样从一个内部页面转换到另外一个页面时，速度才会相当快。在从一个页面导航到另外一个页面时，我们可以配置要应用的页面转换类型。默认情况下，框架会为所有的转换应用一个“滑动（slide）”效果。在本章后面，我们会讨论可以选择的转换和转换类型。
当一个单页面转换到另外一个单页面时，导航模型是不同的。例如，我们可以从多页面中提取出contact页面，然后命名为contact.html文件。现在我们的home页面（hijax.html）可以通过一个普通的HTTP链接引用来返回contact页面。
当单击上面的“Contact Us”链接时，jQuery Mobile将会按照如下步骤处理该请求。
1．jQuery Mobile会解析href，然后通过一个Ajax请求（Hijax）载入页面。为了获得一个直观了解，请看图2-3。如果成功载入页面，则该页面会添加到当前页面的DOM中。
当页面成功添加到DOM中后，jQuery Mobile可以根据需要来增强该页面，更新基础（base）元素的@href，并设置data-url属性（如果没有被显式设置的话）。
2．框架随后使用应用的默认“滑动”转换模式转换到一个新的页面。框架也可以实现无缝的CSS转换，因为“from”页面和“to”页面都存在于DOM中。在转换完成之后，当前可见的页面或活动页面将会被指定为“ui-page-active”CSS类。
3．产生的URL也可以作为书签。例如，如果想深链接（deep link）到contact页面，则可以通过其完整的路径来访问：
http://<host:port>/ch2/contact.html注意：
作为一个额外的优点，如果浏览器支持HTML5的pushState，则基于Ajax的导航也可以在该浏览器中产生完全正确的URL。桌面式Safari、Chrome、Firefox和Opera的最近版本都支持HTML5的这个特性。Android（2.2+）和iOS5也支持pushState。在不支持该特性的浏览器中，基于#的URL（http://<host:port>/hijax.html#contact.html）将会用来保持共享URL和对URL添加书签的能力。
4．如果页面载入失败，则会显示和淡出一条短的错误消息，该消息是对“Error Loading Page（页面载入错误）”消息的覆写（overlay）（见图2-4）。
2.3.1 $.mobile.changePage()
changePage( )函数处理从一个页面转换到另一个页面时涉及的所有细节。你可以转换到除当前页面之外的任何页面。可用的转换类型的完整列表如表2-1所示。
2.3.2 用途
$.mobile.changePage(toPage, [options])2.3.3 参数
toPage(string或jQuery集合)。将要转向的页面。
toPage(string)。一个文件URL(“contact.html”）或内部元素的ID(“#contact”)。
toPage(jQuery集合)。包含一个页面元素的jQuery集合，而且该页面元素是该集合的第一个参数。
options(object)。配置changePage请求的一组键/值对。所有的设置都是可选的。
transition(string，default: $.mobile.defaultTransition)。为changePage应用的转换。默认的转换是“滑动”。
reverse(boolean, default:false)。指示该转换是向前转换还是向后转换。默认的转换是向前。
changeHash(boolean, default:ture)。当页面转换完成之后，更新页面URL的#。
role(string，default:“page”)。在显示页面时使用的data-role值。如果页面是对话框，则使用“dialog”。
pageContainer(jQuery集合，default:$.mobile.pageContainer)。指定应该包含载入页面的元素。
type (string, default:“get”)。在生成页面请求时，指定所使用的方法（get或post）。
data (string或object, default:undefined)。发送给一个Ajax页面请求的数据。
reloadPage (boolean, default: false)。强制页面重新载入，即使它已经位于页面容器的DOM中。
showLoadMsg (boolean, default: true)。在请求页面时，显示载入信息。
fromHashChange(boolean, default: false)。指示changePage是否来自于一个hashchange事件。
重要：
Ajax导航不能用于载入一个外部链接的情况。
在这样的情况下，将会发生正常的HTTP请求过程。而且，也无法应用CSS转换。前面提到，通过动态地将“from”和“to”页面载入到同一个DOM，框架可以实现平滑的转换，而且随后也可以应用一个平滑的CSS转换。不使用Ajax导航，则无法实现平滑转换，而且在转换期间，也不会显示默认的载入消息（$.mobile.loadingMessage）。
2.3.4 配置Ajax导航
Ajax导航是全局启用的，当你很在意DOM的大小时，或者是你需要支持的某个特定设备不支持hash历史更新时（见下面的“注意”），则可以禁用这个特性。默认情况下，jQuery Mobile可以为我们管理DOM的大小或缓存，它只将活动页面转换所涉及的“from”和“to”页面合并到DOM中。要禁用Ajax导航，在绑定移动初始事件时，设置$.moible.ajaxEnabled=false。有关配置jQuery Mobile或管理DOM缓存的更多详情，请见第8章。
注意：
在所有已知与hash历史更新有冲突的平台上，Ajax导航已经被禁用。例如，jQuery Mobile已经为BlackBerry 5、Opera Mini(5.0-6.0)、Nokia Symbian 3和Windows Phone 6.5禁用了Ajax导航（$.mobile.ajaxEnabled=false）。在使用普通的HTTP和全页面刷新时，这些设备更为实用。
