XMLHTTPRequest在SuperMap IS.NET AjaxScripts地震灾害情报系统中的一个应用

1.XMLHTTPRequest 介绍

     XMLHttpRequest是Ajax技术体系中最为核心的技术。缺少了它，Ajax的其余技术就无法成为一个有机的整体，将会土崩瓦解。

     1999年上半年，MS在IE 5.0版中首次支持这种技术，他们是通过一个名为XMLHTTP的ActiveX对象来支持这种技术的。XMLHTTP对象使得页面中的脚本具有了在不刷新页面的情况下直接与服务器通信的能力。在此之前，能够做到这件事的唯一技术是通过IFrame，然而这超越了IFrame最初设计的目标，是一种存在潜在危险的hack做法。既然已经有很多不守规矩的开发者做出了越轨的行为，并且事实证明这样的开发方式确实非常有价值，也不会对系统安全造成什么破坏。于是MS就从善如流地发明了XMLHTTP对象，专门用来为浏览器中的脚本（在IE中就是JScript和VBScript）提供这样的服务器通信能力。

     XMLHTTP对象大受欢迎，到了2000年它几乎已经成为了事实上的标准。Mozilla在这一年实现了具有相同接口的原生对象，称作XMLHttpRequest对象。后来Opera、Safari等浏览器也都相继实现了XMLHttpRequest对象。现在XMLHttpRequest是这个技术的正式名称。 
     Ajax所依赖的技术之中唯一一个尚未正式标准化的部分就是XMLHttpRequest，不过现在W3C已经将其列入了工作草案，应该很快就会成为正式的标准。目前在IE 5.0、IE 6.0中创建XMLHttpRequest对象的语法如下：

     var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 而在非IE浏览器中创建XMLHttpRequest对象的语法如下： var xmlhttp = new XMLHttpRequest(); MS在IE 7.0中将能够同时支持ActiveX对象和原生的XMLHttpRequest对象的创建方法，这是一个从善如流之举。因此，当IE 7.0普及之后，创建XMLHttpRequest对象将可以使用完全相同的语法。 XMLHttpRequest与服务器通信有两种方式：同步方式和异步方式。同步方式的调用非常简单，但是仅仅适用于数据量非常少的场合。如果数据量很大，会造成用户界面很长一段时间的停顿，这当然会损害Web应用的可用性。为了不影响可用性，Ajax应用中一般都使用异步方式来与服务器通信。用来设置同步和异步方式的是XMLHttpRequest对象的open方法的第3个参数，这个参数为true代表异步，为false代表同步。例如： 
     xmlhttp.open("GET", "http://www.blogjava.net/dlee/Rss.aspx", true); 如果是使用异步方式来进行通信，还需要设置一个回调函数，当数据返回时系统会调用这个回调函数。通过为XMLHttpRequest对象的onreadystatechange属性赋值来设置一个回调函数： xmlhttp.onreadystatechange=function() {...}; 此外，为了很好地支持中文和国际化，字符集一般都使用UTF-8，这可以通过调用XMLHttpRequest对象上的setRequestHeader方法来设置： 
     xmlhttp.setRequestHeader("Content-Type","text/xml;charset=utf-8"); 如果服务器返回的是XML格式的数据，并且正确设置了HTTP头信息中的Content-Type，例如在Java中是这样设置的： 
     resp.setContentType("text/xml;charset=utf-8"); 那么客户端的回调函数可以通过XMLHttpRequest对象的responseXML属性中获得XML DOM树形式的返回数据。 XMLHttpRequest其实是用语不当，它其实可以使用任何纯文本格式与服务器通信，而不限于XML格式。注意上面客户和服务器两端的Content-Type设置需要对应起来，如果它们都改成text/plain，那就是使用纯文本来进行通信，在回调函数中就需要访问XMLHttpRequest对象的responseText属性来获得纯文本形式的返回数据。 
     当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性：0  描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。1  描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。2  描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。3  描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。4  描述一种"已加载"状态；此时，响应已经被完全接收。 
     System.xml.xmlDocument 它的作用是解析xml文档，将其转换为对象，使你可以在程序中对其操作 XmlDocument 成员请参见： http://msdn2.microsoft.com/zh-cn/library/system.xml.xmldocument_members(VS.80).aspx (此节来源百度词条)

