使用 SQL Anywhere Web 服务创建移动 AJAX 进程

LeanneStuive

4.00/5 (2投票s)

2007 年 7 月 25 日

CPOL

11分钟阅读

29439

163

本文解释了基本的 AJAX 技术，并介绍了使用 AJAX 访问 SQL Anywhere Web 服务所需的 HTML、JavaScript 和 SQL。它还涵盖了如何将 AJAX 进程与 Windows Mobile 6 设备和 SQL Anywhere HTTP 服务器一起使用。

下载演示 - 3.32 KB

什么是 AJAX？

AJAX，即异步 JavaScript 和 XML，是一种旨在实现交互式 Web 应用程序的 Web 开发技术。通过 Google Suggest、Google Maps、Flickr 和 Odeo.com 等知名 Web 应用程序的推广，AJAX 不需要每次用户请求更改时都重新加载整个网页。AJAX 不是一门新的编程语言，而是使用现有的 JavaScript、HTML、XML 和 CSS 标准的一项相对较新的技术。AJAX 技术为创建丰富、用户友好的网站提供了机会。

“移动”AJAX 是什么意思？

从最广泛的意义上讲，“移动”AJAX 旨在封装移动浏览器显示使用 AJAX 技术网站的能力。尽管 Mozilla 和 Opera 移动浏览器早已支持移动 AJAX，但 Windows Mobile 6 的发布为移动 AJAX 带来了新的前景。Microsoft 流行的 Internet Explorer Mobile 的更新版本支持运行基本 AJAX 应用程序所需的 XML DOM 和 JavaScript。最值得注意的是，Windows Mobile 6 的 Internet Explorer 支持大多数 AJAX 应用程序使用的 getElementById 方法。

什么是 SQL Anywhere 10？

SQL Anywhere 是一款强大的企业级关系数据库，可在 Linux、Windows、UNIX、MacOSX 和 Windows Mobile 上使用。SQL Anywhere 对 Windows Mobile 平台很有吸引力，因为它支持企业数据库功能，如存储过程、触发器和数据库事件。虽然 SQL Anywhere（约 5.6 MB）比目前 Windows Mobile 上可用的其他“嵌入式”数据库大，但它具有更大的 SQL 支持子集和一个优化器，可用于优化在 Windows Mobile 上运行的复杂查询。SQL Anywhere 还具有二进制兼容性，允许您在某个操作系统（如本文中的 Windows）上创建 SQL Anywhere 数据库，然后将其物理复制到另一个支持的平台。在 Windows Mobile 环境中，SQL Anywhere 通常用于数据库同步。在此演示中，它用作简单的独立数据库，因为本教程侧重于 AJAX 数据访问技术。

如何使用带 SQL Anywhere 10 的移动 AJAX？

可以通过 SQL Anywhere 的 HTTP 服务器将 AJAX 与移动 SQL Anywhere 数据库一起使用。本示例展示了使用 AJAX 技术通过 Internet Explorer Mobile 查询移动 SQL Anywhere 数据库。

本示例分为两部分。在第一部分“创建 AJAX 进程”中，将开发示例的源代码。本节解释了所使用的基本 AJAX 技术，并解释了 HTML、JavaScript 和 SQL（Web 服务）代码。除了解释示例代码外，本节还将探讨格式化服务器响应的替代方法。尽管此示例可以在非移动环境中运行，但非移动环境支持其他未涵盖的 AJAX 功能。第二部分“在您的 CE 设备上设置进程”解释了在移动设备和 SQL Anywhere HTTP 服务器上使用此进程。本节提供了一种简单的方法来设置示例，以便在离线、移动环境（中）运行。

要求

所需的工具如下

SQL Anywhere 10 开发者版（请选择安装 SQL Anywhere CE 组件）。
Windows Mobile 6 设备或Visual Studio .NET 2005和Windows Mobile 6 Professional and Standard SDK Refresh
ActiveSync

