介绍请求响应模型
在这个部分，我们先来实现第一部分即web应用程序，首先我们探讨下其程序架构。在web应用程序中，首先是一个html页面index.html，这个页面中将包含所有的页面布局，并且处理所有用户所触发的事件。而这个页面在稍后的移动应用程序部分，会被从服务器(这里我们使用apache 2.2)中下载到用户移动设备的浏览器中。而“Get Category”和“Choose Category”按钮，则会触发ajax请求Yahoo的新闻RSS连接http://rss.news.yahoo.com,
由于ajax安全域的限制，这里不能直接对Yahoo直接发起跨域的请求，所以为了模拟效果，我们在web服务器上使用了一个bridge.php的文件进行中转处理，这个文件直接使用http get去请求Yahoo的新闻，如下结构图：
而在本教程后半部分的介绍Android应用程序中，则不再需要bridge.php文件了，因为我们会把HTML页面运行在android.webkit.WebView控件中，不再受到跨域的限制了，这将在第三部分进行详细讨论。
jQuery Mobile页面结构
本节开始介绍如何使用jQuery Mobile去编写页面，注意使用jQuery Mobile编写的页面，在普通的象IE浏览器上也是可以运行的。在jQuery Mobile框架编写的页面中，通常有一个“父页面”，在这个页面中，可以包含多个子页面，其中它们之间通过锚点进行连接跳转。我们的index.html页面的
初步结构如下：
<!-- Container page --> <div data-role="page" data-theme="b" id="containerPage"> . <!-- Content pages will go here --> </div>其中，在这个div层中，使用了data-theme=“b”的属性，这个是jQuery Mobile预先为我们设置好的a,b,c,d,e5种风格属性，
其中这里使用的b风格，使用的是偏蓝色的风格体系，其他的4种风格体系如下所示：
而其他各个页面都包含在这个父页面的容器内。具体来说，一个内容页必须包括页头header,页面具体内容区域content,和页脚footer,用如下方式定义：
• <div ... data-role="header" ... > • <div ... data-role="content" ... > • <div ... data-role="footer" ... >下面我们看下具体的目录分类页的结构和代码，如下图：
<div data-role="header" id="hdrCategories" data-nobackbtn="true"> <h1>Categories</h1> <a id="buttonAddCategory" data-icon="plus" class="ui-btn-left" href="" data-role="button" data-inline="true">Add</a> </div> <div data-role="content" id="contentCategories"> <ul data-role="listview" data-split-icon="delete" data-split-theme="d" id="currentNews"></ul> </div> <div data-role="footer" id="ftrCategories"></div>在上面的代码中，其中的data-nobackbn的值设置为true, 表明这里不需要设置一个返回的按钮。而我们在增加新闻分类的按钮中(<a id="buttonAddCategory" ...>)设置了data-icon的样式为plus,即代表这个按钮中会有一个加号，而样式ui-btn-left是设置按钮在header的左边对齐，而在页脚部分我们则留空，在本文中不设置任何东西，而你当然可以设置一些象版权声明那样的文字。
我们再来学习中间部分id为contentCategories的层，在这个层中，我们使用了jQuery Mobile中的分隔listview样式，即<ul data-role="listview”……/>部分，这是一个项目列表的形式呈现在用户面前，注意data-split-icon指定用了一个样式为删除按钮的图作为分隔，可以看到，每一行都被划分为两个部分，左边部分是显示当前的新闻分类和最新一条新闻，右边是删除按钮。
