Categories: S60 3rd Edition, Feature Pack 2 | Web Runtime (WRT) | Lang-CN

This page was last modified 00:31, 24 April 2008.

From Forum Nokia Wiki

简介

总所周知，Prototype是一个著名的跨浏览器JavaScript库， 它支持几乎所有当前流行的浏览器，比如： FireFox, Safari, IE, Opera, 等等。 Prototype最新版(1.6.0)，甚至更早版本，也支持AppleWebKit。AppleWebKit是一个有Apple公司开源的Web引擎。（它也是Safari的核心引擎。）

Nokia Web浏览器建立在S60WebKit上，S60WebKit是开源的WebKit项目在S60平台上的移植。Nokia WRT(Web-RunTime)也基于此。

在最后部分，我们将学习如何在WRT Widget应用中使用prototype.js库来实现AJAX操作。

安装 prototype

如何安装prototype.js库，请到这里。

表单与AJAX(JSON)演示

这里，将使用四个用例来演示Prototype库AJAX函数的用法。关于AJAX的更多信息，请浏览： http://www.prototypejs.org/api/ajax 和http://www.prototypejs.org/learn/introduction-to-ajax。

前提条件

在样例应用中用到一个服务端php脚本文件，这些脚本放在 http://www.ibomobi.com 。 base_url（定义在demo.js中）的缺省值为 "http://www.ibomobi.com/demo/symbian/wrt/"。

你也许想将这些脚本安装到自己的Web服务器。如果需要，请安装下面的步骤进行操作：

• 在你的Web服务器的某个可访问到的url下创建一个文件夹名称为“ajax”
• 拷贝或上传本例根目录下的phpscript文件夹下的所有内容到刚才创建的那个文件夹
• 打开"demo.js"文件改变基本路径（base url）， 一个叫"base_url"的变量。 让它指向你的基本路径。

注意： 不要将"ajax"文件夹包含到基本路径中。

Welcome

Tab1, "Welcome", 演示如何发出AJAX请求并使用返回的内容更新一个由div id——"welcome"标识的容器。在"Welcome"按钮被点击后，ajaxUpdater将被执行。它提交一个请求到'ajax/welcome.php'并接收响应的文本，然后将这些文本填入容器。接收的文本显示如下：

 Welcome to WRT widget world! 
 It's 2008-03-27 22:28:39 now.

再次点击按钮后时间会改变。

摘自main.html的HTML代码片段 (客户端)

<div id="tab1"> 
<p>
<input type="button" value="Welcome" onClick="ajaxUpdater('welcome', 'ajax/welcome.php')" />  
</p>
  <hr /> 
<div id="welcome"> -- </div>
  <hr />
  // omitted 
  // ...
</div>

摘自demo.js的JavaScript代码片段(客户端)

function ajaxUpdater(id, path) {
  var this_url = base_url + path;
  new Ajax.Updater(id, this_url, {asynchronous:true});
}

摘自ajax/welcome.php的Php脚本(服务端)

<?
echo "Welcome to WRT widget world!<br/>";
echo "It's ".date('Y-m-d H:i:s')." now.";
?>

Say Hi

在tab2, "sayHi", 从"hi-name"字段取回输入的数据(缺省值为"Tom")，然后经由"ajax/hi.php"发送到服务端 （见sayHello函数） ，返回的内容将显示在"hi"容器中。缺省内容为"Hi, Tom!"。

摘自main.html的HTML代码片段

<div class="tab" id="tab2">  
<p>
<div>
     <label for="hi-name">Enter your name:</label>
     <input id="hi-name" name="hi-name" type="text" value="Tom" />
     </div>
     <input type="button" value="Hi" onClick="sayHello('hi', 'ajax/hi.php')" /> <br/>
</p>
<hr />
<p>
<div id="hi"> -- </div>
</p>
  // omitted...
</div>
 
摘自demo.js的JavasScript代码片段
<code javascript>
function sayHello(id, path){
  var this_url = base_url + path;
  var pars = 'hi-name='+escape($F('hi-name'));
  var myAjax = new Ajax.Updater(id, this_url, {method: 'get', parameters: pars});
}

摘自ajax/hi.php的Php脚本

<?php
     $name = htmlspecialchars($_GET['hi-name']);
     echo "<b>Hi, $name!</b>";
?>

表单与AJAX

在tab3, "AJAX", 我们将收集一个登录表单的数据，然后发出AJAX登录请求。username与password的缺省值分别是"Bob"和"Secret"。 若匹配，则"Welcome, <username>!" 信息将会被显示，指出登录成功。否则，将显示信息："username or password error!"。

摘自main.html的HTML代码片段

<div class="tab" id="tab3">
  <p>
<form id="loginForm">
   UserName: <input id="username" name="username" value="Bob" /><br />
   Password: <input id="password" name="password" type="password" value="Secret" /><br/>
   <input type="button" value="Login" onClick="sendAjaxLogin('loginForm', 'loginResult');" /> 
</form>
</p>
   <hr />
   <div id="loginResult"> -- Not Logged in -- </div>
   <hr />
   // omitted...
</div>

摘自demo.js的JavaScript代码片段

function sendAjaxLogin(form, id)
{
  var this_url = base_url + "ajax/ajax_login.php";
  var pars = $(form).serialize();
  alert(pars);  // show parameters
  var myAjax = new Ajax.Updater(id, this_url, {method: 'get', parameters: pars});
}

摘自ajax/ajax_login.php的Php脚本

