在asp.net 1.1 中使用Ajax

最近和一个朋友一起作一个网站，有些地方需要用到无刷新获取，但是他在本机上应用MajicAjax、Ajax.Net 都没有问题，传到服务器上面却不支持，没有办法，就只能自己写了。

之前做Asp的时候也会应用到一些无刷新（比如鼠标移到某一行然后就出现一个div显示这行记录的详细信息、备注等内容，或者是注册时候无刷新提交到服务器端并返回该用户名是否已经注册)。当时还没有出现Ajax这个名词, 比如在CSDN提问都是讲 xmlhttp无刷新。当时我的做法多数是让服务器端.asp页面返回一段xml，然后客户端js直接建立microsfot.xmldom这个对象去解析 服务器端 asp返回的xml就可以了。或者也可以通过xmlhttp去获取responseXML ,然后建立xmldom对象去解析xml最终得到想要的部分，或者就是直接获取responseText然后再通过js操作来达到目的。

网上搜索了一下在.net中应用ajax，比较有帮助的是小山的这篇blog  XmlHttp实现无刷新三联动下拉框。看得差不多了，那就比着葫芦画瓢开工吧。

下面就用 发布日志时无刷新添加新的日志分类 这个页面及相应服务器端代码 作为示例演示一下俺的ajax：）

客户端页面部分代码AddNewBlog.aspx :　发布日志，选择日志分类时可添加新分类并即时更新
JS代码部分，结合使用Prototype.js

<script language="javascript" src="../../Js/prototype.js"></script>
<script language="javascript">
//add ans save new rizhi class
function addRzClass() {  
  var str='';
  str += '<input type="text" size="20" maxlength="20" name="newRzClass" id="newRzClass" class="text">';
  str += '&nbsp;&nbsp;<input type="button" onClick="javascript:saveRzClass()" value="保存">';
  str += '&nbsp;&nbsp;<input type="button" onClick="javascript:cancelAddRzClass()" value="取消">';
  
  $('showRzClassInput').innerHTML = str; 
}

function cancelAddRzClass() {
  $('showRzClassInput').innerHTML = '<a href="javascript:addRzClass()">添加类别</a>'; 
}

function setTougao() {
  $('trConCategory').style.display=($('trConCategory').style.display=='none'?'':'none');
}

function saveRzClass() {  
  var slt = $('ddlRzClass');
  var newClassName = $F('newRzClass');
  
  var url = "RzClass.aspx";
  var pars = "cn="+ newClassName;
  var ajax = new Ajax.Request(
    url,
    {
    method : 'get',
    parameters: pars,
    onComplete : completeAddClass
    }
  );
}

function completeAddClass(request) {
  var slt = $('ddlRzClass');
  var newClassName = $F('newRzClass');
  var v = request.responseText;
  if(v.toString() =="0") {alert('该类别名称已存在，请选择其他名称');return false;}
    
  slt.options[slt.options.length]= new Option(newClassName, v);
  slt.options[slt.options.length-1].selected = true;
  $('hidNewClassId').value = v;
  cancelAddRzClass();
}

function changeRzClass(e) {  
  $('hidNewClassId').value = e.options[e.selectedIndex].value;
}
</script>

添加分类的html部分

<tr>                    
 <td width="9%">类&nbsp;&nbsp;&nbsp;别：</td>
 <td width="91%">    
  <asp:dropdownlist id="ddlRzClass" runat="server" onchange="changeRzClass(this)"></asp:dropdownlist>&nbsp;&nbsp;
  <span id="showRzClassInput"><A href="javascript:addRzClass()">添加类别</A></span>
  </td>
</tr>

相应服务器端.cs部分代码 （RzClass.aspx.cs）

    private const string KEY_CLASSNAME = "cn";
    private readonly Nineng.Blog.BLL.blog_rzClass rzClass=new Nineng.Blog.BLL.blog_rzClass();
  
    private void Page_Load(object sender, System.EventArgs e) {
      // 在此处放置用户代码以初始化页面
      //init
      if(!IsPostBack) {
        InitData();
      }

      if(className != "") {
        SaveClassAndReturnNewClassID(className);
      }
    }

    void SaveClassAndReturnNewClassID(string className) {
      string s = "0";
      if(! rzClass.Exists(this.loginUserBlogID, className)) {
        Nineng.Blog.Model.rzClass rzClassInfo=new Nineng.Blog.Model.rzClass();
        rzClassInfo.blogId=this.loginUserBlogID;
        rzClassInfo.className=Nineng.Utility.CommonFun.GetFormText(className);
        rzClassInfo.rzCount=0;
        //add class         
        s = rzClass.Add(rzClassInfo).ToString();
      }
      this.Response.Write(s);
      this.Response.End();
    }

    property for ajax#region property for ajax
    private string className {
      get {
        if (Request.QueryString[KEY_CLASSNAME] != null && Request.QueryString[KEY_CLASSNAME].ToString() != "") {
          return Request[KEY_CLASSNAME];
        }
        else {
          return "";
        }
      }
    
    }
    #endregion

以上代码算是ajax在.net1.1中的简单应用，.net 2.0中适用大同小异。通过以上的代码我觉得主要有下面几个要点：
1. 服务器端.cs中使用property 在page_load 之前取获得 客户端js发送的request请求
2. 输出需要获取的返回值后用response.end中止页面继续执行
其余的实现主要是 客户端js的操作了。

btw : 我觉得cnblog.com也可以在发布日志时增加通过Ajax无刷新添加新的分类这样一个功能，这样用户使用起来会更加方便一些。