既然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區域的圖標菜單可以滑動：
選中具體的一條記錄，點擊，就可以進入具體的相信內容：
在上一個，下一頁中，可以看到頁面異步切換的效果：