2.SuperMap IS .NET AjaxScripts介绍

     SuperMap IS .NET AjaxScripts是基于ASP.NET Ajax脚本库，通过Ajax技术封装的客户端脚本控件。由于客户端脚本控件的开发平台可以是.NET、Java、PHP等等，而且由AjaxScripts构建的网站是带有脚本的DHTML页面，这种DHTML是被最广泛支持的，因此这种网站可以跨操作系统（如Windows、Linux、Mac等），跨浏览器（如IE、Mozilla Firefox、NetScape等）获得访问，也正是基于这一特点，AjaxScripts可以在异构世界里发挥出更大的作用。 AjaxScripts拥有完整的客户端框架，提供了丰富的控件和对象类型。AjaxScripts客户端脚本控件实现了地图显示、地图浏览、图层控制、地图量算、鹰眼、专题图动态制作、双向查询、数据编辑、网络分析、公交方案等功能，适用于开发异构访问站点。基于Ajax技术的XML异步通信技术，脚本控制原对象，使发送请求的原对象不需要重构便可以实现数据更新，这将会进一步提升终端浏览器的用户体验。

     对于实现一个具有基本功能的GIS站点的话，开发者的主要精力将放在如果构建自己的站点，站点的设计、还有一些基本的功能实现等，针对GIS部分的大部分SuperMap都提供了应用的接口，大大方便了开发者。如地图的放大、缩小、移屏等

function DoZoomIn() { map.ZoomIn(); } function DoZoomOut() { map.ZoomOut(); } function SetPanAction() { if (!panAction) { panAction = new SuperMap.IS.PanAction(); } map.SetAction(panAction); }

 

3.下面举例SuperMap中在地图的CustomLayer上添加自定义的图片说明XMLHTTPRequest 在SuperMap IS.NET AjaxScripts地震灾害情报项目中的应用

     项目可以参考http://is.supermap.jp/shisen-jishin/

     在客户端，用户调整时间轴，来获取当前时间的地震相关位置情况和信息。在时间轴的调整后，客户端向服务器发送请求 

1. function getZhenYuan(time)
2. {
3.    xmlhttprequest=_GetXmlHttpRequest();
4.    var address="zhenyuan.ashx?Time="+time+"&singleday="+issingleday.toString();
5.    xmlhttprequest.open("GET",address,true);
6.    xmlhttprequest.setRequestHeader("Content-Type","text/plain;charset=utf-8");
7.    xmlhttprequest.onreadystatechange=ongetZhenYuanComplete;
8.    xmlhttprequest.send(null);
9. }
11. function _GetXmlHttpRequest(){
12.    var xh=null;
13.    try{
14.       xh=new ActiveXObject("Msxml2.XMLHTTP");
15.    }
16.    catch(ex){
17.       try{xh=new ActiveXObject("Microsoft.XMLHTTP");}
18.       catch(ex){xh=null;}
19.    }
21.    if(!xh && typeof XMLHttpRequest!="undefined")
22.    {xh=new XMLHttpRequest();}
23.    return xh;
24. }
26. function ongetZhenYuanComplete(){
27.    var readyState=xmlhttprequest.readyState;
28.    if (readyState==4)
29.    {
30.       var status=xmlhttprequest.status;
31.       if(status==200) {
32.          var strLayersName = xmlhttprequest.responseText;
33.          if(strLayersName!= null && strLayersName!="[noinformation]")
34.          { addMark(eval(strLayersName)); }    //自主标注
35.          else
36.          { map.CustomLayer.ClearMarks(); }
37.       }
38.       else{
39.          alert(xmlhttprequest.responseText);
40.       }
42.       xmlhttprequest = null;
44.    }
45. } 

     在getZhenYuan(time)中，time是请求的时间，首先是需要构建XmlHttpRequest，由于浏览器的不同，

 

     通过_GetXmlHttpRequest()构建 XmlHttpRequest对象xmlhttprequest。设置xmlhttprequest，采用异步方式来进行通信，还需要设置一个回调函数ongetZhenYuanComplete，当数据返回时系统会调用这个回调函数。

     在服务器端，zhenyuan.ashx解析请求的字符串，然后像客户端返回数据。

