现今已有各种技术可以使网页浏览器停留在单个页面,并同时支持应用程序与服务器通信。
JavaScript框架
编辑
诸如Angular、Ember.js、Meteor.js(英语:Meteor (web framework))、ExtJS和React等面向网页浏览器的JavaScript框架采纳了单页应用(SPA)原则。
Angular是一个全面的客户端侧框架。其模板基于双向UI数据绑定(英语:UI data binding)。数据绑定是一种自动方法,在模型改变时更新视图,以及在视图改变时更新模型。其HTML模板在浏览器中编译。编译步骤创建纯HTML,浏览器将其重新渲染到实时视图。该步骤会在随后的页面浏览中重复。在传统的服务器端HTML编程中,控制器和模型等概念在服务器进程中进行交互以产生新的HTML视图。在Angular框架中,控制器和模型状态在客户端的浏览器中维护,从而使生成新页面不依赖与服务器的交互。
Ember.js是基于模型-视图-控制器(MVC)软件架构模型的客户端侧JavaScript Web应用程序框架。它允许开发人员在一个框架中通过常用的习惯用语和最佳实践来创建可伸缩的单页面应用程序。该框架提供丰富的对象模型、声明性双向数据绑定、计算属性,Handlebars.js提供的自动更新模板,以及一个路由器管理应用程序状态。
Meteor.js(英语:Meteor (web framework))是一个专门为单页应用设计的全栈(客户端-服务器)JavaScript框架。它具有比Angular、Ember或ReactJS更简单的数据绑定特性[6],并且使用Distributed Data Protocol(英语:Distributed Data Protocol)[7]和一个发布/订阅来自动将数据更改传播到客户端,无需开发人员编写任何同步代码。全栈反应确保从数据库到模板的所有层都可以在必要时自动更新。诸如服务器端渲染[8]等生态系统包则解决搜索引擎优化(SEO)等问题。
Aurelia (页面存档备份,存于互联网档案馆)是一个适用于移动设备、桌面和网页的JavaScript客户端框架。它类似AngularJS,但更新、更符合标准,并采用模块化举措。Aurelia使用下一代ECMAScript编写。[來源請求]
Vue.js(通常称为Vue)是一个用于构建用户界面的开源渐进式JavaScript框架。
React(通常写为React.js或ReactJS)是一个构建用户界面的JavaScript函式庫。它由Facebook、Instagram和个人开发者以及企业社区维护。React最大的优势是易于使用——基本上任何熟悉HTML的开发人员都可以创建React应用程序。另一个所称的优势是可能使用相同的技术堆栈来同时创建Web与移动应用程序。有多家公司使用React和Redux库来让开发人员创建复杂但可扩展的Web应用程序。[9]
Fulcro(英语:Fulcro (web framework))是一个全栈库,它采用Netflix的Falcor,Facebook的Relay和Om Next对反应性,功能性,数据驱动软件进行改编的数据驱动原则。[10][需要較佳来源]
Ajax
编辑
目前最常采用Ajax技术。主要从JavaScript使用XMLHttpRequest/ActiveX对象(已不建议使用),其他Ajax方法包括使用IFRAME或script HTML元素。jQuery等流行的库可以为不同厂商的浏览器的Ajax行为标准化,进一步推广了Ajax技术。
Websocket
编辑
WebSocket是HTML5规范中的一个双向有状态实时客户端与服务器通信技术,在性能和简单性方面优于Ajax[11]。
服务器发送事件
编辑
服务器发送事件(英语:Server-sent events)(SSE)是一种服务器向浏览器客户端发起数据传输的技术。一旦建立了初始连接,事件流将保持打开状态,直到客户端关闭。该技术通过传统的HTTP发送,并具有WebSockets缺乏的各种功能,例如自动重新连接、事件ID以及发送任意事件的能力。[12]
浏览器插件
编辑
可以使用浏览器插件技术(如Silverlight、Flash或Java applet)实现对服务器的异步调用。此种方法在业界已经过时。
数据传输(XML、JSON)
编辑
对服务器的请求通常会带来原始数据(如XML或JSON)或傳回新的HTML。在服务器返回HTML时,客户端上的JavaScript将更新DOM的部分区域。[13]在返回原始数据时,客户端侧的JavaScript通常将其转换为HTML,然后用它来更新DOM的部分区域。
服务器架构
编辑
瘦服务器架构
编辑
SPA技术将逻辑从服务器转移到了客户端。这导致Web服务器发展为一个纯数据API或Web服务。这种架构的转变在一些圈子中被称为“瘦服务器架构”,以强调复杂性已从服务端转移到客户端,并认为这最终降低了系统的整体复杂性。
胖的有状态服务器架构
编辑
这种设计是服务器在内存中保存必要的客户端所处状态。这种模式下,当任何请求到达服务器(通常因用户操作)时,服务器发送适当的HTML和/或JavaScript,以及具体的更改,以使客户端达到新的期望状态(如添加、删除或更新部分客户端的DOM)。与此同时更新服务器中的状态。这种设计下的大部分逻辑都在服务器上运行,HTML通常也在服务器上呈现。在某些方面,服务器是模拟Web浏览器,接收事件并执行服务器状态下的增量更改,将这些更改自动传播到客户端。
这种方法需要更多的服务器内存和处理能力,但优点是简化的开发模型,因为:1、应用程序通常完全在服务器中编写;2、服务器中的数据和UI状态在相同的内存空间中共享,不需要自定义客户端/服务器通信隧道。
胖的无状态服务器架构
编辑
这是有状态服务器方法的变体。客户端页面通常通过Ajax请求将表示其当前状态的数据发送到服务器。服务器使用这些数据能够重新构建需要修改的页面部分,并生成必要的数据或代码(如作为JSON或JavaScript),将其返回给客户端使其它达到新的状态。
此方法需要将更多数据发送给服务器,并可能需要更多计算资源才能部分或完全重建在服务器中的客户端页面状态。不过,这种方法更容易扩展,因为服务器中不存在每个客户端的页面数据,因此可以将Ajax请求分派到不同的服务器节点,而无需会话数据共享或服务器关联。