应用Ajax技术在ArcIMS中实现动态查询

       在ArcGIS 9.2平台推出之后，对于开发人员来讲，ArcIMS 9.2发生了比较大的变化。在保持原有HTML/JavaScripts（Servlet Connector）、ASP（ActiveX Connector）、ColdFusion（ColdFusion Connector）、Java/JSP（Java Connector）的基础上，新增了Java ADF和.Net ADF，使得使用Java和.Net技术的开发人员更加快捷方便的进行ArcIMS的开发。而ArcIMS的体系结构、站点管理方式和之前利用ArcIMS开发出来的站点也可以顺利地运行在ArcIMS9.2中（使用ArcIMS 9.0、9.1版本的.Net link开发的需要进行简单升级）。

图1   ArcIMS安装程序中的Servlet、ActiveX、ColdFusion连接器

图2   ArcIMS Java ADF安装程序中的Java连接器和Java ADF框架

图3    ArcIMS .Net ADF中的ADF框架

       而无论哪种开发方式，ArcIMS最终还是通过ArcXML 与空间服务器（Spatial Server）进行交互。而我们所使用的不同开发方式，只是对ArcXML组织的方式不同。而开发使用不同开发语言时所用到的连接器，也是对ArcXML的不同形式的封装。只不过在ArcIMS 9.2中，针对Java和.NET两大主流WEB开发技术，ESRI提供了响应的Web ADF（Web Application Developer Framework ）----Web应用程序开发者框架，封装程度更高更完善，而且与目前主流的WebGIS开发技术----Ajax技术密切结合起来。

       Ajax（Asynchronous JavaScript + XML）不是一种单一的技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

       .      基于XHTML和CSS标准的表示；

       .      使用Document Object Model进行动态显示和交互；

       .       使用XMLHttpRequest与服务器进行异步通信；

       .       使用JavaScript绑定一切。

       Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。可以说，在WebGIS应用中，Ajax的前景非常广阔。主要在于，WebGIS中涉及到大量的用户操作，比如地图缩放、平移等浏览操作，属性查询及显示操作等等。如果用传统的模式，这些操作都会刷新整个地图，对空间服务器压力很大，而且处理起来也非常复杂。利用Ajax技术，可以很好地解决这些问题。比如地图切片（瓦片堆叠）技术，比如Google Map。用户已经获取的信息不再刷新，可以有效地降低服务器端压力，并且增强客户端使用感受。ArcIMS 9.2 .NET ADF和Java ADF中已经集成了这些技术，这里我们不做详细介绍，我们就以简单的动态查询为例，来介绍一下如何在传统的HTML/JavaScript（DHTML）站点中完成动态查询。

       查询功能示例：

       目的：通过查询其它业务数据库（Access）的信息，获取结果的坐标，将其绘制在ArcIMS底图上，并且当鼠标移动到该点上时，返回该点的详细描述信息。

       平台： ArcIMS 4.0，4.0.1，9.0，9.1，9.2均可

       开发技术：HTML，JavaScript，CSS，ASP

       *本次实例主要在ArcIMS Designer生成的HTML Viewer站点基础上进行修改。

       篇幅有限，这里只给出核心代码，具体步骤代码请在培训中心网站下载：

       下载地址：http://training.esrichina-bj.cn/upload/art/imsajax.rar

       示例站点的使用方法：

       解压缩imsajax.rar站点文件夹，文件夹中showdetail.asp文件为查询数据库详细信息处理程序(test.mdb) 。使用时需修改数据源的ado路径。

       使用designer建立一个默认站点，最好为世界地图或中国地图，因为默认坐标为中国几个城市坐标。

       修改ArcIMSparam.js文件中的imsURLvar和imsOVURL值，修改为自建服务名称。

       工作流程图：

       具体定制步骤如下：

       1，     添加查询按钮，实现弹出式查询窗口。（toolbar.htm 343-347）

       2，     在mapframe.htm实现div查询对话框。 

       效果如图：

       3， javaScripts目录增加aimsDIV.js文件。用于处理div图层选择主要功能。

       4，MapFrame.htm文件添加aimsDIV.js引用。 Mapframe.htm中第60行

       5，aimsClick.js  中的clickfunction()  控制选择对话框的可见性。683-704行

       6，实现div search对话框查询。代码：mapframe.htm中221-225

       7，点击查询按钮，请求发送 searchPoint函数。   229-273行

       8，点信息返回处理：ProcessPRequest。  278 - 320。

       9，点详细信息返回处理（鼠标移动到目标点）：

       效果如图：

       核心代码说明：

       查询城市点，信息返回及显示处理均采用ajax实现。图中显示点及详细信息均由div层绘制。首先，发送请求代码如下：

