• Ajax基本过程


    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!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>第一个使用 Ajax 技术进行局部刷新的示例.</title>
       <script type="text/javascript">
        var xmlhttp;
       
        //Ajax的核心思想是: 将数据分类(可以按任何用户需要的方式分类)然后放在不同的服务器页中, 这样当用户需要时只要加载需要的那个页即可.
        //但这里面还有其他的一些技术: 如异步响应等.
        function getData()
        {
          //获取DOM实例名
          var city=document.getElementById("txt").value;
         
          //第一步: 创建异步调用对象: 这里指浏览器为: IE浏览器.
          //如果是Firefox(或其他非IE)使用 new XmlHttpRequest()进行实例化.
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
         
          //第二步: 将对象状态与事件相关联
          //异步调用 服务器状态的变化, 一旦客房端开始与服务器端进行交互, 要控制客房端的改变, 就需要判断目前交互的状态.
          xmlhttp.onreadystatechange=statechange; //注意: 后面的状态函数名自定义. 但不能跟括号. 因为是以委托(事件)的方式定义的.
         
          //第三步: 加载数据所在的服务器页
          //加载数据所在的服务器, Ajax获取数据可以从其他网站获取, 也可以从本地的XML文件中获取.这里指从另一个网站(网页)获取数据.
          xmlhttp.Open("POST","datapage.aspx?city=" +city,true);  //true表示异步, false表示同步(有时会有意义)
         
          //第三步: 发送请求
          //发送一个HTTP请求.请求的数据可以是有选择性的.即 Send(params)中可以给参数赋值来选取自己感兴趣的数据.不要时使用null或空.
          //当系统调用 Send方法后, 后台与服务器的交互才真正开始, 状态编号就开始改变.开发人员可以状态处理方法中, 处理网站需要的更改.
          xmlhttp.Send();
        }
       
        //状态改变的处理函数.
        function statechange()
        {
          //判断异步调用是否已经完成
          if(xmlhttp.readystate==4)
          {
            //判断完成的提示代码是否是OK状态
            if(xmlhttp.status==200)
            {
               //将返回数据作为参数,传递给填充方法
               alert("异步调用完成.数据已经接收完成.下面将要给控件加载获取来的数据(即处理异步获取的数据)!");
              
               //第五步: 处理数据--严格地说这里已不属性Ajax范围, 但因其返回数据对象(这里为xmlhttp.responseText), 固列入.
               //调用下列方法将获取的数据进行处理(此处为加载到控件 dropdownlist中.
               FillData(xmlhttp.responseText);
              
                
           //如果是本地的xml文件, 则应该使用下列语句:
           // document.getElementById("myText").innerHTML=xmlhttp.responseText;
            }
          }
        }
       
        //处理异步获取的数据的函数定义体.
        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>
    </head>
    <body>
        <form id="form1" runat="server" method="post">
        <div>
            <table style=" 463px; height: 152px">
                <tr>
                    <td colspan="2" style="font-weight: bold; color: #0000ff; text-align: center">
                        Ajax实现局部刷新</td>
                </tr>
                <tr>
                    <td style=" 265px">
                        填写城市名称</td>
                    <td>
                        <!--<asp:TextBox ID="TextBox1" runat="server" Width="252px"></asp:TextBox>-->
                        <input type="text"  id="txt" style=" 245px"/>
                        </td>
                </tr>
                <tr>
                    <td style=" 265px">
                    </td>
                    <td>
                        <input id="Button1" style=" 147px" type="button" value="查询" onclick="getData()" /></td>
                </tr>
                <tr>
                    <td style=" 265px">
                        选择区域列表</td>
                    <td>
                        <asp:DropDownList ID="DropDownList1" runat="server" Width="255px">
                        </asp:DropDownList></td>
                </tr>
            </table>
       
        </div>
            <br />
            <br />
        </form>
    </body>
    </html>

  • 相关阅读:
    implement a plus b / a minus b without using any arithmetic operators
    The month's days(leap year defination)
    sort algorithm
    js数组去重
    rabbitmq环境安装
    线程池
    课外加餐:4 | 页面性能工具:如何使用 Performance?
    课外加餐:5 | 性能分析工具:如何分析Performance中的Main指标?
    结束语
    课外加餐:6 | HTTPS:浏览器如何验证数字证书?
  • 原文地址:https://www.cnblogs.com/lifuyun/p/lifuyun090520.html
Copyright © 2020-2023  润新知