既然blackberry上的widget开发支持html + css的方式，那当然会想到现在比较热门的ajax技术，标准的ajax技术采用的是xmlhttprequest，我们当然也可以在widget开发中使用这个javascript对象。
不过在这里我们考虑用frame的方式来模拟ajax的效果，基于这个实现的原因是因为两个：
1。 ajax的方式需要使用xmlhttprequest，这个需要添加一次和服务后台的交互，对系统的性能要求更多。
2。 很多应用场景，没有后台远程服务器的概念，尤其是我们可以使用widget扩展的方式来添加自己的javascript调用，这个时候我们可以考虑使用本地静态的html交互，frame就是一个比较可行的方法。
主要示例代码如下：
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width; height=device-heig" />
<title>Hello World Example</title>
<script src="Scripts/action.js" type="text/javascript"></script>
<link href="Styles/simple.css" rel="stylesheet" type="text/css" />
</head>
<frameset rows="30%,70%">
<frame name=top src="top.html" mce_src="top.html" scrolling="no"/>
<frame name=bottom src="bottom.html" mce_src="bottom.html" scrolling="no" />
</frameset>
</html>
这个是主页面，top页面代码如下：
<html>
<head>
<title>top.html</title>
<link href="Styles/simple.css" rel="stylesheet" type="text/css" />
<script src="Scripts/action.js" type="text/javascript"></script>
</head>
<body>
<table >
<tr>
<!--
<td><A style="text-decoration:none" HREF=bottom_1.html> <img src = "images/baidu.jpg" οnclick="window.parent.frames[”bottom”].location.replace('bottom2.html');alert('hehe')"; > </A></td>
-->
="window.parent.frames.bottom.div1.innerHTML='haha';"> </A></td>
<td><A style="text-decoration:none"><img src = "images/news.png" alt="新闻" οnclick="refreshnews();"> </A></td>
<td><A style="text-decoration:none"><img src = "images/sports.png" alt="运动" οnclick="refreshnews();"> </A></td>
<td><A style="text-decoration:none"><img src = "images/xinxi.png" alt="信息" οnclick="refreshnews();"> </A></td>
<td><A style="text-decoration:none"><img src = "images/ziliao.png" alt="资料" οnclick="refreshnews();"> </A></td>
<td><A style="text-decoration:none"><img src = "images/security.png" alt="安全" οnclick="refreshnews();"> </A></td>
<td><A style="text-decoration:none"><img src = "images/tool.png" alt="工具" οnclick="refreshnews();"> </A></td>
<td><A style="text-decoration:none"><img src = "images/system.png" alt="系统" οnclick="refreshnews();"> </A></td>
<td><A style="text-decoration:none"><img src = "images/game.png" alt="游戏" οnclick="refreshnews();"> </A></td>
<td><A style="text-decoration:none"><img src = "images/music.png" alt="音乐" οnclick="refreshnews();"> </A></td>
</tr>
</table>
</body>
</html>
bottom页面示例代码如下：
<html>
<head>
<title>Hello World Example</title>
<script src="Scripts/action.js" type="text/javascript"></script>
</head>
<body>
<!--
<button id="btnAppend" οnclick="append();">Increment Counter</button>
<button id="btnRefresh" οnclick="refreshme();">Refresh the system page</button>
-->
<div id=div1>
<table >
<tr>
<td><img src = "images/app13.png" > <A style="text-decoration:none" οnclick="refreshdetail1();"> 百度是全球最大的中文搜索引擎,占有 70%以上的网页搜索市场份额.百度致力于让网民更便捷地获取</br>
信息,找到所求,主要提供网页、MP3、图片、视频、新闻等搜索服务,以及贴吧、知道、空间等搜索社区产品XXXXXXXXXXXXXXXXXXX.......... </A></td>
</tr>
</table>
</div>
</body>
</html>
主要的页面javascript如下所示：
function refreshdetail2() {
window.parent.frames.bottom.div1.innerHTML=
'你好,欢迎来到blackberry widget体验中心22222222222222222' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</br>' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</br>' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</br>' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</br>' +
'XXXXXXXXX' +
'<table>' +
' <tr>' +
' <td>' +
' <img src = "images/baidu2.jpg" >' +
' </td>' +
'</tr>' +
'</table>' +
'再见！！！blackberry widget体验中心2222222222' +
'XXXXXXXXX' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
'</br>' +
'<table >' +
'<tr>' +
'<td><button id="btnRefreshprev2" style="width:80; height:30" οnclick="prevpage2();">上一个</button></td>' +
' ' +
'<td><button id="btnRefreshnext2" style="width:80; height:30" οnclick="nextpage2();">下一页</button></td>' +
'</tr>' +
'</table>'
}
下面是在9530上的演示效果：
top区域的图标菜单可以滑动：
选中具体的一条记录，点击，就可以进入具体的相信内容：
在上一个，下一页中，可以看到页面异步切换的效果：
