c#.net下简单的Ajax例子

  

    昨天调试这个例子时，问我们公司的一个大牛，关于js底层原生函数用法的问题，他说不知道，建议我去网上找一个小框架，看来 “不重复造轮子”的想法已经深入人心。而这个建议显然背离我写这个demo原本的意愿。当然，后来google到了答案。

    可能.net程序员手写方法的时候很少，在初学时，就被前辈灌输“使用框架！”、“用系统自带方法！”这个概念，直接导致我们某方面相对孱弱。这也是为什么，用java写Ajax例子信手拈来，而用C#写，却困难重重——网上很难找到不用Ajax.dll实现的例子。好了，闲话不说了，进入主题：

    我们需要两个页面a.aspx、b.aspx，a页面代码如下（就用最常见的，两个下拉列表连动的例子）：

  

< body >
     < form  id ="Form1"  method ="post"  runat ="server" >
     < select  id ="AList"  onchange ="SetBList()" >
         < option  value ="0" > A </ option >
         < option  value ="1" > B </ option >
         < option  value ="3" > C </ option >
     </ select >
     < select  id ="BList" ></ select >
      </ form >
   </ body >

 

 

当a页面触发onchange事件后，我们进入写在a页面的SetBList()方法中，这里将完整的js列出来：

 

< script language = " javascript " >
var  xmlHttp;

function  SetBList() ...{
     var  avalue  =  document.getElementById( " AList " ).value;

     var  url  =   " b.aspx?Avalue= "   +  avalue;
    createXMLHttpRequest();   //  创建xmlHttp对象
    xmlHttp.onreadystatechange  =  handleStateChange;   //  当xmlHttp状态码发生改变时，调用handleStateChage方法
    xmlHttp.open( " GET " , url,  true );    //  GET方法发送请求
    xmlHttp.send( null );
}

function  BListInitial() ...{
     //  先清空一下BList的option
    clearBList();

     var  blist  =  document.getElementById( " BList " );   //  获取BList对象
     var  rs  =  xmlHttp.responseXML.getElementsByTagName( " City " );   //  从返回xml文档中，读取<City>标签的数据
     //  这个循环取值的地方，卡了我一会，将xmlHttp.responseXML创建成一个xml文档，然后找读文档的方法，但问题是不同浏览器创建xml文档的方法不一样
     for ( var  i = 0 ;i < rs.length;i ++ ) {
         var  option  =  document.createElement( " OPTION " );
        option.text  =  rs[i].getElementsByTagName( " CityName " );
        option.value  =  rs[i].getElementsByTagName( " CityCode " );
        blist.options.add(option);
    }
}

function  clearBList() ...{
     var  ven  =  document.getElementById( " VendorList " );
     while (ven.options.length  >   0 )
        ven.removeChild(ven.childNodes[ 0 ]);
}

function  handleStateChange() ...{
     if (xmlHttp.readyState  ==   4 ) ...{
         if (xmlHttp.status  ==   200 ) ...{
            BListInitial();
        }
    }
}

function  createXMLHttpRequest() ...{
     //  IE
     if  (window.ActiveXObject) ...{
        xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
    } 
     //  Mozilla
     else   if  (window.XMLHttpRequest) ...{
        xmlHttp  =   new  XMLHttpRequest();
    }
}
</ script >
 

 

 b.aspx页面将html部分全部删除，仅仅留一行：

 

<% @ Page language = " c# "  Codebehind = " b.aspx.cs "  AutoEventWireup = " false "  Inherites = " Test.Ajax "   %>

  

原因是我们a页面要求返回的xml文档，因此，我们将Html标签部分删除。然后在b页面的Page_Load方法中，对数据库进行操作，然后数据写成xml的格式，例如：

 

//  ......    
//  数据库操作，得到DataTable dt

string  xml  =   " <Data> " ;
foreach (DataRow row  in  dt.Rows)  {
    xml  +=   " <City> " ;
    xml  +=   " <CityName> "   +  row[ " CityName " ]  +   " </CityName> " ;
    xml  +=   " <CityCode> "   +  row[ " CityCode " ]  +   " </CityCode> " ;
    xml  +=   " </City> " ;
}
xml  +=   " </Data> " ;

//   清页面格式，写xml
Response.ClearContent();
Response.Cache.SetNoStore();
Response.ContentType  =   " text/xml " ;
Response.ContentEncoding  =  System.Text.Encoding.UTF8;
Response.Write(xml);

 

在整体运行之前可以先将b页面测试一下，如果得到类似如下结果，则说明，数据部分是没问题的。 

-  < Data >
    -  < Vendor >
         < VendorId > 7 </ VendorId >  
        < VendorName > 千千 </ VendorName >  
    </ Vendor >
</ Data >

 

 到此，这个例子基本结束了，有问题，请在评论区留言。