AJAX 使用实践

在 Google 地图的使用上，我需要根据数据库中控制命令表(T_ZK_CtrlMsg)的记录行数，控制某一发送指令面板DIV是否显示。

指令面板DIV的代码如下：

<div class="monitor_show">
   <div id="DIV_Map" style="width:712px;height:456px;"></div>            
      <!-- 透明浮出层 -->
      <div id="jmp_show" class="jmp_show">
      <b></b>
      <div class="jmp_title2">
          <h3><a href="###" id="a_size" onclick="xg_showhidden('jmp_list',this);" class="jmp_min" title="最大化">最大化</a>遥测指令发送</h3>    

          <label><input type="radio" id="RBD_Point" name="RBD_Select" checked="checked" onclick="MarkerSelect('point');" />点选</label>
          <label><input type="radio" id="RBD_Polygon" name="RBD_Select" onclick="MarkerSelect('polygon');" />框选</label>
           <label><input type="radio" id="RBD_SelectAll" name="RBD_Select" onclick="MarkerSelect('all');" />全选</label>
                            
           <asp:Button ID="BTN_4102" runat="server" Text="查询" OnClick="BTN_4102_Click" />
           <asp:Button ID="BTN_4103" runat="server" Text="发送" OnClick="BTN_4103_Click" />
      </div>
                        
      <ul id="jmp_list" style="display:none">
          <asp:RadioButtonList ID="RDL_Order" runat="server">
              <asp:ListItem Text="" Value=""></asp:ListItem>
          </asp:RadioButtonList>
      </ul>                   
   </div>
</div>

注意：我需要在如下这个超链接中，去服务器端判断是否显示ID 为 jmp_list 的服务器控件是否显示。

<h3><a href="###" id="a_size" onclick="xg_showhidden('jmp_list',this);" class="jmp_min" title="最大化">最大化</a>遥测指令发送</h3>

接下来，我们看看JavaScript 中 xg_showhidden() 做了些什么。

<script>

 var xmlhttp;
 function initXmlHttp(){
     if(window.ActiveXObject){        //IE
         xmlhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
     }
     else if(window.XMLHttpRequest){  //非IE
         xmlhttp = new window.XMLHttpRequest();
     }
 }
 window.onload = initXmlHttp;
 
 function sendRequest(_url){ 
     //参数
     xmlhttp.open("GET",_url + "?ajax=ajax&" + new Date().getTime());
     xmlhttp.onreadystatechange = funState;
     xmlhttp.send(null);
 }
  
 function funState(){ 
      if( xmlhttp.readyState == 4)
      {
          if( xmlhttp.status == 200  ||  // 200  成功 
             xmlhttp.status == 0)       //本机测试可能为0。
          {
              var re = xmlhttp.responseText;
              document.getElementById("runPanelShow").value = re;
          }
      }
 }
 var obj1;
 function GetCtrlInstruct(id,el){

    obj1 = new Object();

    obj1.Id = id;

    obj1.El = el;

    //发送    

    sendRequest("Run_Ctrl.ashx");

    var tidck = window.setTimeout(function(id,el){
          var v_Show = document.getElementById("runPanelShow").value;

          if(v_Show == "false"){
             window.clearTimeout(tidck);
            // 指令过多，false
            alert("等待发送的指令过多，请稍后再试 ...");
          }
          if(v_Show == "true"){
            window.clearTimeout(tidck);
            //var objbox = document.getElementById('jmp_list');

            var objbox = document.getElementById(obj1.Id);

            objbox.style.display="";
            //var el = document.getElementById('a_size');
            //el.title="最小化";

            obj1.El.title = "最小化";

          }
    },1000); 
 }

 function xg_showhidden(id,el) {
    var objbox = document.getElementById(id);
    if (objbox.style.display=="") {
        objbox.style.display="none";
        el.title="最大化";
    }
    else {
        //xg  2011.12.21
        GetCtrlInstruct(id,el);    　 
    }
 }
</script>   
    <input type="hidden" id="runPanelShow" name="runPanelShow" value="" />

 

注意：

> 最后一个隐藏域是用来保存服务器处理的结果。

> 而 GetCtrlInstruct() 函数中，我使用了window.setTimeout() 函数每隔1秒钟就去询问服务器的处理结果，直到获得结果，才用

window.clearTimeout(tidck) 函数结束该计时器。

 

服务器端只是需要处理的结果数据。一开始，我就直接写在该页面对应的asp.cs文件中。

结果是，返回的不但有结果数据，接下来还有该页面的整个数据。于是，我才用了ashx 文件(Run_Ctrl.ashx)，代码如下：

namespace prj_ZK
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class Run_Ctrl : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");

            //----------------------- xg -------------------------
            //判断发送指令个数
            if (context.Request.HttpMethod == "GET")
            {
                string str = context.Request.QueryString[0];
                if (str == "ajax")
                {
                    int num = new ZK_BLL.CtrlMsg_BLL().Get_CtrlMsg_WaitSend_Num();
                    if (num >= 30)
                    {
                        context.Response.Write("false");
                    }
                    else context.Response.Write("true");
                }
            } 

            //----------------------- xg -------------------------

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

服务器端很简单，只是从数据库获得控制命令表的记录行数：

select count(*) from T_ZK_CtrlMsg

然后和 30 这个阀值比较大小，决定返回的是 true 还是 false 给 ID 为runPanelShow 的 hidden 控件。