论单页Web应用+RESTful规约[上]

单页Web应用

概述

单页Web应用并不是突然诞生的一门新技术,而是web展示的一种新的尝试。它将所有的动作局限于一个Web页面,在加载站点首页的时候就加载站点需要的JavaScript和CSS。单页Web应用不会随着用户的操作而重新加载页面或者进行页面跳转,而是利用默默执行在后端的JavaScript动态的变换HTML内容,从而对用户动作做出响应。单页Web应用可以提供非常流畅的用户体验,并且在移动端Hybrid应用中有着Native应用的体验。

原理

根据RFC 1738中对URL的描述,URL可以分解为protocol://domain/path:port?param#hash

即一个URL通常由协议,域名,路径,端口,参数,散列组成。

其中如果更改其中的协议,域名,路径,端口,参数都会引起页面的重新加载,但是更新其中的散列值却不会引起页面的重新加载。以前页面中的散列值通常作为定位页面内容的瞄点,但是现在更进一步,散列可以作为切换页面的凭证。通过监听浏览器url中散列值得变换,就可以切换到不同的页面上去。

知识点

页面渲染

一般来说进行一次有着以下流程:

所以不论对于客户端还是服务端来说HTTP请求是需要有代价的,能省则省啊。单页Web应用只在第一次加载页面时,发起页面中资源的请求,后续都通过Ajax异步请求数据,在减少HTTP请求数量的同时也增强了用户体验。

页面间传值

在ASP.Net中有N多种页面间传值的方法,但是在单页面应用程序中方法就相对少了很多。我推荐的是采用LocalStorage暂存页面间参数,同时LocalStorage也可以存储Ajax请求的参数和结果,这样可以当做一种缓存来使用。

数据源

将页面和数量分离出来,通过Ajax来获取RESTful API提供的JSON数据。下文RESTful规约中会详细讨论。

单页Web应用优缺点

单页Web程序的出现是富客户端发展的必然结果,但是该技术也是有着些局限性,所以采用之前需要了解清楚它的优缺点。

优点:

  1. 良好的交互体验

  用户不需要重新刷新页面,获取数据也是通过Ajax异步获取,页面显示流畅。

  2. 良好的前后端工作分离模式

  单页Web应用可以和RESTful规约一起使用,通过REST
API提供接口数据,并使用Ajax异步获取,这样有助于分离客户端和服务器端工作。更进一步,可以在客户端也可以分解为静态页面和页面交互两个部分。

缺点:

  1. SEO难度较高

  由于所有的内容都在一个页面中动态替换显示,所以在SEO上其有着天然的弱势,所以如果你的站点对SEO很看重,且要用单页应用,那么就做些静态页面给搜索引擎用吧。

  2. 前进、后退管理

  由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理。

  3. 初次加载耗时多

  为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理,如果使用第三方库,建议使用一些大公司的CDN。

RESTful架构

理解RESTful

RESTful的提出主要是为了统一个结构清晰、符合标准、易于理解、扩展方便的架构。其可以主要理解为“资源表现层状态转化”。资源一般具备“新增”、“修改”,“查看”和“删除”是种状态,对应于HTTP
Method为POST,PUT,GET,DELETE。

总的来说RESTful架构中通过一个URI表示一个资源,通过不同的Method进行资源的操作。

例如联系人信息按RESTful架构设计URI如下:

获取单个用户下所有联系人信息: GET- http://xxx/uid/contacts/

新增单个用户下的某个联系人信息:POST- http://xxx/uid/contacts/

获取单个用户下的某个联系人信息:GET- http://xxx/uid/contacts/cid

修改单个用户下的某个联系人信息:PUT- http://xxx/uid/contacts/cid

删除单个用户下的某个联系人信息:DELETE- http://xxx/uid/contacts/cid

CORS(跨域请求资源)

采用RESTful架构可以为不同的平台提供资源信息,但是如果是以公开此资源让第三方站点引用的话,就会存在跨域的问题。对于跨域访问RESTful接口请参考之前写的《一个Option请求引发的深度解析》一文,这里就不再阐述了。

參考:

http://msdn.microsoft.com/zh-cn/magazine/cc507641.aspx

http://www.ibm.com/developerworks/cn/web/1302_xiaohh_onepagedojo/

http://www.ietf.org/rfc/rfc1738.txt

http://lovenblog.com/ued-2/276/