建议具备 HTML 和 JavaScript 的基本知识，但这并非必需，以便理解第一部分。对于第二部分，能够通过 ActiveSync 连接到移动设备是必需的。安装 SQL Anywhere 10 并通过 ActiveSync 连接到您的移动设备或设备模拟器后，选择“开始”>“程序”>“SQL Anywhere 10”>“为 Windows Mobile 部署 SQL Anywhere”。

第一部分：创建 AJAX 进程

创建一个简单的 AJAX 进程需要三个步骤

创建将调用 JavaScript 函数的核心 HTML
编写 JavaScript，它将创建 XMLHttpRequest 对象、发送服务器请求并接收服务器响应
编写将响应 JavaScript 调用的服务器端代码（在此例中是 Web 服务）

以下步骤是关于创建一个操作 SQL Anywhere 数据库的 AJAX 进程。本文的第二部分将解释如何在移动环境中设置示例数据库并运行演示。

步骤 1：创建 HTML 页面

第一步是创建一个 HTML 表单。此表单将用于发送和接收服务器请求所需的数据。此示例将使用一个具有十二个选项的 select 表单，对应于在示例数据库中输入的十二个姓名。select 的 onchange 属性将调用 showUser(this.value)。

this.value 指的是 select 的当前选择
showUser() 是将在步骤 2 中编写的 JavaScript 函数

一般来说，可以使用任何表单样式，只要它能适当地调用一个传递参数的 JavaScript 函数。此调用通常通过 onchange 属性或提交按钮来完成。

接下来，在 HTML 表单下创建一个 div 元素。为此 div 分配一个 ID，以便通过 JavaScript 使用 document.getElementById() 函数访问它。此 div 元素的 innerHTML 将用于显示从列表中选择姓名的结果。有关 innerHTML 属性的信息，w3schools 提供了一个简短的教程。

完整的 HTML 如下

<html>
    <head>
      <script language="javascript" type="text/javascript"> 
     <!-- JavaScript will go here --> 
      </script>
   </head>
   <body>
      <form name='select'>
      Select a User:
         <select name="users" onchange="showUser(this.value)">
            <option value="1">Sally Dawson</option>
            <option value="2">AJ Yussin</option>
            <option value="3">George Erasmus</option>
            <option value="4">Ali Day</option>
            <option value="5">Katrine Joy</option>
            <option value="6">Mustafa Ifa</option>
            <option value="7">Chi Han</option>
            <option value="8">Pierre Portal</option>
            <option value="9">Jacqui Brean</option>
            <option value="10">Tom Hoal</option>
            <option value="11">Sarah Masid</option>
            <option value="12">John Doe</option>
         </select>
      </form> 
      <p>
      <div id="txtHint"><b>User information will be listed here.</b></div>
      </p>
   </body>
</html>

步骤 2：编写关联的 JavaScript 函数

JavaScript 代码放在 <script></script> 标签之间。

表单的 onchange 属性调用 showUser() 函数。此函数首先创建一个 XMLHttpResponse 对象。这是通过调用 GetXmlHttpObject() 函数完成的。

function GetXmlHttpObject()    
{
    var xmlHttp=null;

    try
    {     
        // Firefox, Opera 8.0+, Safari     

        xmlHttp=new XMLHttpRequest(); 
    }   catch (e)   
    {    //Internet Explorer     

        try   
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");     
        }   
        catch (e)
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");     
        }  
    } 
    return xmlHttp;
}

此函数根据所使用的浏览器创建相应的对象。如果浏览器不支持 AJAX，它将返回 null。有关 XMLHttpRequest 对象的信息，请参阅Wikipedia。

到目前为止，showUser() 函数如下