function searchPoint(){      //--------查询点信息的请求发送。

              xml_mode = true;

              var field;             //查询城市名

              field = document.getElementById("txtField").value;

              if (field != ""){

                            send_Prequest(field);      //调用send_Prequest函数发送请求

              }else{

                     alert("请输入查询城市名！");

                     }

              }

function send_Prequest(field) {                 //初始化、指定处理函数、发送请求的函数

              if(window.XMLHttpRequest) {            //Mozilla 浏览器

                     http_request = new XMLHttpRequest();

                     if (http_request.overrideMimeType) {            //设置MIME类型

                            http_request.overrideMimeType('text/xml');

                     }

              }

              else if (window.ActiveXObject) { //             IE浏览器

                     try {

                            http_request = new ActiveXObject("Msxml2.XMLHTTP");

                     } catch (e) {

                            try {

                                   http_request = new ActiveXObject("Microsoft.XMLHTTP");

                            } catch (e) {}

                     }

              }

              if (!http_request) { // 异常，创建对象实例失败

                     window.alert("不能创建XMLHttpRequest对象实例.");

                     return false;

              }

              var url = "search.asp";        //请求URL

              url+="&cityname="+field;    //通过cityname进行查询

             http_request.onreadystatechange = processPRequest;

 //此处指定了查询点信息返回结果的处理函数

              http_request.open("post", url, true);

                            // 确定发送请求的方式和URL以及是否同步执行下段代码

              http_request.send(null);

       }

Search.asp的处理：

<%@language="vbscript" codepage="936" %>

<%Response.charset="utf-8" %>

<%Response.ContentType="text/xml"%>        //指定返回的mime类型为xml

<%  -- 查询过程代码省略 --%>

‘输出xml格式。

<?xml version="1.0" encoding="utf-8"?>

<%do while Not rs.eof%><item><city><name>

<%=rs("name")%></name><xcoord>

<%=rs("x_coor")%></xcoord><ycoord>

<%=rs("y_coor")%></ycoord></city></item>

<%

       rs.movenext

loop

%>

处理返回查询结果点信息

    function processPRequest() {

        if (http_request.readyState == 4) { // 判断对象状态

         if (http_request.status == 200) { // 信息已经成功返回，开始处理信息

        var xmldom = http_request.responseXML; 

//使用XML方式解析。优点就是不必用JavaScript通过字符判断。方便很多。

       var cities=xmldom.documentElement.childNodes;

 //city element  获取城市根节点。察看详细信息可通过请求URL测试。

               //例如：http://actc-think42/website/modified_new_v2/search.asp?cityname=beijing

              //服务器输出的当然也是xml格式了。

       for(var i=0;i<cities.length;i++){

           var citylist =cities.item(i).childNodes;

 //city元素下一级子元素数组。也就是name，xcoord，ycoord等。

              for(var j=0;j<citylist.length;j++){    //查询结果坐标数组赋值

                     var city=citylist.item(j);

                     if(city.tagName=="name"){

                            NmArray[i]=city.text;

                        }

                     if(city.tagName=="xcoord"){

                             XArray[i]=city.text;

                        }

                     if(city.tagName=="ycoord"){

                             YArray[i]=city.text;

                         }                                         

              }//end for j

       } //end for i

     //根据解析结果创建查询出来的点层。代码略     

           } else { //页面不正常

                alert("您所请求的页面有异常。");

            }

        }

    }

       总结：

       通过使用Ajax，在处理类似动态查询时，效果是非常方便快捷的， 如果使用ArcIMS的动态图层来添加动态点，进而查询详细信息，对空间服务器的压力就比较大，处理速度也比较慢，使用ArcXML的处理过程也是非常复杂的。类似的应用案例还比如：车辆动态运行状态的监控、事故点的Web展示等等。而且，因为Ajax作为通用Web技术，并不对开发方式有所限制。

       ， javaScripts目录增加aimsDIV.js文件。用于处理div图层选择主要功能。