AJAX初探-XMLHTTP与服务端交互的小示例修正

为何标题为修正，主要因为大部分代码来自于网上的摘抄，由于抄来的代码本人调试之后始终不能另我满意，找了DOM的相关资料，终于修正了该示例，修正之处在代码中有注释，其实就是一个取值方式的小错误而已。该示例的功能是通过AJAX来实现无刷新的下拉框联动（同数据库交互）。

 

首先上主菜AjaxExa1_a.aspx

<% @ Page Language = " C# "  AutoEventWireup = " true "  Codebehind = " AjaxExa1_a.aspx.cs "  Inherits = " TestScript.AjaxExa1_a "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > 无标题页 </ title >
     < script  type ="text/javascript" >
     var  xmlHttp;

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

         var  url  =   " AjaxExa1_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 " );
             /* *************LIFY修改_START************* */
            option.text  =  rs[i].getElementsByTagName( " CityName " )[ 0 ].firstChild.data;
            option.value  =  rs[i].getElementsByTagName( " CityCode " )[ 0 ].firstChild.data;
             /* *************LIFY修改_END************* */
            blist.options.add(option);
        }
    }

     function  clearBList(){
         var  ven  =  document.getElementById( " BList " );
         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( " MSXML2.XMLHTTP.3.0 " );
        } 
         //  Mozilla
         else   if  (window.XMLHttpRequest){
            xmlHttp  =   new  XMLHttpRequest();
        }
    }
     </ script >
</ head >
< 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 >
</ html >

 

与数据库交互的界面AjaxExa1_b.aspx

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " AjaxExa1_b.aspx.cs "  Inherits = " TestScript.AjaxExa1_b "   %>

 

后台代码

 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.Data.SqlClient;

namespace  TestScript
{
     public   partial   class  AjaxExa1_b : System.Web.UI.Page
    {
         protected   void  Page_Load( object  sender, EventArgs e)
        {
             string  Avalue  =   "" ;
             string  strSql  =   " select CityName,CityCode from City  " ;
             if  ( this .Request.QueryString[ " Avalue " ]  !=   null )
                Avalue  =   this .Request.QueryString[ " Avalue " ].ToString();

            DataSet ds  =   new  DataSet();
            ConnectionClass cc  =   new  ConnectionClass();
             if  (Avalue  !=   "" )
                strSql  +=   " where Avalue =  "   +  Avalue;
            SqlDataAdapter sd  =   new  SqlDataAdapter(strSql, cc.getConn());
            sd.Fill(ds,  " city " );
            DataTable dt  =  ds.Tables[ " city " ];

             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);
        }
    }
}

 

ConnectionClass cc = new ConnectionClass();此类为本人构造的连接字符串类，各位可以用自己的方式来连接数据库。

然后再点辅料--数据表表结构如下:

CREATE   TABLE   [ City ]  (
     [ CityName ]   [ nvarchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
     [ CityCode ]   [ nvarchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NOT   NULL  ,
     [ Avalue ]   [ int ]   NULL  ,
     CONSTRAINT   [ PK_City ]   PRIMARY   KEY    CLUSTERED  
    (
         [ CityCode ]
    )   ON   [ PRIMARY ]  
)  ON   [ PRIMARY ]
GO

 

表记录此处为了各位学习方便也给出：

insert   [ City ]  (CityName,CityCode,Avalue)   values  (  ' 太原 ' , ' 001 ' , 0 )
insert   [ City ]  (CityName,CityCode,Avalue)   values  (  ' 石家庄 ' , ' 002 ' , 0 )
insert   [ City ]  (CityName,CityCode,Avalue)   values  (  ' 北京 ' , ' 003 ' , 1 )
insert   [ City ]  (CityName,CityCode,Avalue)   values  (  ' 海口 ' , ' 004 ' , 3 )
insert   [ City ]  (CityName,CityCode,Avalue)   values  (  ' 乌兰巴托 ' , ' 005 ' , 3 )

 最后编译就看各位的了，代码中也都有注释，就不详解了！祝各位吃的开心