WebRocketX
Version 1.10.1
欢迎来到 WebRocketX©。利用这款超轻、超快的内容交付系统，开发单页 Web 应用程序 (SPA) 的效率提高 10 倍。 WebRocketX 是如此直观和有效，任何使用它的人都会立即想知道这些年来 HTML 注入隐藏在哪里。
什么是WebRocketX？
WebRocketX 是一个浏览器端 JavaScript API，所有对服务器的异步调用都是通过它进行的。它更新页面的主要机制是使用innerHTML 属性通过DOM 插入HTML 片段。通过与服务器进行单点交互，开发人员可以使用 API 提供的以下功能。
创建一个登陆/欢迎页面，如下所示，并在其中包含以下库。登陆页面通常最好位于表单登录页面后面。换句话说，您在用户登录后将其转发给它。除了 jquery 库之外的所有内容都可以在上面找到的 WebRocketX 根源代码文件夹中找到。
jquery[latest version].js including the draggable library from jquery UI
domUtil.js
desktopContext.js
webapi.js
webRocketXStyles.cssPHP和Django的可运行示例模板可以在源代码的 templates 文件夹中找到。
欢迎页面是您的 Web 应用程序登录页面，通常位于登录页面后面。欢迎页面是您的 SPA 开始的地方。关键部分是库，包括框架变量设置、起始目标和通信错误警报。
<!DOCTYPE html >
< html >
< head >
< title > Welcome </ title >
<!-- The jquery UI library should include draggable if you want to implement draggable modals-->
< script language =" javascript " type =" text/javascript " src =" javascripts/jquery/jquery-ui-1.11.4.custom/external/jquery/jquery-1.12.4.min.js " > </ script >
< script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/domUtil.js " > </ script >
< script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/desktopContext.js " > </ script >
< script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/webapi.js " > </ script >
< link rel =" stylesheet " type =" text/css " href =" javascripts/webRocketX/v1_10_1/webRocketXStyles.css " >
< script type =" text/javascript " >
var asyncDebugMode = true ;
var signInPageURI = "" ;
var pageLoadTimeStamp = "" ;
var modalTargetSpacing = 10 ;
var staticPage = false ;
var disableNavigation = false ;
</ script >
< link rel =" stylesheet " type =" text/css " href =" styles/demo/styles.css " >
< link rel =" stylesheet " type =" text/css " href =" styles/demo/menu.css " >
< meta name =" viewport " content =" width=device-width " >
</ head >
< body >
<!-- header -->
< table class =" bodytext " >
< tr >
< td width =" 20 " > </ td >
< td >
My Header
</ td >
< td width =" 20 " > </ td >
</ tr >
< tr >
< td width =" 20 " > </ td >
< td class =" menuBar " >
< div id =" menu " > </ div >
</ td >
< td width =" 20 " > </ td >
</ tr >
</ table >
< div id =" errorSpan " style =" color:red;text-align:center; " > </ div >
< div id =" winMain " class =" startingTarget bodytext " >
<!-- Unused or default capsule attributes do not need to be included. They are just included here for teaching purposes. -->
< div id =" welcome " class =" metaCapsule " capsuleType =" inline " targetId =" winMain " jsOnload ="" reloadPage =" false " saveOriginalRequest =" false " saveResponse =" false " trackPage =" true " windowTitle =" welcome " errorPage =" false " >
Hello World
< br /> < br />
< a href =" # " onclick =" test1();return false; " > Test1 </ a >
</ div >
</ div >
<!-- footer -->
< table class =" bodytext " >
< tr >
< td width =" 20 " > </ td >
< td class =" menuBar " style =" padding: 10px 10px 10px 10px; " >
Powered By < a target =" _blank " href =" http://www.webrocketx.com " style =" text-decoration: none; " > < span style =" color:black;background-color:white;font-weight:bold; " > WebRocket </ span > < span style =" color:red;background-color:white;font-weight:bold; " > X </ span > </ a >
</ td >
< td width =" 20 " > </ td >
</ tr >
</ table >
< div id =" communicationErrorAlertWrapper " style =" display:none; " >
< div id =" communicationErrorAlert " class =" metaCapsule " capsuleType =" modal " >
< div id =" dialogLayer " class =" BDT_Dialog_Layer " >
< div class =" BDT_Dialog_Center " >
< div class =" BDT_Dialog_Decoration " >
< table class =" expand " >
< tr >
< td >
< div id =" communicationErrorMessage " > </ div >
< br /> < br />
< a href =" # " onclick =" $('#communicationErrorAlertWrapper').hide(); return false; " > Ok </ a >
</ td >
</ tr >
</ table >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >此页面将取代主要内容。我们将其放入名为 test1.html 的文件中。内容包装在配置有元数据 XML 属性的胶囊（div 标签）中。元数据是一种声明式编程，框架使用它来决定如何处理您的内容。
< div id =" test1 " class =" metaCapsule " capsuleType =" inline " targetId =" winMain " windowTitle =" Test 1 " >
Hello World Test 1.
</ div >此调用将替换 winMain 中的内容。真正酷的是，浏览器上的后退按钮将完美导航回上一页，但您仍将始终处于一个 SPA 页面中。对于框架中的任何导航都是如此，如果您决定希望页面在您导航回某个页面时始终从服务器刷新，而不是从浏览器缓存刷新，那么您就拥有完整且简单的控制。使用等于“true”的 reloadPage 属性标记页面的胶囊将使用最初请求的所有相同参数将页面重新提交到服务器，甚至在其原始闭包范围中调用最初分配给它的相同回调。
function test1 ( ) {
var successfulCallback = function ( innerHTMLObject ) {
alert ( "this my callback" ) ;
}
var webapi = new Webapi ( ) ;
webapi . setSuccessCallbackReference ( successfulCallback ) ;
webapi . setUrl ( "test1.html" ) ;
webapi . submitAsync ( ) ;
}它可能变得更简单吗？
WebRocketX 胶囊架构允许开发人员以声明方式控制大部分视图行为。
下面显示的是所有可能的胶囊属性。这将使您了解框架的大部分功能，以及它如何涵盖大多数用户导航用例。
胶囊中未包含的属性将设置为其默认值。必需的属性标有星号*。
虽然 SPA 通常等同于与 json 服务相结合的重型客户端 javascript 框架，但使用我们的轻量级 javascript SPA 框架，仍然很有可能在渲染 HTML 服务器端的同时获得 SPA 的优势。
访问 WebRocketX