function showUser(str)
 {
   xmlHttp = GetXmlHttpObject()
   if (xmlHttp==null)
  {
    alert ("Browser does not support HTTP Request")
     return
   }
   else
  {…     // more code to come   …}

}

如果可以创建 XMLHttpRequest 对象，它将存储在 xmlHttp 变量中。

如果浏览器支持 HTTP Request 对象，我们将使用传递的 str 参数来创建服务器的 URL。将在步骤 3 中编写的 Web 服务名为 get_user。它期望将 user_id 参数传递给它。要创建所需的 URL，我们添加以下行

var url="get_user"
var url=url+"?user_id="+str

在调用此 URL 之前，我们必须告诉对象等待响应。为此，我们使用

xmlHttp.onreadystatechange=stateChanged;

每当 xmlHttp 的 readyState 更改时，它将调用 stateChanged() 函数。有关 readyState 的信息，请参阅Wikipedia。

stateChanged() 函数如下

function stateChanged()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
      document.getElementById("txtHint").innerHTML=xmlHttp.responseText
   }
}

此函数的逻辑是：“如果 readyState 是 4（服务器已完成响应创建），则将 ID 为 ‘txtHint’ 的 div 的 innerHTML 更改为生成的响应”。

现在对象知道在服务器响应时该做什么，是时候使用提供的参数调用 Web 服务 get_user 了。执行此操作的代码是

xmlHttp.open("GET", url, true);
xmlHttp.send(null);

open 命令将打开给定的 URL。true 参数表示请求是异步进行的。由于参数在 URL 中，因此无需发送任何内容。

JavaScript 代码现已完成。

步骤 3：创建必要的 Web 服务

最后一步是编写处理服务器端处理的 Web 服务。要在移动环境中执行此操作，您必须连接到数据库并能够对数据库运行 SQL 命令（例如，使用 Interactive SQL）。如果您不知道如何执行此操作，将在本文的第二部分进行解释。

首先，如果服务已存在，则删除该服务。

IF EXISTS(SELECT * FROM "SYS"."SYSWEBSERVICE"
          WHERE "service_name"='get_user')
THEN 
    DROP SERVICE "get_user";
END IF
GO

如果您尝试创建已存在的服务，SQL 将会给您一个错误，因此一点错误处理永远不会有坏处。

接下来，创建 get_user 服务。

CREATE SERVICE get_user
TYPE 'RAW'
AUTHORIZATION OFF
USER DBA
AS SELECT 'Age: ', Age,
          'Gender: ', Gender,
          'Hometown: ',Hometown,
          'Job: ',Job,
          'Score: ',Score
FROM ajax_demo WHERE id = :user_id;
GO

此服务为 RAW 类型，这意味着它返回 select 语句确定的内容。此 select 语句包含用于格式化结果的文本；ajax_demo 是示例数据库中的表名。由于在 select 语句中插入 HTML 标签只能提供简单的格式化选项，因此将很快解决替代格式化选项。

Web 服务现已准备就绪。

这三个步骤呈现了一个简单、可运行的 AJAX 示例，该示例可与 SQL Anywhere 数据库配合使用。第二部分将解释如何在移动设备上设置此过程。

题外话：格式化选项

由于移动设备的限制，格式化 AJAX 请求的结果变得很重要。尽管此问题不是 AJAX 特有的，但 XMLHttpRequest 对象的 responseText 提供了一些面向 AJAX 的选项。在 select 语句中放置 HTML 标签的两种常见替代方法是：

创建一个 RAW 类型的 Web 服务，然后使用过程来格式化结果。示例数据库使用了简单的 select 语句进行格式化。通过调用返回表示 HTML 文档或 JSON 对象的长 Varchar 的过程，可以进行更复杂的格式化。有关 HTML 文档的文档，请参阅SQL Anywhere 10 文档。
创建一个“XML”类型的 Web 服务，然后使用 JavaScript 解析 XML：也可以将 Web 服务类型设置为“XML”。这将把响应设置为 XML 格式的表。然后，可以使用 XML DOM 或纯文本技术来解析 JavaScript 的 responseXML（而不是 responseText）。

第二部分：在您的移动设备上设置进程

