基于Ajax的web2.0

来源:互联网 发布:淘宝假冒伪劣产品 编辑:程序博客网 时间:2024/05/21 12:44
<input type="button" id="Button1" value="Search" onclick="getData()" />
    <script type="text/javascript">
        var xmlhttp;
        function createRequest()
        {
        //首先判断是否是IE浏览器
            if(window.ActiveXObject)
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest;//FireFox

            }//此处根据浏览器的不同,可以有多种创建对象
        }
        function getData()
        {
           //获取用户填写名称
           var city = document.getElementById("txt").value;
           //创建异步调用对象
           createRequest();
           //将对象状态与事件相关联
           xmlhttp.onreadystatechange = statechange;//方法后面不加括号
           //加载要链接的页面
           xmlhttp.open("POST","datapage.aspx?city=" +city,true);
           //发送请求
           xmlhttp.send();
        }
        function statechange()
        {
           //判断异步调用是否已经成功,返回的状态代码==200,表示调用成功
           if(xmlhttp.readystate == 4 && xmlhttp.status == 200)
           {
               //将返回数据作为参数,传递给填充方法
               FillData(xmlhttp.responseText);//文本获取,xmlhttp.responseXML是xml类型获取
           }
        }
        function FillData(strcity)
        {
           document.getElementById("DropDownList1").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("DropDownList1").add(new option(city,city));
               }
               else
               {
                  //如果是最后一个字符串
                  lastcity = strcity.substring(0,2);
                  document.getElementById("DropDownList1").add(new option(lastcity,lastcity));
                  break;
               }
           };
        }

    </script> 


protected void Page_Load(object sender, EventArgs e)
{     

 //获取传递过来的参数
            string city = Request.QueryString["city"];
            Response.Clear();
            //判断城市名
            switch(city)
            {
                case "北京":
                    //填充相关的区域
                    Response.Write("朝阳,海淀,东城,西城");
                    break;
                case "上海":
                    Response.Write("浦东,静安,虹口,徐汇");
                    break;
                case "苏州":
                    Response.Write("园区,新区,古城区,昆山,吴江,张家港,太仓");
                    break;
            }

}