使用AJAX+ASP开发地名定位功能

AJAX技术是一种异步通讯，它扮演了在客户端与服务器端之间的hack联系，在客户端层面，我们使用的是JavaScript，但在服务器端层面，可以使用的技术就太多了，如Servlet——我们使用的ArcIMS缺省连接器、ASP——你可以变态到使用ASP页面+ASP Connector Dll来代替Servlet，或者是WebService。这些技术是完全可行的，而且也是非常有趣的东西。

在这次的元数据网络发布系统开发过程中，我实现了一个地名定位功能，该功能使用的是一个独立的地名库，它是一个个人GeoDB文件，需要使用ArcObjects读取相关信息。因此，我开发的这个功能如下：

HTML客户端（包含AJAX引擎）——ASP页面——注册在服务器上的COM组件——地名库

1.开发一个COM组件，用于从地面库中读取相关信息。这个COM组件使用VB6写的，它能够依据地面库提供的字段实现中文名称查询、名称拼音查询和拼音声母查询地名。查询出来的数据用字符串返回。

2.使用ASP页面调用该组件，并被AJAX引擎访问，其代码如下：

<%
dim obj
set obj=server.createobject("NBPlaceSearch.PlaceSearch")

if not obj is nothing then
    dim objInit
    objInit = obj.Init("F:\工作成果\MetaWeb\FullWeb\webservice\地名.mdb", "JMPoint")
   
    dim searchString,searchmode,Result
    searchString = request.querystring("placename")
    searchmode = request.querystring("mode")
   
    if objInit="sucess" then
        select case searchmode
            case "searchByName"
                Result = obj.SearchFeatureByName(searchString)
            case "searchByPY"
                Result = obj.SearchFeatureByPY(searchString)
            case "searchByPYSM"
                Result = obj.SearchFeatureByPYSM(searchString)
            case else
        end select
        set obj=nothing
       
        Response.ContentType = "text/html"
        Response.Charset = "gb2312"   '解决乱码问题
        Response.write result
    end if
end if
 %>

注意其中的Charset，否则返回给客户端的中文是乱码。

3.客户端技术，这个很简单，由于数据量很小，使用的是GET提交方式，代码如下：
var FOID ,FName ,FX ,FY
var SearchTree;
var SearchTmpNode;
var SearchNode;
var IsSearch;
                   
function SearchPlaces(){
    //清空四个属性数组的值
    FOID= new Array();
    FName = new Array();
    FX = new Array();
    FY = new Array();
   
    var placename =$('placename').value;
    var mode = $('searchMode').value;
    http = getHTTPObject();
 var tmpurl = placesearchengineurl+"placename=" + placename + "&mode=" + mode;
 if ((http != null)) {
     http.open("get", tmpurl, true);
     http.onreadystatechange = parsePlaceSearch;//IMS服务信息将由parseLayers解析
     http.send(null);
    }
}

function parsePlaceSearch()
{
    if(http.readyState==4){
        if(http.status==200){
            if(http.responseText!=""){
                IsSearch = true;
                //alert(http.responseText);
                var result = http.responseText;
                //alert(result);
                var resultArray = result.split('|');
                for(var i=0;i<resultArray.length-1;i++){
                    var tmpArr = resultArray[i].split('~')
                    FOID[i]=tmpArr[0];
                    FName[i]=tmpArr[1];
                    FX[i]=tmpArr[2];
                    FY[i]=tmpArr[3];
                }
                SearchTree = new YAHOO.widget.TreeView("SearchResult");
                SearchTmpNode = new YAHOO.widget.TextNode('查询结果', SearchTree.getRoot(), true);
                for(var j=0;j<FOID.length;j++){
                    SearchNode = new YAHOO.widget.TextNode(FName[j], SearchTmpNode, false);
                }
                SearchTree.subscribe("labelClick", onLabelClick);
                SearchTree.draw();
            }else{
                $('SearchResult').innerHTML='没有任何查询结果，请更换查询方式或使用更为精确的地名';
            }
        }
    }
}

function onLabelClick(node){
    for(var i=0;i<FName.length;i++){
        if(FName[i]==node.label){
            hideLayer('searchtag');
            minx = parseFloat(FX[i])-mwidth*2;
            maxx = parseFloat(FX[i])+mwidth*2;
            miny = parseFloat(FY[i])-mheight*2;
            maxy = parseFloat(FY[i])+mheight*2;
            getMapWithCurrentExtent();
            break;
        }
    }
}

 YAHOO.widget.TextNode这个东西是这次开发的时候找到的一个Web UI组件库——YUI。即Yahoo User Library。这个东西真的很棒，大家可以在Yahoo上下载到这个开源产品。

Related Items

• 使用AJAX开发ArcIMS技术心得2

• 使用AJAX开发ArcIMS

• 使用AJAX、YUI和Prototype开发ArcIMS客户端

• Server、Service和Servlet Engine的区别

• 改变ArcIMS浏览器客户端的外观