单页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

论单页Web应用和RESTful架构的更多相关文章

  1. Web应用和RESTful架构

    Web应用和RESTful架构 单页Web应用 概述 单页Web应用并不是突然诞生的一门新技术,而是web展示的一种新的尝试.它将所有的动作局限于一个Web页面,在加载站点首页的时候就加载站点需要的J ...

  2. 单页Web应用优缺点

    一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...

  3. 单页Web应用:

    概念: Web应用程序: WEB应用程序一般是B(浏览器)/S(服务器)模式.Web应用程序首先是“应用程序”,和用标准的程序语言,如C.C++等编写出来的程序没有什么本质上的不同.然而Web应用程序 ...

  4. 构建单页Web应用

    摘自前端农民工的博客 让我们先来看几个网站: coding teambition cloud9 注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情.它们的界面切换非常流畅,响应 ...

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

    文章来源:<单页Web应用:JavaScript从前端到后端> 什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面.像所有的应用一样,它旨在帮助用户完成任务 ...

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

    单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.J ...

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

    我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 Vie ...

  8. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  9. 构建单页Web应用——简单概述

    一.开发框架 ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局.随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于 ...

随机推荐

  1. Oracle笔记 十三、PL/SQL面向对象之package

    --将方法和过程用包定义 create or replace package pkg_emp as --输入员工编号查询出员工信息 procedure pro_findInfo( in_empno e ...

  2. 使用cnpm搭建企业内部私有NPM仓库

    cnpm是企业内部搭建npm镜像和私有npm仓库的开源方案.它同时解决了现有npm架构的一些问题. 为什么企业需要私有NPM 主要有如下理由: 确保npm服务快速.稳定:对于企业来说,上线生产系统的时 ...

  3. 0329 复利计算器5.0 Juint单元测试 组员 254列志华 253韩麒麟

    一.主要功能与需求分析 1.本金为100万,利率或者投资回报率为3%,投资年限为30年,那么,30年后所获得的利息收入:按复利计算公式来计算就是:1,000,000×(1+3%)^30 2.如果按照单 ...

  4. Android IOS WebRTC 音视频开发总结(十七)-- 调试技巧

    本文章主要介绍WEBRTC在各平台下调试或日志查看方式,以方便问题排查,包括BS,PC,Android,IOS(本系列文章转载请说明出处,博客园RTC.Blacker). 1,浏览器开发: 这种开发方 ...

  5. 内核linux-3.4.2支持dm9000

    当前烧写:      fs:    nfs 30000000 192.168.1.17:/work/nfs_root/first_fs_mdev.yaffs2    //这里不能使用nfs挂载,只能直 ...

  6. Windows 7/8/8.1 硬盘安装法实现 ubuntu 14.04 双系统

    一.软件准备 1. 下载 Ubuntu 系统镜像:http://www.ubuntu.com/download/desktop/ : 这里使用的是 ubuntu 14.04.1 LTS 64bit 版 ...

  7. 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

    项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...

  8. c#学习之Socket网络编程

    我是新手以前没写过博客 希望大家勿喷, 在编写Socket的时候需要导入System.Net.Socket 命名空间.利用该类我们可以直接编写Socket的客户端和服务的的程序了, 这里我们只讲tpc ...

  9. mysql给root开启远程访问权限,修改root密码

    1.MySql-Server 出于安全方面考虑只允许本机(localhost, 127.0.0.1)来连接访问. 这对于 Web-Server 与 MySql-Server 都在同一台服务器上的网站架 ...

  10. WindowManager和WindowManager.LayoutParams的使用以及实现悬浮窗口的方法

    写Android程序的时候一般用WindowManager就是去获得屏幕的宽和高,来布局一些小的东西.基本上没有怎么看他的其他的接口. 这两天想写一个简单的类似于Toast的东西,自定义布局,突然发现 ...