<?PHP
if (count($_GET) == 0) {
  die ("ERROR:  This page has been improperly accessed.");
}
 
$username = $_GET['username'];
$password = $_GET['password'];
 
if (strcmp ($username, 'Bob') == 0 && strcmp($password, 'Secret') == 0)
    echo "Welcome, ".$username."!";
else
    echo "<b>Username or password error</b>!";
?>

JSON演示

在tab4, 是一个JSON演示。 服务端会生成JSON数据。客户端收到JSON数据后，将被格式化为一个HTML表格。

摘自main.html的HTML代码片段

<div class="tab" id="tab4">
<p>
<input type="button" value='test JSON' onclick='test_json();' />
</p>
<hr />
<div>JSON Result: <br /><span id="tab4_result">This data will be replaced.</span></div>
<hr />
<p>
 
<div style="display:none;">
<textarea id="table_template">
<table border="1">
<thead><tr>#{heads}</tr></thead>
<tbody>
  #{rows}
</tbody>
</table>
</textarea>
</div>
 
<div style="display:none;">
<textarea id="headcell_template">
<th>#{hname}</th>
</textarea>
</div>
 
<div style="display:none;">
<textarea id="row_template">
<tr><td>#{product}</td><td>#{price}</td><td>#{quantity}</td></tr>
</textarea>
</div>
 
// ...
</div>

上面有三个隐藏的文本区域（textarea），含有用于创建Template对象的模板字符串。如每个id所暗示的，第一个是一个表格模板；第二个是表格头单元模板；最后一个是表格行模板。我们将使用这些模板来构造一个HTML表格，而不用JavaScript写的固定的字符串。 （在“字符串操作”部分，我们曾使用固定字符串作为模板参数。）

摘自demo.js的JavaScript代码片段

function test_json()
{
  var this_url = base_url + "ajax/test_json.php";
  // show progress animation gif
  $('waitpic').style.display = 'block';
  new Ajax.Request(this_url,   
    {
	  method:'get',     
	  onSuccess: getResponse, 
	  onFailure: function(){ 
	    // hide progress animation gif
        $('waitpic').style.display = 'none';
	    alert('Something went wrong...');
	  }   
    }); 
}
 
function getResponse(transport, json)
{ 
  var data = transport.responseText.evalJSON(true);  
//  var data = eval(transport.responseText);
//  alert(data);
 
  // show raw json data.
//  $('tab4_result').innerHTML = transport.responseText; 
 
  // clear result area
  $('tab4_result').innerHTML = ''; 
  
  // build table body
  var templ = new Template($('row_template').value);  // not $('row_template').innerHTML
  var bodyFormatted = "";
  //populate the list
  for (var i = 0; i < data.length; i++) {
    // 
    var item = data[i][0];
//	alert(item.product);
    bodyFormatted += templ.evaluate(item) + '\n';
  }
  // build table header
  var item0 = data[0][0];
  var keys = Object.keys(item0);
  templ = new Template($('headcell_template').value);
  var headFormatted = "";
  for (var i=0; i<keys.length; i++) {
    headFormatted += templ.evaluate({"hname": keys[i]});
  }
  // assembly table.  
  var tableTemplateString = $('table_template').value;
  var pars = {"heads": headFormatted, "rows": bodyFormatted};  
  $('tab4_result').innerHTML = tableTemplateString.mixin(pars);
  
  // hide progress animation gif
  $('waitpic').style.display = 'none';
}

在上面，mixin函数被添加到String类中：

Object.extend(String.prototype, {
  mixin: function(obj) {
    return new Template(this).evaluate(obj);
  }
});

摘自ajax/test_json.php的Php脚本

<?PHP
 
// ref: http://www.pastebin.ca/611218
if (!function_exists('json_encode')){ 
// now its portable to php ver. < 5.2.0 where you would otherwise 
// have to install the php-json c-extension first
    include_once('Services_JSON.php');
    $json = new Services_JSON();
    function json_encode($value){
        global $json;
        return $json->encode($value);
    }
    function json_decode($value){
        global $json;
        return $json->decode($value);
    }
}
 
$_array1[] = array(
	'product' => 'WRT Internals',
	'price' => 24.5,
	'quantity' => 1
	);
$_array2[] = array(
	'product' => 'The Prototype world',
	'price' => 5.44,
	'quantity' => 3
	);
$_array3[] = array(
	'product' => 'WRK Reference',
	'price' => 10.00,
	'quantity' => 4
	);
	
header('Content-type: application/x-json');
$data = array($_array1, $_array2, $_array3);
//encode and return json data...
echo json_encode($data); 
 
?>

在上面，当PHP版本小于5.2.0时，需要Services_JSON.php来生成JSON数据。

下载样例应用

下载本主题样例Widget应用： Image:PrototypeFormAndAjaxDemo.zip。安装时，将后缀.zip更改为.wgz。

对于最新版本，请浏览： http://code.google.com/p/prototypewrt/downloads/list

相关主题

• 使用Prototype JavaScript库: 在WRT应用中概要说明
• 使用Prototype JavaScript库: 在WRT应用中使用基本操作（工具类函数）
• 使用Prototype JavaScript库: 在WRT应用中进行字符串操作
• 使用Prototype JavaScript库: 在WRT应用中创建对象
• 使用Prototype JavaScript库: 在WRT应用中使用Prototype UI库
• 使用Prototype JavaScript库: 在WRT应用中使用表单与AJAX(JSON)

参考

• Prototype主页 [1]
• Prototype UI主页[2]
• 样例WRT应用下载[3]