tp5ajax数据交互
HTML5是许多新兴Web技术的总称，包括标准化的富媒体和交互性。 HTML5还可作为开发可靠的脱机应用程序的基础。 对于经验丰富的Web开发人员而言，使用HTML5比学习一种新的编译语言（例如Objective-C或Java™语言）更具吸引力，但是HTML5应用程序有其自己的学习曲线。 本文介绍如何成功混合在线内容，同时为未连接到网络的用户提供丰富的体验。
样例应用
此示例应用程序旨在用于各种台式机和移动设备。 它提供了一套食物和饮料食谱。 三种配方是静态的，用户离线时可以使用。 在线时，该应用程序将能够显示通过Web服务提供的“每Eclipse谱”，该服务通过Ajax传递内容。
技术复用是敏捷Web开发的关键。 此示例应用程序使用两个流行的开源库：
- jQuery —对JavaScript和DOM的可靠跨平台访问
- jQTouch —使用WebKit浏览器HTML5移动应用程序框架
请参阅相关主题有关jQuery和jQTouch的更多信息。
为了获得最佳结果，请使用Apple Safari V4或更高版本开发HTML5应用程序，尽管Google Chrome也可以使用。
使用jQTouch
您可以最好地将jQTouch应用程序作为单个HTML文档进行管理。 应用程序中的每个“页面”都是具有唯一id属性的不同HTML <div> 。 jQTouch应用程序的基本轮廓如下所示：
- HTML标头和导入
- 开始
<div> - 零个或多个具有唯一ID的
<div>附加页面
设置进口
该示例应用程序的顶部导入了该应用程序CSS和JavaScript。 它还配置HTML5脱机缓存。 清单1提供了必要的代码。
清单1. jQTouch和HTML5离线所需的标题
<!DOCTYPE html>
<html manifest="sample.manifest">
<head>
<meta charset="utf-8" />
<title>Sample recipe application</title>
<style type="text/css">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
<style type="text/css">@import "jqtouch/themes/jqt/theme.min.css";</style>
<style type="text/css">@import "sample.css";</style>
<script src="jqtouch/jqtouch/jquery.1.3.2.min.js"
type="text/javascript"></script>
<script src="jqtouch/jqtouch/jqtouch.min.js"
type="text/javascript"></script>
<script src="sample.js" type="text/javascript"></script>
</head>启用HTML5
该示例应用程序包括在脱机状态下仍可访问的功能。 通过包含manifest属性来启用该功能。 该属性的值必须是高速缓存清单文件的路径，如下所示：
<html manifest="sample.manifest">缓存清单通常包含两套资源：
- 脱机使用需要缓存的资源列表
- 仅在文档联机时可能可用的资源列表
缓存清单的语法非常简单，如清单2所示。
清单2.示例应用程序的缓存清单文件
CACHE MANIFEST
# This is a comment and will be ignored
# Files specific to this application:
sample.js
sample.css
# Files that are a part of jQTouch:
# (See the sample code for a complete list)
jqtouch/jqtouch/jqtouch.min.css
NETWORK:
# These resources will be available only when online:
sample.json 第一行始终是CACHE MANIFEST 。 每个可能处于脱机状态的资源（HTML页面，CSS，JavaScript，图像或任何其他类型的文件）都在新行中列出。 首次访问该应用程序时，浏览器将检查缓存清单，下载所有资源，并将其存储以供脱机使用。
NETWORK:行之后的资源不会被缓存，只有在网络可用时才能访问。 尽管此处列出了文件，但是您可以使用部分路径名。 例如，您可以在此处包括/online/并设置应用程序，以使所有仅在线资源都位于该路径下。
忘记将应用程序中的所有资源列出为脱机或联机，通常会导致整个应用程序无法标记为已启用脱机功能。 当前实现中可能引起混乱的其他细微之处包括：
- Web服务器必须将清单文件作为
text/cache-manifest类型提供。 - 指向缓存清单的文件（在此示例中为sample.html）无需列出。
- 清单中列出的项目仅在您修改清单本身时才会重新加载，而在这些资源更改时则不会重新加载。
- Web服务器应为清单文件提供无缓存响应头。
- 如果网页引用了未显示的文件，则可能不会缓存该应用程序以供脱机使用。 通常，此错误是无提示的。 在Safari V4和更高版本中，检查“ 活动”面板中是否有任何警告。
如果正确设置了HTML5脱机应用程序，则应该可以使用浏览器和服务器访问一次该应用程序，然后关闭服务器或本地网络的访问，刷新并仍然能够与内容进行交互。 如果浏览器显示无法访问该站点，请重新检查上述列表以了解配置问题。
用jQTouch开发
jQTouch库需要多次导入：
- jqtouch.min.css。 — jQTouch本身CSS
- theme.min.css。 —当前主题CSS（此示例使用默认主题）
- jquery.1.3.2.min.js或更高版本-jQuery本身
- jqtouch.min.js。 — jQTouch主脚本
- samples.js。 —您的自定义JavaScript，它定义了此应用程序的独特功能
jQTouch内容页面
jQTouch应用程序中的每个页面实际上只是遵循某些约定HTML <div> ：
- 它必须具有唯一的
id属性。 - 该ID应该使用普通HTML锚元素链接到应用程序中的某个位置。
- jQTouch应用程序的主页是具有类值
current的<div>。
jQTouch库提供了许多方法来动画化页面之间的过渡。 默认情况下，它使用CSS3使用吸引人的“滑动”过渡。 在许多WebKit实现中，这些转换都是硬件加速的，从而提供了一种自然的，类似于应用程序的感觉。 您可以在jQTouch应用程序的主页上找到这些页面的链接，如清单3所示。
清单3.主页，由名为“ current”的类指定
<div id="home" class="current">
<div class="toolbar">
<h1>HTML5 Sample</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#recipe1">Breakfast Circles</a></li>
<li class="arrow"><a href="#recipe2">Slowhand Jackson</a></li>
<li class="arrow"><a href="#recipe3">Potato Chip Cookies</a></li>
<li class="arrow online-required"><a href="#recipe4">Recipe of the Day</a></li>
</ul>
</div> 大多数jQTouch页面由一个具有唯一ID的外部<div>和一个带有包含页面标题的属性toolbar的<div> 。 后续内容采用列表或其他段落的形式。
rounded和arrow类均以主要的jQTouch样式定义。 根据安装的主题，它们的外观可能会改变。 本示例使用默认的黑色和灰色主题，如图1所示。
图1.示例应用程序的主页
前三个配方都是在同一HTML5页面中定义的所有静态内容。 它们每个都有唯一的ID，例如， recipe1 。 这些ID用于从首页定位到新页面，如下所示：
<a href="#recipe1">Breakfast Circles</a></li>清单4包含此第一个配方的源代码。 图2说明了HTML渲染。
清单4. jQTouch应用程序中的静态内容
<div id="recipe1" class="recipe">
<div class="toolbar">
<h1>Breakfast Circles</h1>
<a class="back" href="#">Back</a>
</div>
<ul class="rounded">
<li>2C flour</li>
<li>1/2C sugar</li>
<li>1/2C confectioners sugar</li>
<li>2T Earl Grey tea leaves (about 6 bags)</li>
<li>1/2t salt</li>
<li>1t vanilla</li>
<li>1/2C butter</li>
<li>Cold water</li>
</ul>
<p>
Pulse dry ingredients in food processor to pulverize tea leaves.
Add vanilla, butter and pulse, adding as little water as
necessary to form loose dough. Divide into two 2" logs and roll
with parchment paper. Chill 30 min.</p>
<p>
Cut into 1/4"-thick wafers and bake at 375 degrees on parchment
until edges start to brown, about 12 min.
</p>
</div> 请注意，此<div>包含一个新的类值： recipe 。 默认的jQTouch样式表无法对嵌套的<p>元素提供良好的样式控制，这里将其用于配方说明。 因为jQTouch只是一个Web应用程序，所以您可以随意添加自定义样式，但是您喜欢使用普通CSS。
在这种情况下，sample.css包含一些简单的自定义，包括div.recipe p { margin: 1em; } div.recipe p { margin: 1em; } ，为食谱说明提供诱人的利润。
图2.示例应用程序的主页
脱机用户可以使用这三种静态配方，因为它们的内容都包含在HTML页面中。 本文的下一部分将演示如何混合使用在线和离线内容，以创建一个灵活的，可扩展的Web应用程序，以提供良好的离线功能。
上网
清单5中显示了列表中的最后一个配方项，其中包含一个额外HTML类： online-required 。
清单5.仅在用户在线时显示的项目
<li class="arrow online-required">
<a href="#recipe4">Recipe of the Day</a>
</li> 在此应用程序CSS定制层中， .online-required设置为display: none 。 这意味着默认情况下，应用程序被假定为脱机，并且不显示任何联机资源。
然后，应用程序如何知道您何时在线？ 可以在JavaScript定制脚本sample.js中找到该代码，如清单6所示。
清单6.用于管理在线资源JavaScript
/* Initialize jQTouch on startup.
[ See sample code for complete listing ] */
// Standard jQuery method to run code when the browser
// has finished loading all resources
jQuery(document).ready(function () {
// If online, show all online-only resources
if (window.navigator.onLine) {
jQuery('.online-required').show();
}
... HTML5指定一个JavaScript API值window.navigator.onLine 。 如果为true，则浏览器处于联机状态并已连接到网络。 脱机时，它只能访问缓存清单中的脱机资源。 在此应用程序中，当应用程序处于online-required将显示所有具有online-required类的DOM元素。
接受在线数据
用在线数据填充jQTouch应用程序的有效方法是提供框架页面以预先保存该数据。 清单7显示了仅在线食谱的<div> 。
清单7.仅在线配方的占位符jQTouch页面
<div id="recipe4" class="recipe">
<div class="toolbar">
<h1>Recipe of the Day</h1>
<a class="back" href="#">Back</a>
</div>
<!-- The recipe will be populated here -->
</div> 现在，在自定义JavaScript中，您需要一个事件处理程序来请求配方并用结果填充HTML页面。 一种明显的方法是为#recipe4 ID定义一个onclick处理程序。
但是，jQTouch会覆盖普通的单击行为，以实现其在页面之间移动的魔力。 相反，您可以利用CSS3过渡触发开始和结束事件这一事实。 您可以使用jQuery绑定这些事件，即使这些事件不是jQuery固有的也是如此。 以下是代码：
jQuery('#recipe4').bind('pageAnimationStart', function () {
...
}); 在单击事件之后， pageAnimationStart事件几乎立即触发。 过渡完成后， pageAnimationEnd触发pageAnimationEnd 。 我更喜欢将大多数动作与start事件相关联，因为这使浏览器有时间在用户观看动画时收集数据。
通过Ajax填充数据
剩下的只是一些正常的Ajax交互。 本示例假定结果格式为JSON数据。 在这种情况下，数据直接来自JSON文件-sample.json，如清单8所示。
清单8.包含当日配方的JSON数据
[ { "title" : "Doggie Delight", "ingredients" : \
["1 cup dry kibble", "1 pound butter", "1 beef bouillon cube", \
"2 tbsp oregano" ], "instructions": "Combine all ingredients in bowl.\
Season to taste. Serve immediately." }] 清单9包含获取这些数据并填充占位符<div> 。
清单9.填充占位符的JSON数据
jQuery.ajax({ url: "sample.json",
success: function (data) {
// Set the recipe title
jQuery('#recipe4 h1').text(data[0].title);
// Create a UL and add each recipe item to it
var ul = jQuery('<ul class="rounded">');
jQuery.each(data[0].ingredients, function (index, item) {
jQuery('<li>').text(item).appendTo(ul);
});
// Add the ingredients list and the recipe instructions
jQuery('#recipe4').append(ul).append(
jQuery('<p>').text(data[0].instructions));图3显示了动态数据的最终渲染。
图3.浏览器中的动态配方
结论
每天都有更多新的移动设备投放市场。 尽管可以为每个新平台和硬件开发自定义本机应用程序，但小型敏捷团队仍有机会创建具有类似性能特征的跨平台移动Web应用程序。 无论是作为大型本机应用程序的原型还是本身的一流网站，移动Web应用程序对于已经了解HTML，JavaScript和CSS的开发人员都具有吸引力。
HTML5中提供JavaScript API意味着Web应用程序可以访问比以往更多的硬件数据-不仅是网络状态，还包括方向，位置和其他功能。 在许多情况下，这些API在流行的移动浏览器中已经获得了广泛的支持。
Web开发人员不应在匆忙进行移动应用程序开发时感到落后。 您可能已经具备了为智能手机，上网本和平板电脑开发所需的所有技能。
翻译自: https://www.ibm.com/developerworks/opensource/library/os-html5data/index.html
tp5ajax数据交互
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