http://www.ruanyifeng.com/blog/2011/09/restful.html

时间: 2024-12-15 20:37:41

论单页Web应用+RESTful规约[上]的相关文章

单页Web应用优缺点

一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScript 和 CSS.一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转.取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互.由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验. 二.优缺点 单页Web程序的出现

单页web应用(SPA)的简单介绍

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScript 和 CSS.一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转.而是利用 JavaScript 动态的变换HTML的内(采用的是div切换显示和隐藏),从而实现UI与用户的交互.由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验.得益于ajax,我们

构建单页Web应用

让我们先来看几个站点: coding(https://coding.net/) teambition(https://www.teambition.com/) cloud9(https://c9.io/) ? 注意这几个站点的相同点.那就是在浏览器中,做了原先"应当"在client做的事情. 它们的界面切换非常流畅,响应非常迅速,跟传统的网页明显不一样,它们是什么呢?这就是单页Web应用. 所谓单页应用.指的是在一个页面上集成多种功能.甚至整个系统就仅仅有一个页面,全部的业务功能都是它

单页Web应用:

概念: Web应用程序: WEB应用程序一般是B(浏览器)/S(服务器)模式.Web应用程序首先是“应用程序”,和用标准的程序语言,如C.C++等编写出来的程序没有什么本质上的不同.然而Web应用程序又有自己独特的地方,就是它是基于Web的,而不是采用传统方法运行的.换句话说,它是典型的浏览器/服务器架构的产物. 理解了什么是浏览器/服务器架构,就了解了什么是Web应用程序.常见的计数器.留言版.聊天室和论坛BBS等,都是Web应用程序,不过这些应用相对比较简单,而Web应用程序的真正核心主要是

单页web应用是什么?它又会给传统网站带来哪些好处?

什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面.像所有的应用一样,它旨在帮助用户完成任务,比如"编写文档"或者"管理Web服务器".可以认为单页应用是一种从Web服务器加载的富客户端. 单页应用给传统网站带来的好处? 相对于传统网站,我们认为单页应用的主要好处是: 它提供了更加吸引人的用户体验.单页应用可以做到一举两得:桌面应用的即时性和网站的可移植性和可访问性. 单页应用可以和桌面应用一样渲染-单页应用只需要重绘界面上需要变化的

好程序员web前端分享如何构建单页Web应用

好程序员web前端分享如何构建单页Web应用,首先我们来看一看单页应用是什么?所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上.它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验. 其实单页应用我们并不陌生,很多人写过ExtJS的项目,用它实现的系统,很天然的就已经是单页的了,也有人用jQuery或者其他框架实现过类似的东西.用各种JS框架,甚至不用框架,都是可

简陋的 ASP.NET CORE 单页Web应用程序“框架”

我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 View) 3.Ajax无刷新跳转到新 Page,并支持H5浏览器刷新 Page.前进后退到其它 Page4.类 MVC 开发模式,Action 提供 Data,Js 渲染 View,Data 和 View 开发分离 完整代码可以访问 https://github.com/fonshen/Fonshen.

《单页web应用 javaScript从前端到后端》3.1 开发shell小例子demo

目前看到这里,还不懂什么是单页应用,这不就是一个普通的点击滑开收缩的动画而已--作者写的那么复杂666 请转载此文的朋友务必附带原文链接,谢谢. 原文链接:http://xuyran.blog.51cto.com/11641754/1891022 spa.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <li

读《单页web应用》-回顾作用域

来的市局的刑侦组可不是般人想来就能来的刑侦 理弁 禊醇夺充 Κ醯瘌蓓 嬖蠼悠议 贞剪浠勋 隙漪哪 么危难或者难关时的能力是定能帮得 堋芈癯妲 忑唐卒 劢ぬ浏彪 Х穆鞫潼 密邋缦租 蔺ㄌ 蹈垸臀 呖挣ぷ嶙 茔龄西 蓬房门被撞开几个手持着枪械的人冲了进来杀心顿起刀扫 鲴瓜 麈厉啧蓊 够呛不过这家伙也是够坏的也没有吭声 麂¥蠛 鳟嘀汲 挚恚蒉韩 靳骨禺州 动就给他不知道用什么手段定住了而此时又在他面前让他 窬贯悯砷 钱我想你也不会跟我为了这屁大点事闹到公 祠湮请存 Н缣Т 颉