Ajax实现局部刷新

View Post

<span style="font-size:18px;color:#ff6666;">Ajax实现局部刷新</span>

    <span style="font-size:16px;"><script type="text/javascript">
    var xmlhttp;
    function getData()
    {
      //获取用户填写的名称
      var city=document.getElementByIdx("txt").value;
      //创建异步调用对象
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      //将对象状态与事件相关联
      xmlhttp.onreadystatechange=statechange;
      //加载要链接的页面
      xmlhttp.Open("POST","datapage.aspx?city=" +city,true);
      //发送请求
      xmlhttp.Send();
    }
    function statechange()
    {
      //判断异步调用是否已经完成
      if(xmlhttp.readystate==4)
      {
        //判断完成的提示代码是否是OK状态
        if(xmlhttp.status==200)
        {
           //将返回数据作为参数，传递给填充方法
           FillData(xmlhttp.responseText);
        }
      }
    }
    function FillData(strcity)
    {
       document.getElementByIdx("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.getElementByIdx("DropDownList1").add(new Option(city,city));
        }
        else
        {
        // 如果是最后一个字符串
           lastcity=strcity.substring(0,2);
           document.getElementByIdx("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 "beijing":
                //填充相关的区域
                Response.Write("朝阳,海淀,东城,西城");
                break;
            case "shanghai":
                Response.Write("浦东,静安,虹口,徐汇");
                break;
            case "jinan":
                Response.Write("历下,历城,市中,天桥");
                break;
        }
    }

</span> 

-------------------------------------------------------------------------------

<span style="font-size:18px;color:#ff6666;">使用回调技术实现局部刷新</span>
 <span style="font-size:16px;"><script type="text/javascript">
        function FillData()
        {
           var city=document.getElementByIdx("TextBox1").value;
     
            <% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null)  %>;
        }
        function FillDll(strcity)
        {
           document.getElementByIdx("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.getElementByIdx("DropDownList1").add(new Option(city,city));
            }
            else
            {
            // 如果是最后一个字符串
               document.getElementByIdx("DropDownList1").add(new Option(strcity,strcity));
               break;
            }
           };
        }
    </script>


    private string _data;
    public string GetCallbackResult()
    {
        //返回处理后的数据
        return _data;
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
        //判断传递过来的参数
        switch (eventArgument)
        {
            case "北京":
                _data = "朝阳,海淀,东城,西城";
                break;
            case "上海":
                _data = "浦东,静安,徐汇,虹口";
                break;
            case "济南":
                _data = "历城,历下,市中,天桥";
                break;
        }
    }


</span>-------------------------------------------------------------------------------------

<span style="font-size:18px;color:#ff6666;">Iframe实现局部刷新</span>
    <span style="font-size:16px;"><script language="javascript">
       function Search()
       {
            var city=document.getElementByIdx("TextBox1").value;
            if(city !="")
            {
               document.getElementByIdx("iframe1").src="myframe.aspx?city=" +city;
            }
       }
    </script>
 <iframe src="myframe.aspx" style="TEXT-ALIGN: center" id="iframe1" width="100%" height="100%"  frameborder="0" scrolling="no"/>

第二页面myframe.aspx

    <div style="TEXT-ALIGN: center">
        <asp:DropDownList ID="DropDownList1" runat="server" Width="154px">
        </asp:DropDownList></div>
 protected void Page_Load(object sender, EventArgs e)
    {
        //获取传递过来的参数
        string city = Request.QueryString["city"];
        //判断城市名
        switch (city)
        {
            case "北京":
                //填充相关的区域
                DropDownList1.Items.Clear();
                DropDownList1.Items.Add("朝阳");
                DropDownList1.Items.Add("海淀");
                DropDownList1.Items.Add("东城");
                DropDownList1.Items.Add("西城");
                break;
            case "上海":
                DropDownList1.Items.Clear();
                DropDownList1.Items.Add("浦东");
                DropDownList1.Items.Add("静安");
                DropDownList1.Items.Add("虹口");
                DropDownList1.Items.Add("徐汇");
                break;
            case "济南":
                DropDownList1.Items.Clear();
                DropDownList1.Items.Add("历下");
                DropDownList1.Items.Add("历城");
                DropDownList1.Items.Add("市中");
                DropDownList1.Items.Add("天桥");
                break;
        }
    }


---------------------------------------------------------------------------------

<span style="color:#ff6666;">使用脚本方法实现局部刷新</span>
        <script   type="text/javascript">
        function FillData(strcity)
        {
           document.getElementByIdx("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.getElementByIdx("DropDownList1").add(new Option(city,city));
            }
            else
            {
            // 如果是最后一个字符串
               document.getElementByIdx("DropDownList1").add(new Option(strcity,strcity));
               break;
            }
           };
        }
    </script>

 

using System.Text;
protected void Page_Load(object sender, EventArgs e)
    {
        //创建字符串连接对象
        StringBuilder myscript = new StringBuilder();
        //使用字符串组织一个JavaScript脚本方法
        myscript.Append("function seekCity()    {\n");
        myscript.Append("var city=document.getElementByIdx(\'TextBox1\').value; \n");
        myscript.Append("switch(city)       {\n");
        myscript.Append("case \'北京\': \n");
        myscript.Append("FillData(\'" + GetCityStr("北京") +"\'); \n");
        myscript.Append("break; \n");
        myscript.Append("case \'上海\': \n");
        myscript.Append("FillData(\'" + GetCityStr("上海") + "\'); \n");
        myscript.Append("break; \n");
        myscript.Append("case \'济南\': \n");
        myscript.Append("FillData(\'" + GetCityStr("济南") + "\'); \n");
        myscript.Append("break; }\n");
        myscript.Append(" }\n");
        //使用注册脚本方法在页面的客户端，注册这个字符串编写的脚本方法。
        Page.ClientScript.RegisterClientScriptBlock(typeof(string), "seekCity", myscript.ToString(),true);

    }
    //通过获取城市名，返回城市的区县字符串
    private string GetCityStr(string INcity)
    {
        string city="";
        switch (INcity)
        {
            case "北京":
                city = "朝阳,海淀,东城,西城";
                break;
            case "上海":
                city = "浦东,静安,徐汇,虹口";
                break;
            case "济南":
                city = "历城,历下,市中,天桥";
                break;
        }
        //返回包含区县的 字符串连接
        return city;
    }
</span>