Ajax学习（二）Ajax局部刷新

 

 

 

上一篇：Ajax学习（一）Ajax简单的异步调用

http://blog.csdn.net/wlj0804/archive/2007/10/17/1830135.aspx

 

一个 简单的局部刷新，利用传值，取到另个页面的数据到下拉框。

1、打开VS2005新建一个站点。

2、“添加新项” 新建 Data.aspx，切换到代码视图，在Page_Load输入代码：

 

protected   void  Page_Load( object  sender, EventArgs e)
    {
         // 获取传递过来的参数
         string  city  =  Request.QueryString[ " city " ];

         // 判断城市名
         switch  (city)
        {
             case   " beijing " :
                 // 填充相关的区域
                Response.Write( " 朝阳,海淀,东城,西城 " );
                 break ;
             case   " shanghai " :
                Response.Write( " 浦东,静安,虹口,徐汇 " );
                 break ;
        }
    }

 

3、打开Default.aspx文件，切换到源代码视图，做界面，在BODY里加入带代码：

 

< body >
     < form  id ="form1"  runat ="server"  method ="post" >
     < div >
        城市：
         < asp:DropDownList  ID ="ddlCity"  runat ="server" >
             < asp:ListItem > shanghai </ asp:ListItem >
             < asp:ListItem > beijing </ asp:ListItem >
         </ asp:DropDownList >
         < input  id ="Button1"  type ="button"  value ="确定"  onclick ="getData()"  size =""   />
         < br  />
        区域：
         < asp:DropDownList  ID ="ddlArea"  runat ="server" ></ asp:DropDownList >
     </ div >
     </ form >
</ body >

 

4、在最下面加入javascript 如下：

 

< script type = " text/javascript " >
     var  xmlhttp;
     function  getData()
    {
        
       // 获取用户选择的下拉框的项
       var  city = document.getElementById( " ddlCity " ).value;
       // 创建异步调用对象
      xmlhttp = new  ActiveXObject( " Microsoft.XMLHTTP " );
       // 将对象状态与事件相关联
      xmlhttp.onreadystatechange = StateDO;
       // 加载要链接的页面
      xmlhttp.Open( " GET " , " datapage.aspx?city= "   +  city, true );
       // 发送请求
      xmlhttp.Send( null );
      
    }
     function  StateDO()
    {
       // 判断异步调用是否已经完成
       if (xmlhttp.readystate == 4 )
      {
         // 判断完成的提示代码是否是OK状态，200表示成功，其他错误可能是404等等
         if (xmlhttp.status == 200 )
        { 
            // 将返回数据作为参数，传递给填充方法
           FillData(xmlhttp.responseText);
        }
      }
    }
     function  FillData(strcity)
    {
       document.getElementById( " ddlArea " ).options.length = 0 ;
        var  indexofcity;
        var  city;
        // 切割传递来的字符串
        while (strcity.length > 0 )
       {
        // 判断是否是最后一个字符串
        indexofcity = strcity.indexOf( " , " );
             if (indexofcity  > 0 )
            {
            city = strcity.substring( 0 ,indexofcity);
            strcity = strcity.substring(indexofcity + 1 );
             // 填充下拉框
            document.getElementById( " ddlArea " ).add( new  Option(city,city));
            }
         else
        {
            //  如果是最后一个字符串
           lastcity = strcity.substring( 0 , 2 );
           document.getElementById( " ddlArea " ).add( new  Option(lastcity,lastcity));
            break ;
        }
       }
    }
</ script >

 

5、将Default.aspx设为启动页，运行。

如单击按钮没反应，通过调试，看看xmlhttp.status的值是不是200，可能是404，那样的话 把项目放在IIS里运行