本节提供有关在移动设备上设置示例 AJAX 代码的逐步说明。提供的示例扩展了第一部分开发的 कोड，但以易于理解的方式。

示例文件（在 Zip 文件中）

ajax_demo.sql
example.html
webservices.sql

示例说明

以下过程假设您已将补充代码下载到C:\temp目录。

设置您的 Windows CE 设备和示例数据库

使用 ActiveSync 将 Windows CE 设备连接到您的计算机。
创建示例数据库。在 Windows 命令提示符下，执行
```
C:\temp> dbinit –s –i –z UTF8BIN –zn UTF8BIN demotable.db
```
其中使用的命令行选项是
- -s：为数据库页添加校验和
- -i：不安装 jConnect 支持
- -z UTF8BIN：为 CHAR 数据类型指定 UTF8BIN 作为排序序列
- -zn UTF8BIN：为 NCHAR 数据类型指定 UTF8BIN 作为排序序列
启动数据库引擎。在 Windows 命令提示符下，执行
```
C:\temp> dbeng10 demotable.db
```
创建架构，并将数据插入示例数据库。在 Windows 命令提示符下，执行
```
C:\temp> dbisql -c "uid=dba;pwd=sql;eng=demotable" ajax_demo.sql
```
为远程数据库创建 Web 服务。在 Windows 命令提示符下，执行
```
C:\temp> dbisql -c "uid=dba;pwd=sql;eng=demotable" webservices.sql
```
停止数据库引擎。在 Windows 命令提示符下，执行
```
C:\temp> dbstop -c "uid=dba;pwd=sql;eng=demotable"
```
将这些文件复制到您的 Windows CE 设备
将您刚刚创建的数据库 demotable.db 复制到 Windows CE 设备的我的文档文件夹。
将 example.html 复制到 Windows CE 设备的我的文档目录。
断开 Windows CE 设备与计算机的连接。
在 Windows CE 设备上启动数据库服务器
在您的移动设备上，导航到文件资源管理器：开始 > 程序 > 文件资源管理器
导航到 dbsrv10.exe：我的设备 > 程序文件 > SQLAny10 > dbsrv10。
点击 dbsrv10。将出现服务器启动选项。选择
- database: "My Documents\demotable.db"
- server name: "CEserver"
  - cache size: "5MB"
  - options: "-gd all -xs http(port=8080)
  - TCP/IP: √
    其中 -gd all 允许所有用户启动和停止数据库，-xs http(port=8080) 指定一个 HTTP 服务器监听 8080 端口。
查看完成的 AJAX 示例
浏览到 https://:8080/example.html。
从第一个下拉菜单中选择一个姓名。个人信息列表将出现在显示“User information will be listed here”的空间中。
选择一个最小和最大分数（0 到 20 之间）。点击“Query Database”。列表将出现在显示“Your query result will display here”的空间中，列出所有分数介于所指示值之间的用户。

考虑因素

在提供的示例中，XMLHttpReqest 对象是在函数调用中创建的。但是，如果浏览器不支持此对象，则在静态 JavaScript 中创建该对象将在页面加载之前通知用户错误。
尽管 XML 响应文本提供了更丰富的格式化选项，但它会减慢应用程序的速度，因为需要在服务器和客户端两侧进行更多处理。
运行 XMLHttpRequestObj.open 时，在 URL 后面附加“&sid=”+Math.random()“将确保请求再次运行。否则，可能会打开缓存的页面。
由于提交 AJAX 请求不会刷新整个页面，因此在使用浏览器的后退按钮时存在很大的不一致性。最流行的解决方案是使用一个存储请求历史的不可见 IFrame。

后记

由于 Windows Mobile 6 设备上的 Internet Explorer Mobile 现在具有足够的 AJAX 支持，AJAX 驱动的应用程序和站点正变得越来越普遍。在远程设备上将此技术与 SQL Anywhere 10 HTTP 服务器结合使用，为浏览数据提供了更无缝的界面。