CNCMS - 聚焦
]　投稿人/来源： －
]　投稿人/来源： －
]　投稿人/来源： －
]　投稿人/来源：WEB开发网
]　投稿人/来源： －
]　投稿人/来源： －
]　投稿人/来源： －
]　投稿人/来源： －
]　投稿人/来源： －
]　投稿人/来源： －
正在加载更多...
对不起,没有更多结果.
每周资讯推荐BIWEB v5.88 手机网站面市
6种SEO优化的webapp手机网站系统
BIWEB团队隆重推出BIWEB v5.88 手机网站版本，6种SEO优化模式，系统自动生成.htaccess完美配合SEO优化，及保障系统安全。
BIWEB采用响应式WEB设计
电脑、平板电脑和手机全兼容
无论用户是使用笔记本、iPad或iPhone，BIWEB的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；也就是说，BIWEB webapp手机网站版本的页面有能力去自动响应用户的设备环境。
众多webapp手机网站模版
企业、电商、博客等手机网站模版应有尽有
BIWEB推出了上千款webapp手机网站模版，均是调好兼容性的中英文版纯HTML5页面，您可以应用到任何语言的网站系统上，轻松制作出webapp手机网站。
手机网站的时代强势来袭
截至2013年底，手机网民数达：5亿
网站流量有33%来自移动互联网并持续上升中，
56%的移动互联网网民每天上网1小时以上，
78%每天上网1次以上，
3G网络已普及，4G网络建设中，
手机网站的打开速度越来越快！
障碍越来越少，手机网站的发展势如破竹！
企业为什么需要手机网站？
一般的网站在手机上也能打开，为什么还要再建一个手机网站？
PC版网页在手机上缩放后，字体很小，看不清楚，PC版图片尺寸很大，页面很大，消耗很大的流量， 网页加载很慢，浪费钱，用户体验不好！
你想知道客户用手机浏览你网站看到的样子吗？马上用你的手机打开自己的网站看看！
WEBAPP 手机网站和普通的网站比，还有其他什么好处吗？
随身携带的手机网络，有些客户已经开始随时随地的做生意了，你愿意失去那5亿的庞大市场吗？
WEBAPP手机网站互动功能更多样化、人性化，多种联系方式让客户选择，询盘几率更高！
手机网站能更好的结合微博、微信做推广，移动社区+手机网站=最佳用户体验，更易促成用户成交！
搜索引擎会优先把手机版网站排在前面，如果还没有手机网站，你的生意可能已被别人抢占先机了！
BIWEB手机网站无需下载可跨平台使用，任何手机、平板电脑和PC电脑系统都支持，兼容性超强！
手机网站无需安装，无法窃取用户隐私，更无法携带恶意扣费等手机病毒，用户使用更安全更放心！
BIWEB WEBAPP手机网站自适应各种设备、各种屏幕、各种系统，一个后台，多种展示！
BIWEB WEBAPP 六屏合一手机网站系统其他的特点
整合了邮件、短信和QQ群发等多种营销方式，将营销思路完美融合到手机网站页面！
针对手机平板和电脑屏幕尺寸，更人性化的设计和布局，体验感最好的UI设计！
全站自定义SEO、详细页静态化、全站页面展示自定义、链接有4种优化！
整合当前最流行的微博，微信等公众平台功能，智能在线地图、乘车，即时电话、邮件！
一个后台维护，BIWEB系统会自动处理针对多种屏幕的展示，节省人工成本！
可以快速响应BIWEB各种网站的维护和研发需求，有长期和稳定的技术支持保障！
WEBAPP手机网站 和 APP 手机应用有什么区别？该如何选择？
如果你需要做的是电商、资讯或展示企业信息等跟手机硬件关联不大的应用，就应该选择WEBAPP！如果你的应用跟手机硬件关联很大，如照片处理应用、即时聊天应用，就应该选择APP！
我们最新的WEBAPP六屏合一手机网站系统和模版
BIWEB 六屏合一WEBAPP软件网络服务行业公司手机网站系统！大图展示，冲击力强，官方网站尽显大气，系统特点描述，功能详尽展示！软件开发公司、网络技术服务等公司首选企业网站系统！
BIWEB 六屏合一WEBAPP物流货运行业公司手机网站系统！大图展示，冲击力强，官方网站尽显大气，能吸引用户询价！是物流公司、货运企业等公司首选企业网站系统！
BIWEB 六屏合一WEBAPP企业B2B商城手机网站系统！产品瀑布流显示方式,16种颜色风格，6种SEO优化方式，产品询盘功能，能轻松转化用户询单！是生产商和批发销售商首选网站系统！
BIWEB 六屏合一WEBAPP中英文企业手机网站系统自适应各种设备、各种屏幕、各种系统，仅用一个后台管理！
强大的自定义折叠导航
导航一键点击即可：自由切换导航的
BIWEB 六屏合一WEBAPP手机新闻网站系统自适应各种设备、各种屏幕、各种系统，仅用一个后台管理！
强大的自定义折叠导航
导航一键点击即可：自由切换导航的折叠收
BIWEB 六屏合一WEBAPP企业手机网站系统自适应各种设备、各种屏幕、各种系统，仅用一个后台管理！八张大广告底图设计，极具视觉冲击力，可引导客户进行询单！栏目众多，功能完备！
BIWEB系统公告
经国家互联网应急中心（CNCERT）检测，指出BIWEB存在SQL注入风险漏洞，会导致未加密的用户名和密码泄露，如安装时加密了密码并修改了密码干扰码的不会有大问题，该漏洞影响BIWEB 5.85、5....
BIWEB 六屏合一WEBAPP物流货运公司手机网站系统！大图展示，冲击力强，官方网站尽显大气，能吸引用户询价！是物流公司、货运企业等公司首选企业网站系统！...
BIWEB团队动向
最新版的BIWEB WEBAPP手机商城支持16种色彩风格，可以完美适应各个行业的需求。
Alizarin茜素红
Amethyst 紫水晶
网页制作师 学习XHTML+CSS网页制作 将图片切图，写代码做成网页，兼容各种浏览器。 30天学习+30天实习 0基础...
BIWEB开发技巧
最近公司在做B2B的门户网站，翻遍了阿里，慧聪等知名B2B网站，发现他们的分类各有各一套，众多零散，为了跟更多大众的习惯吻合，我们还是采用了阿里的分类。随着数据入库的过程，问题就出来了。 我们录了36...
BIWEB开启英文短URL优化后出现500错误，主要原因是apache的rewrite mod未开启，解决办法：打开apache的配置文件httpd.conf ，取消 LoadModule rewri...
BIWEB行业关注
在liunx下用CutyCapt抓取网页快照的资料网上有很多了，这里重点是讲怎么在freebsd10下安装CutyCapt的。安装CutyCapt# pkg install CutyCapt如果光安装...
网上大把的资料都是说在linux下如何安装xvfb，就是没有说在freebsd下如何安装。经本人多时研究，总算得到了答案，现分享给大家。freebsd下xvfb不是这个名字了。可以用下面的命令进行安装...
我们的部分客户
以前拜访客户都需要记在本子上，客户多了就记不住了，用了BIWEB的CRM管理客户，随时随地可以用手机查询客户资料，真是太方便了！
用BIWEB webapp做的代理招生系统，是培训行业内最先进的代招系统了，招生老师在手机上就能提交学生信息，大受欢迎，我校生源也越来越多。
原生态的app价格太高，用了BIWEB的webapp，价格低维护方便，现在用手机来管理500多个业务员方便多了，腿也不疼了，腰也不酸了。
BIWEB自2005年推出后，经过不断的在各种大型项目中实践、总结、开发设计出来的一个快速开发、简单易用的面向对象的企业应用级PHP MVC建站系统。至2013年8月BIWEB推出webapp版本，标志着BIWEB从电脑网站系统正式步入移动端应用系统时代。
上海徐汇区漕溪路165号1209室IBM Bluemix
点击按钮，开始云上的开发！
developerWorks 社区
尽管受到媒体追捧，但是开发移动设备应用很多年来一直都是高投入、低回报的工作。
基于 iPhone OS 和 Google Android 的最新一代智能手机提供了一个更简单的应用开发方法：Web 应用。
这种一次编译就可以支持所有设备的方法可以降低开发成本。更重要的是，
所有这些高端设备都具备支持高级 HTML、JavaScript 和 CSS 的超现代的浏览器。在本文中，
我们将学习如何开发充分利用现代智能手机功能的广泛使用 Asynchronous JavaScript and XML (Ajax) 技术的应用。
我们将不仅能了解到如何发挥这些设备的最大功效，同时还能学习到如何处理它们之间的细微差别。
, 软件架构师, eBay
Galpin 是 eBay 的一名架构师，经常为 developerWorks 撰写文章。他曾在各类技术会议上发表演说，这些会议包括 JavaOne、EclipseCon 和 AjaxWorld 等。要了解 Michael 的工作进展，请您在 Twitter 上跟随 @michaelg 。
本文阐述如何开发一个运行在 Apple iPhone 以及基于 Android 的智能手机上的移动 Web 应用。
开发这些设备上的移动 Web 应用，我们不能使用平常的桌面浏览器，至少不能完全只使用桌面浏览器。
我们还需要模拟器或实际的设备。对于 iPhone 来说，我们需要使用 iPhone 模拟器。它是 iPhone SDK
的一部分。本文所使用的是 iPhone SDK 3.1。类似地，我们也需要使用 Android SDK。它包含了一个
Android Virtual Device 管理器，这个管理器可以用来创建运行各个 Android 版本的 Android 模拟器。
其中本文使用的是 Android SDK 2.1。本文所用到的大部分代码是 JavaScript 代码，以及一些 HTML 和 CSS。
此外，应用还有一个使用 Java™ 实现的服务器端。这并不是强制性要求的，和其它的 Web 应用一样，
我们可以自己选择使用任意的服务器端技术。我们需要使用 Java 1.6 来运行本文所开发的应用。
另外我们还需要使用 Jersey，它是 JAX-RS 的参考实现，以及所有相关的 Java Archive (JAR)
文件（见 ）。
手机浏览器与 WebKit
移动设备很多年就有 Web 浏览器了。然而，由于 Web 开发人员必须处理跨浏览器支持问题，
因此开发浏览器应用一直是很困难的。开发人员需要花费很多的时间来实现 HTML、JavaScript 和
CSS 在不同版本的浏览器上运行完全一致，如 Internet Explorer、Mozilla Firefox、Safari 等。
而桌面浏览器的问题几乎与手机浏览器中的问题如出一辙。不同版本的手机浏览器也是多得惊人。
每个设备制造商都拥有各自的浏览器，甚至来自相同厂商的设备在操作系统、屏幕大小等方面都有很大的差别。
有些浏览器只支持 WAP，而有一些则支持部分的 HTML，还有一些完全支持 HTML，但不支持 JavaScript。
幸好，现在情况已经大不相同了。到 2010 年 1 月，美国有超过 80% 的移动互联网流量都是通过 iPhone 或
Android 手机产生的。这两种操作系统不仅都是使用 WebKit 进行 HTML/CSS 渲染，
而且它们都是一样积极地使用 HTML 5 标准所采用的 JavaScript 引擎。没错。
移动领域的主流浏览器现在都使用了开放标准。这是 Web 开发人员所遇到的最好时机。
浏览器之间还是存在差别的，即使是不同版本的 iPhone 和 Android 也不例外。
其中 Android 浏览器差别最大。在 2.0 之前版本的 Android 上，Android 浏览器使用的是私有的
Google Gears 技术。虽然 Gears 有很多优秀的创新技术，现在已经包含在 HTML 5 标准中了。
然而，这意味着在很长的一段时间里，Android 浏览器是不支持其中一些 HTML 5 标准的，
但是我们还是能够使用 Gears 来实现一部分功能。本文的所有代码都是基于 HTML 5
标准并且是可以正常运行在 Android 2.0+ 或 iPhone 3.0+ 上的。
既然我们已经拥有了这些现代的基于 WebKit 的浏览器，接下来让我们来看看一些这些设备上的 Ajax。
手机浏览器上的 Ajax
像桌面 Web 应用一样，在移动 Web 应用上创建引人注目的用户体验的关键通常就是使用 Ajax。当然，
用户体验并不是使用 Ajax 的唯一原因；其中还可能涉及到速度和效率的原因。而后者恰恰是在移动 Web
应用上使用 Ajax 的更重要的原因所在，因为移动网络的延迟更大，而浏览器本身也受到处理器速度、
内存和缓存大小的限制。幸好，由于只需要关注于基于标准的浏览器，因此 Ajax
则恰好是许多因此变得更简单的技术之一。在详细讨论这个问题之前，
让我们先快速地了解一下本文所开发的应用所使用的后台服务器。
在开始之前，我们需要下载必要的 JAR 文件，其中包括 Jersey、Xerces、Rome 和 Google App Engine
SDK (见 )。然后将它们安装到下面的文件夹中：WebKitBlog&war&WEB-INF&lib。
我们可以从这里
应用的其它源代码。
WebKit 博客
本文的移动 Web 应用是一个简单的阅读移动 Web 开发新闻的应用。虽然目前它只是简单地从官方 WebKit
博客抓取 RSS 源，但是它可以经过简单地修改来收集多个 RSS 源。这个应用是一个普通的 Java Web
应用，它可以部署到任何一个 Java 应用服务器上。所有代码见清单 1。
清单 1. Feed 类@Path("/feed")
public class Feed {
String surfinSafari = "http://webkit.org/blog/feed/";
@GET @Produces("application/json")
public News getNews(@DefaultValue("0") @QueryParam("after") long after)
throws Exception{
URL feedUrl = new URL(surfinSafari);
SyndFeedInput input = new SyndFeedInput();
SyndFeed feed = input.build(new XmlReader(feedUrl));
List&Item& entries = new ArrayList&Item&(feed.getEntries().size());
for (Object obj : feed.getEntries()){
SyndEntry entry = (SyndEntry)
if (entry.getPublishedDate().getTime() & after){
Item item = new Item(entry.getTitle(), entry.getLink(),
entry.getDescription().getValue(),
entry.getPublishedDate().getTime());
entries.add(item);
return new News(feed.getTitle(), entries);
这个类使用 Java 的 JAX-RS 创建一个 RESTful 服务。@Path
注释表示了服务的终端，即服务的相对 URL 是 /feed。@GET
表示这个服务支持 HTTP GET。@Produces
声明这个服务将生成 JSON 格式的数据。这是一个简单的以 JSON 格式序列化数据的方法。
方法 getNews 接收一个名为 after 的参数，
即获取一个特定日期之后的实体。这里也使用 JAX-RS 注释来将参数 after
绑定到查询字符参数 after 上。如果没有赋值，它会使用默认值 0。
到这里，我只阐述了
中创建服务寻址和数据序列化的代码所用到的 JAX-RS
注释。该方法的主体实际上大部分依赖于处理 RSS 的 Rome 包。它只是下载最新的 RSS 源，
然后将它转换成我们应用所需要的数据，这里的数据就是 Item 和
News 这两类。其中唯一复杂的部分是文章的发表日期被转化为一个
long 值，并用作一个 ID。这是一个非常有用的 ID，
因为我们可以用它来进行排序，我们将在后面使用到。News 类如清单 2 所示。
清单 2. News 类@XmlRootElement
public class News {
private List&Item&
// constructors, getters/setters omitted for brevity
注意 News 类使用了 JAXB 注释 @XmlRootElement。
这个应用中不使用 XML，但是 JAX-RS 使用 JAXB 完成自动的序列化/反序列化。这个类只有一个标题属性和一组 Item。
Item 类如清单 3 所示。
清单 3. Item 类@XmlType
public class Item {
// constructors, getters/setters omitted for brevity
这个类包含的就是我们在 Web 应用中显示的内容。类似于 News 类，
它也使用 JAXB 注释，这样 JAX-RS 可以将它序列化成 JSON。这部分代码的最后一部分是配置
Web 应用的，以使请求能指向 JAX-RS。为了达到这个目的，我们需要编辑应用的 web.xml 文件，
如清单 4 所示。
清单 4. web.xml 配置文件&?xml version="1.0" encoding="utf-8"?&
&web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="/xml/ns/javaee"
xmlns:web="/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="/xml/ns/javaee
/xml/ns/javaee/web-app_2_5.xsd"
version="2.5"&
&servlet-name&WebKit Blog Servlet&/servlet-name&
&servlet-class&com.sun.jersey.spi.container.servlet.
ServletContainer&/servlet-class&
&init-param&
&param-name&com.sun.jersey.config.property.packages&/param-name&
&param-value&org.developerworks.mobile&/param-value&
&/init-param&
&load-on-startup&1&/load-on-startup&
&/servlet&
&servlet-mapping&
&servlet-name&WebKit Blog Servlet&/servlet-name&
&url-pattern&/resources/*&/url-pattern&
&/servlet-mapping&
&session-config&
&session-timeout&30&/session-timeout&
&/session-config&
&!-- Default page to serve --&
&welcome-file-list&
&welcome-file&index.html&/welcome-file&
&/welcome-file-list&
&mime-mapping&
&extension&mf&/extension&
&mime-type&text/cache-manifest&/mime-type&
&/mime-mapping&
&/web-app&
这是最典型的 web.xml 代码。我们可以看到 servlet 声明，应用使用了 JAX-RS 的参考实现 Jersey。
Servlet 的初始化参数指示 Jersey 扫描 org.developerworks.mobile
包中被标记为处理服务请求的类。同时，任何映射到 /resources/ 的请求都将映射到 Jersey servlet。
这里最后需要注意的是文件最后的 mime-mapping 部分。这是 MANIFEST 文件的 MIME 类型，
也是我后面将讨论到的脱机 Web 应用的一个关键。既然我们已经了解了 Web 应用将使用到的后台服务，
接下来我们将了解它使用到的前台。
Ajax 构建的用户接口 中我们可以看到应用有一个标准的 index.html 文件。这是应用的入口点，如清单 5 所示。
清单 5. index.html 文件&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&html manifest="application.mf"&
&meta http-equiv="content-type" content="text/ charset=UTF-8"&
&title&WebKit News&/title&
&meta name = "viewport" content = "width = device-width"/&
&script type="text/javascript" src="index.js"&&/script&
&body onload="loadEntries()"&
&h1 id="title"&Recent News About WebKit&/h1&&img
id="loader" src="loading.gif"/&
这是一个非常简单的 Web 页面，但是其中有许多值得注意的方面。首先，在文件头部我设置了视区。
它指示浏览器放大内容，使内容在设备上良好显示。在 UI 代码方面，这里只有一个标题和表示正在加载的图片。
剩下的部分就是 JavaScript。文件 index.js 中的 loadEntries
函数会发送一个 Ajax 请求加载数据。这个函数如清单 6 所示。
清单 6. loadEntries 函数function loadEntries(){
if (!window.JSON){
var head = document.getElementsByTagName("head")[0];
var jsScript = document.createElement("script");
jsScript.setAttribute("src", "json2.js");
jsScript.setAttribute("type","text/javascript");
head.appendChild(jsScript);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 &&this.status == 200){
var theFeed = JSON.parse(this.responseText);
var i = 0;
if (theFeed.entries){
var len = theFeed.entries.
for (i=0;i&i++){
addEntry(theFeed.entries[len - 1 -i], true);
var body = document.getElementsByTagName("body")[0];
body.removeChild($("loader"));
var urlStr = "/resources/feed";
xhr.open("GET", urlStr);
xhr.send();
在这个函数的开始部分，我进行了一些功能检查。大多数浏览器支持内置的解析和序列化 JSON 的函数。
这与 json.org 上的 JSON 库是相同的。然而，如果没有这个函数，我们需要在页面上包含这个文件，
然后我们就有相同的功能了。
另外，这是非常简单的 Ajax 代码。我们不需要担心 Internet Explorer 不支持，所以我们可以直接创建一个
XMLHttpRequest。我们可以设置它的 onreadystatechange
属性为一个函数，在本例中将创建一个闭包。当响应从服务器返回（readyState = 4）且处理过程没有发生问题（status = 200 OK）时，我们就使用 JSON.parse
函数来解析 JSON 响应。对于来自源的每一个记录执行 addEntry 函数。
这个函数为每一个记录创建 UI 元素。如清单 7 所示。
清单 7. addEntry 函数function addEntry(e, prepend){
var eDiv = document.createElement("div");
eDiv.setAttribute("class", "item");
var link = document.createElement("a");
link.setAttribute("href", e["link"]);
var title = document.createTextNode(e["title"]);
link.appendChild(title);
eDiv.appendChild(link);
var button = document.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("value", "Show");
button.setAttribute("id", "button" + e["id"]);
button.setAttribute("onclick", "showDescription('" + e["id"] + "')");
eDiv.appendChild(button);
var dDiv = document.createElement("div");
dDiv.setAttribute("id", e["id"]);
dDiv.setAttribute("class", "description");
dDiv.setAttribute("style", "display:none");
dDiv.innerHTML = e["description"];
eDiv.appendChild(dDiv);
var body = document.getElementsByTagName("body")[0];
if (!prepend && body.childNodes.length & 1){
body.appendChild(eDiv);
body.insertBefore(eDiv, body.childNodes.item(2));
这个函数里执行的都是标准的 DOM 操作。唯一复杂的方面是记录可以附加在后面或插到前面，
或者添加到顶部或底部。在前面的
中，函数的最后一个操作是删除正在加载的图片。
这其中包括基本的 Ajax 函数，我们可以根据用例选择使用。然而，应用需要从服务器下载许多数据，
然后再解析。对于移动 Web 应用，我们可以有更好的方式，我们可以使用本地缓存。
使用本地存储进行缓存
本地存储属于 HTML 5 规范，并且得到广泛的支持。它有一个简单的 name - value 存储机制，
而其中 name 和 value 都是字符串。所以将记录保存到本地存储是很简单的，如清单 8 所示。
清单 8. 保存到本地存储function saveLocal(entry){
if (!window.localStorage){
localStorage.setItem(entry["id"], JSON.stringify(entry));
同样，这里做了一些浏览器功能检查，按照 HTML 5 规范，首先检查 window 对象是否有 localStorage 属性。
如果有，那么我们就可以使用记录的 id 作为存储的键。
对于 value，必须使用字符串，因此我们使用 JSON.stringify 函数来将对象序列化成一个字符串。
这样，我们只需要一个从本地存储读取所有数据的函数。如清单 9 所示。
清单 9. 从本地存储加载数据function loadLocal(){
if (!window.localStorage){
return [];
var i = 0;
var e = {};
var id = 0;
var entries = [];
for (i=0; i& localStorage. i++){
id = localStorage.key(i);
e = JSON.parse(localStorage.getItem(id));
entries[entries.length] =
entries.sort(function(a,b) {
return b.id - a.
同样，这个函数从检查本地存储是否可用开始。接着，它遍历本地存储中的所有数据。
对于存储中的每一个值，我们再次使用 JSON.parse 函数来将字符串解析成为一个对象。
接着，我们需要对记录进行排序，因为它们从本地存储返回的顺序是不一定的。这里进行了一个降序排序，最新记录在最前面。
最后，我们就有了本地存储的保存和加载函数，我们需要将它们整合到 loadEntries 函数中，
如清单 10 所示。
清单 10. 添加缓存到 loadEntries 函数function loadEntries(){
// check for JSON object
var localEntries = loadLocal();
var newest = 0;
if (localEntries.length & 0){
newest = localEntries[0].
var i = 0;
for (i=0;i&localEntries.i++){
addEntry(localEntries[i]);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var theFeed = JSON.parse(this.responseText);
var i = 0;
if (theFeed.entries){
var len = theFeed.entries.
for (i=0;i&i++){
addEntry(theFeed.entries[len - 1 -i], true);
saveLocal(theFeed.entries[len - 1 -i]);
var body = document.getElementsByTagName("body")[0];
body.removeChild($("loader"));
var urlStr = "/resources/feed?after=" +
xhr.open("GET", urlStr);
xhr.send();
这里的主要区别是我们首先加载本地数据。接着确定其中最新的记录，然后在我们连接服务器时使用这个参数，
服务器将只会返回不在本地存储的记录。最后，当我获得新的记录后，在回调函数中我们需要调用 saveLocal
函数来将它们保存到本地缓存中。在新的记录存储到本地后，现在我们就可以启用 Web 应用的完全脱机访问。
使应用以脱机方式工作通常被视为移动 Web 应用开发的圣杯。虽然它可能很复杂，
但是许多 HTML 5 的新特性对它进行了简化。我们需要做的第一件事是确定什么东西需要脱机访问，
然后将它们列在应用的 MANIFEST 中，如清单 11 所示。
清单 11. 应用的 MANIFESTCACHE MANIFEST
index.html
loading.gif
对于这样简单的应用，它的 MANIFEST 也是非常简单的。它只包含全部的静态文件：HTML、JavaScript 和图片（以及 CSS）。
其中重要的一点是这个文件要用 MIME 类型 text/cache-manifest 挂载 —— 正如我们在
的 web.xml 文件中设置的那样。最后，在
我们可以看到最外层的 html 元素有一个属性 manifest，
中的 MANIFEST 文件。最后我们需要做的是对 loadEntries
函数进行最后的修改，如清单 12 所示。
清单 12. 脱机检查function loadEntries(){
// load local
// check if online
if (navigator.onLine){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var theFeed = JSON.parse(this.responseText);
var i = 0;
if (theFeed.entries){
var len = theFeed.entries.
for (i=0;i&i++){
addEntry(theFeed.entries[len - 1 -i], true);
saveLocal(theFeed.entries[len - 1 -i]);
var body = document.getElementsByTagName("body")[0];
body.removeChild($("loader"));
var urlStr = "/resources/feed?after=" +
xhr.open("GET", urlStr);
xhr.send();
检查 navigator 对象（window.navigator）的 onLine
属性就可以确定当前是否是脱机的。如果是脱机的，应用就不会请求服务器获取新的记录，而只显示所有本地记录。
现在，我们有了一个支持脱机的完整的移动 Web 应用。
移动 Web 应用是当前一个很热的话题。它们是一种为许多不同设备的用户提供服务的方法。
它们利用浏览器之间最高层次的标准化，这是 Web 开发人员最愿意看到的。在本文中，
我们了解了开发一个基于 Ajax 的移动 Web 应用所需要的重要技术。而且，通过 Ajax，
我们能够利用手机浏览器的最前沿技术。通过浏览本文中的示例代码，
我们知道在页面被请求时我们可以在服务器上生成所有的 HTML。然而，通过将所有 UI
放在客户端和使用 Ajax 从服务器获取数据，我们可以简单地将数据缓存到客户端，
甚至实现应用的脱机工作方式。
下载描述名字大小文章源代码32KB
“”：HTML 5 不仅仅关于 JavaScript。
阅读 developerWorks 上的文章了解一些新的标记。
“”（developerWorks，2009 年 12 月）：您喜欢使用 HTML 5 移动 Web 应用开发方法，但是您仍然希望您的应用出现在 iPhone App Store 和 Android Market 中吗？
阅读这个包含两部分的系列文章的第 1 部分，了解如何最好地利用这两个平台。
阅读这本免费的书籍以更好地了解 HTML 5 检查技术以及 HTML 5 的许多特性。
如果开发一个 iPhone Web 应用，您一定会使用 。
是 HTML 5 权威源代码。
developerWorks 上的
有许多关于各种 Web 解决方案的文章。
：个性化您的 developerWorks 体验。 developerWorks 和：随时关注 developerWorks 技术活动和网络广播。
查看 API 参考，并阅读 Android 最新新闻。
下载最新 。
因为 Android 是开放源码的，我们可以从
下载源代码。
本文使用的是 JDK 1.6.0_17。
来创建您的下一个开放源码开发项目。
并加入 developerWorks 社区。
developerWorks: 登录
标有星（*）号的字段是必填字段。
保持登录。
单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件。
在您首次登录 developerWorks 时，会为您创建一份个人概要。您的个人概要中的信息（您的姓名、国家/地区，以及公司名称）是公开显示的，而且会随着您发布的任何内容一起显示，除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。
所有提交的信息确保安全。
选择您的昵称
当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。昵称长度在 3 至 31 个字符之间。
您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。
标有星（*）号的字段是必填字段。
(昵称长度在 3 至 31 个字符之间)
单击提交则表示您同意developerWorks 的条款和条件。 .
所有提交的信息确保安全。
IBM PureSystems(TM) 系列解决方案是一个专家集成系统
通过学习路线图系统掌握软件开发技能
软件下载、试用版及云计算
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web development, Open sourceArticleID=503489ArticleTitle=开发移动 Web Ajax 应用publish-date=