×
Namespaces

Variants
Actions

使用Prototype JavaScript库: 在WRT应用中使用表单与AJAX(JSON)

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
文章
dougcn 在 23 Apr 2008 创建
最后由 hamishwillee 在 09 May 2012 编辑

Contents

简介

总所周知,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/ajaxhttp://www.prototypejs.org/learn/introduction-to-ajax

前提条件

你也许想将这些脚本安装到自己的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 $username == 'Bob' && $password == 'Secret')
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应用: File:PrototypeFormAndAjaxDemo.zip。安装时,将后缀.zip更改为.wgz。

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

相关主题

参考

  • Prototype主页 [1]
  • Prototype UI主页 [2]
  • 样例WRT应用下载 [3]
This page was last modified on 9 May 2012, at 08:05.
61 page views in the last 30 days.