WebService、Ajax与回调函数（一）

       本实例演示借助WebService、Ajax技术和回调函数，从MSSQL数据库中获取所需数据，并用JavaScript语言将数据结果显示到网页地图上。

1、WebService

       （1）在工具箱的Ajax Extentions下面找到ScriptManager控件，拖到网页上，右键属性，打开Services集合，将Path设为WebService.asmx，如下图所示：

       （2）打开App_Code中的WebService.cs，一定要做到取消对[System.Web.Script.Services.ScriptService]行的注释，然后开始编写WebService，该实例写一个从NMET数据库的school表中获取信息（包括学校名称，经纬度等），将结果凑成一个JSON格式的字符串。

[WebMethod]
    public string GetSchool()
    {
        string SQL = "SELECT * FROM SCHOOL";
        string st;
        MyDBase DB = new MyDBase(".", "NMET");
        SqlDataReader RD = DB.DBDataReader(SQL);
        st = "[";
        while (RD.Read())
        {
            st = st + "{sname:\'" + RD["sname"].ToString().Trim() + "\',lnglat:[" + RD["LNG"].ToString().Trim() + "," + RD["LAT"].ToString().Trim() + "],info:\'"+RD["SAdd"].ToString().Trim()+"\'},";
        }
        int n = st.Length - 1;
        st = st.Substring(0, n);
        st = st + "]";
        DB.DBClose();
        return st;
    }

       （1）采用eval()函数，将JSON格式字符串转化为对象；

       （2）将WebService中获取的学校名称添加到下拉列表框中；

       （3）将坐标信息以点的形式显示到天地图上；

       （4）对点添加鼠标点击和鼠标移动事件。

function init() 
{
    var S = new WebService();
    S.GetSchool(getschool);
}
//回调函数
function getschool(e) {
    var LNG, LAT;
    var s;
    s = eval('(' + e + ')');
    LNG = parseFloat(s[0].lnglat[0]);
    LAT = parseFloat(s[0].lnglat[1]);
    var lnglats = new Array();
    var names = new Array();
    var URLs = new Array();
    var INFO = new Array();
    var infoWin;
    document.getElementById("school").options.length = 0;
    for (var i = 0; i < s.length; i++) 
    {
        var lat, lng;
        lng = parseFloat(s[i].lnglat[0]);
        lat = parseFloat(s[i].lnglat[1]);
        lnglats[i] = new TLngLat(lng, lat);
        names[i] = String(s[i].sname);
        URLs[i] = String(s[i].url);
        INFO[i] = String(s[i].info);
        document.getElementById("school").options.add(new Option(names[i], names[i]));
    }
    for (var i = 0; i < lnglats.length; i++) 
    {
        (
                function(n) {
                    var marker = new TMarker(lnglats[n]);
                    map.addOverLay(marker);
                    TEvent.addListener(marker, 'click', function() {
                        var truthBeTold = window.confirm("请你选择：点击“确定”进行地图定位，点击“取消”进入学校主页")
                        if (truthBeTold) Locate(s[n].sname);
                        else window.open(URLs[n]);
                    });

                    TEvent.addListener(marker, 'click', function() {
                        Locate(s[n].sname); //点击进行学校地图定位
                    });
                    TEvent.addListener(marker, 'mouseover', function() {
                        infoWin = marker.openInfoWinHtml("这里是“" + names[n] + "”," + INFO[n] + "，请点击！");
                        //infoWin.setTitle("提示");
                        //infoWin.setLabel('<a href="http://www.baidu.com" target="_blank">URLs[n]</a>');
                        //infoWin.closeInfoWindowWithMouse(); //该方法不太灵活，自编关闭函数
                    });
                    TEvent.addListener(marker, 'mouseout', function() {
                        infoWin.closeInfoWindow();
                    });
                }
         )(i);
    }
}

3、结果展示