1. <%@ WebHandler Language="C#" Class="zhenyuan" %>
2. using System;
3. using System.Web;
5. public class zhenyuan : IHttpHandler
6. {
7.    string[] zhenyuaninfo = new string[] { "{'id':'1','x':'-618961.3234','y':'1126858.969','dzclass':'6','name':'ブン川','time':'2008-5-12 14:43'}"，“{这里还有很多，也可以将这些数据存为XML文件，然后再读取这个文件}”};
8.    string strValue = "";
10.    public void ProcessRequest(HttpContext context)
11.    {
12.       context.Response.ContentType = "text/plain";
13.       string strDate = context.Request.QueryString["Time"].ToString();
14.       string strSingle = context.Request.QueryString["singleday"].ToString();
15.       bool singleday = bool.Parse(strSingle);
16.       strValue = "[";
18.       if (singleday){
19.          bool iscontains = false;
21.          for (int i = 0; i < zhenyuaninfo.Length; i++){
22.             string strTemp = zhenyuaninfo[i].ToString();
23.             if(strTemp.Contains(strDate)) {
24.                strValue = strValue + strTemp + ",";
25.                iscontains = true;
26.             }
27.             else
28.             {
29.                if (iscontains) { break; }
30.             }
31.          }
32.       }
33.       else{
34.          for (int i = 0; i < 48; i++)
35.          {
36.             strValue = strValue + zhenyuaninfo[i].ToString() + ",";
37.          }
39.          if (strDate != "2008-5-12") {
40.             bool iscontains = false;
42.             for (int j = 48; j < zhenyuaninfo.Length; j++)
43.             {
44.                string strTemp = zhenyuaninfo[j].ToString();
45.                if(strTemp.Contains(strDate)){
46.                   strValue = strValue + strTemp + ",";
47.                   iscontains = true;
48.                }
49.                else
50.                {
51.                   if (iscontains == false)
52.                   {
53.                      strValue = strValue + strTemp + ",";
54.                   }
55.                   else { break; }
56.                }
57.             }
58.          }
59.       }
61.       if(strValue == "["){
62.          strValue = strValue + "noinformation";
63.       }
64.       else{
65.          strValue = strValue.Substring(0, strValue.Length - 1);
66.       }
68.       strValue = strValue + "]";
69.       context.Response.Write(strValue);
70.    }
72.    public bool IsReusable { get { return false; } }
73. } 

客户端接受到这些数据后，即可在地图的CustomLayer上添加自定义的图片

1. function addMark(markers){
2.    currentmarkersnum=markers.length;
3.    for(var i=0;i<currentmarkersnum;i++){
4.       var marker=markers[i];
5.       var innerHTML="<img ";
6.       if(parseInt(marker.dzclass)==6)
7.       {
8.          innerHTML+="style='width:20px;height:20px'";
9.       }
10.       else if(parseInt(marker.dzclass)==5)
11.       {
12.          innerHTML+="style='width:15px;height:15px'";
13.       }
14.       else
15.       {
16.          innerHTML+="style='width:10px;height:10px'";
17.       }
19.       var strinfo="震源："+marker.name+"("+marker.time+")";
21.       innerHTML+=" src='images/signed.gif' title='"+strinfo+"'/>"; 
23.       map.CustomLayer.InsertMark(marker.id, marker.x, marker.y, 10, 10, innerHTML);
24.    }
25. }

相关阅读：SuperMap IS.NET自定义Action之兴趣点标注

文章出处：http://www.diybl.com/course/4_webprogram/asp.net/netjs/2008624/127894_2.html