《诺基亚 Web 浏览器 AJAX 入门》由会员分享，可在线阅读，更多相关《诺基亚 Web 浏览器 AJAX 入门（11页珍藏版）》请在金锄头文库上搜索。
1、 诺基亚 Web 浏览器 AJAX 入门 1(11) Article Forum.N 诺基亚 Web 浏览器 AJAX 入门 中文版本 1.0； 2007 年 3 月 19 日 简介 JavaScript 和 AJAX 都是 Web 2.0 和新型富互联网应用的实现技术。 Web 网站不再只限于一些静态的 Web 页面，其本身就是各种应用，为消费用户提供精彩的用户体验和媒体功能。成百上千万的开发伙伴们熟悉这种 Web 开发模型，各种创新应用也层出不穷，而本地应用和 Web 应用之间的差距日趋模糊。 Web 正在成为下一代应用的平台，而浏览器则在这种发展过程中发挥着重要的作用。 同时，世界正变得
2、越来越移动化。很明显，移动互联网接入是对各种 Web 应用进行最新创新性使用的主要驱动力量。 Web 会聚到移动终端上，使得市场潜力极其巨大，大大超越桌面电脑。 现代移动终端拥有强大的 Web 浏览器，使得移动终端能象 PC 一样访问同样的 Web 应用。与诺基亚 S60 3rd Edition 终端一起推出的 S60 Web 浏览器支持 JavaScript 和 AJAX。 S60 Web 浏览器基于 Safari 桌面浏览器所使用的同样的 Webkit 开源引擎。 JavaScript 和 AJAX 在 Web 上实现了类似应用的体验。它们能帮助克服移动浏览器的某些限制，同时提升用户体验。
3、这些技术提供多种优势有助于提升用户体验： 小屏幕可被分为更具有逻辑性的动态区域。 用标签省却滚动。 用一些动态元素改善导航性能。 使用 AJAX 避免页面刷新。 因为仅传输一部分页面，所以用 AJAX 使数据载入更快，同时也减少空中传输的数据量。 本文介绍并讲解了一个移动 Web 应用的功能，它使用 XHTML、 CSS、 JavaScript 和 AJAX，重点在于 JavaScript 和 AJAX。请注意，本文并非有关这些技术的教程：读者应该具备基础知识。 概述 这个范例应用被打包到 ajaxsample.zip 文件中。其中有下列文件： ajaxsample/main.html - 主
4、 XHTML 源文件 ajaxsample/mobile.css - CSS ajaxsample/main.js - 主 JavaScript 文件 ajaxsample/ajax.js - 与 AJAX 相关的 JavaScript ajaxsample/widget.js - 与 Widget 相关的 JavaScript ajaxsample/loading.gif - 动画进度图 ajaxsample/some.gif - 用于展示的目的的图标 ajaxsample/ajaxget.xml - 针对 AJAX GET 的模拟响应 ajaxsample/ajaxcalc.xml 针对
5、AJAX POST（计算器）的模拟响应 ajaxsample/info.plist Widget 项目文件 ajaxsample/icon.png - Widget 图标 诺基亚 Web 浏览器 AJAX 入门 2(11) Article Forum.N 当在浏览器中从本地文件系统（无论是桌面机还是 S60 移动浏览器）启动 main.html 时，大多数 JavaScript 功能都运行良好。但是， AJAX 部分需要一台在线 HTTP 服务器，它能通过网络提供 Ajax 响应。你可以在 HTTP 服务器上放置两个静态 XML 文件模拟这种服务器响应。 目前只能在 S60 3rd Editi
6、on, Feature Pack 2 beta C+ SDK 模拟器（ 2007 年 10 月发布，可从 诺基亚论坛 下载）上测试widget 功能。目前还没有公开发行支持 Feature Pack 2 的终端。 S60 3rd Edition, FP2 终端将于 2008 年推出。诺基亚论坛远程终端访问网站提供一些运行原型机固件的手机供终端上测试。 当在桌面机上运行这个范例代码时， widget 功能被禁用。会在 Widget 标签上用红字指出。 该范例代码已经在一些桌面机浏览器和诺基亚 S60 3rd Edition, Feature Pack 1 及 Feature Pack 2 Bet
7、a SDK 模拟器上做过测试。测试中使用了两款 S60 终端，即诺基亚 E61i（ S60 3rd Edition）和诺基亚 N95（ Feature Pack 1）。测试终端通过WLAN 连接访问 HTTP 服务器。 这个 Web 应用遵循 Web 开发的最佳实践方法。其内容、表现和功能划分清晰。 XHTML 文件是一种结构良好的文档，其中包括来自外部文件的 CSS 和 JavaScript。 该范例代码运行于任何兼容标准的浏览器，包括 S60 Web 浏览器。请注意，该范例代码不能运行与第一批 S60 3rd Edition 终端的 S60 服务浏览器，因为服务浏览器只支持 WML，不支持
8、 XHTML。 JavaScript 功能 本章讲解了该范例代码的 main.js JavaScript 文件中的 JavaScript 代码的最重要部分。与 AJAX 和 widget 相关的代码则在后面章节中讲解。 首先是一些帮助函数，这里用到了 $()和 debug()。 $()只是一个使用方便的包装器，用于调用标准的JavaScript 函数 document.getElementById()。在各种 JavaScript 库里，通过某个帮助函数简化document.getElementById()的使用以提高代码的可读性，这种做法相当普遍。document.getElementByI
9、d()函数是浏览器中最为重要的函数之一。 debug()函数将给定字符串输出到安装有 Firebug 插件的 Mozilla Firefox Web 浏览器的调试控制台上，从而在开发期间提供帮助。这个插件对 Web 开发很有用，也是获得强烈推荐的工具。 debug()函数在 S60 浏览器中没有作用，因为 S60 浏览器没有类似插件。请注意，针对其它浏览器也有类似的调试插件。 当文档被浏览器完全载入后，就会执行该 JavaScript 代码。这是通过设置 body 元素的 onload()回调实现的： 如下文所示，函数 myonLoad()通过调用一些初始化函数对 Web 应用进行初始化。请注
10、意，这里没有使用window.load 函数，因为 Firefox 会过早激活该函数，而在桌面机上就是使用 Firefox 以调试这个范例代码。 加标签界面 如今的 Web 应用通常使用一种加标签的用户界面将内容划分为不同的部分。使用各种标签使得一个页面内能有更多的内容，也能更快地访问页面内其它部分或内容。使用标签也比在长文档中滚动方便。过去，每一个标签往往是在鼠标点击后被单独载入。现在，预载入全部标签内容是很平常的事，而且一开始只显示主标签，隐藏其它标签。更改活动标签即时可得，因为无需访问网络。 标签在移动浏览场境中很有用，因为它们允许在有限屏幕区域里有更多的内容，也可以有多个部分，无需重新
11、载入页面。在移动浏览中避免重新载入十分重要，因为网络延时较长。页面载入比在固定网络中花费更多时间，而且用户等待页面载入也很烦人。 诺基亚 Web 浏览器 AJAX 入门 3(11) Article Forum.N 这个范例应用中有五个标签，它们都在文档初始载入时被预载入。开始只显示主标签，其它标签被隐藏。 DOM 元素的显示和隐藏通过下列代码实现： elem.style.display = block; / show element elem.style.display = none; / hide element 遵循良好的 Web 开发实践，具有正确语法的内容，各个标签都以一个单一无序的列
12、表实现。用 CSS 进行视觉格式化，使之看上去如一些水平排列的标签。以下是 XHTML： Main Clock AJAX AJAXCalc Widget 请注意，锚中并没有 onclick()句柄。实际上， XHTML 代码中根本没有 JavaScript。 onclick()句柄是以下列JavaScript 函数在 body 载入过程中被附上来的： function associateTabClicks() var tabs = $(navlist).getElementsByTagName(a); for(var i=0; i Another Another term explained
13、here thing in this sentence. 这也是构建 tooltips 的典型方法：内容与提示编写在一段代码中。想像一下这样做的好处：当使用 AJAX 从服务器载入内容时：文本与相关提示一起获得了。 将 tooltip 只置于右上角可能并不是一种最理想的用户界面解决方案。也可以用 JavaScript 来定位弹出式窗口，但这需要仔细计算屏幕的边界，本范例中并没有这样实现。 动态内容 用 JavaScript，可以在页面中对内容进行动态处理。 JavaScript 中有许多函数能作 DOM 操作。这个范例只使用了其中一部分函数，如 document.createElement()
14、和 elem.appendChild()。 请查看主标签中右边的 Insert Text链接。该链接的 onclick()句柄被关联到下面这个函数： function appendText() var newtext = $(testchunk).cloneNode(true); / clear the id so there will be no duplicate ids newtext.id = ; $(tab1).appendChild(newtext); associateTipClicks(); 从 ID 为“ testchunk”的 DIV 中获取新内容。该 DIV 被克隆并被添
15、加到“ tab1” DIV 中。如果不是克隆，文本内容将被移走而不是被复制到新位置。请注意， onclick()句柄提示通过 associateTipClicks()被附加到了新文本上。 时钟 本应用的第二个标签演示了在浏览器中使用 JavaScript 定时器。这个范例含有一个每秒更新一次的时钟。这个时钟完全在浏览器中运行，无需访问服务器。 定时器以下列代码启动： setInterval(clockTimerCallback, 1000); setInterval 是标准的 JavaScript 函数，它启动一个周期性定时器。另一个函数是 setTimeout，用于激活一个一次性定时器。 clockTimerCallback()函数每秒钟被调用一次。它使用 JavaScript Date()对象在浏览器中获取当前时间。请查看代码了解如何动态创建一段代码并将其插入到 DOM 树中。 诺基亚 Web 浏览器 AJAX 入门 5(11) Article Forum.N 定时器是在 Web 应用中实现后台处理的方法（请注意 JavaScript 没有休眠函数）。请确保代码简短紧凑。不要长时间在忙循环中运行 JavaScript，这样会使浏览器被锁死！ 注：在被测诺基亚 E61i 终端的浏览
