zoukankan      html  css  js  c++  java
  • 【转】c#.net下简单的Ajax例子

        可能.net程序员手写方法的时候很少,在初学时,就被前辈灌输使用框架!用系统自带方法!这个概念,直接导致我们某方面相对孱弱。这也是为什么,用javaAjax例子信手拈来,而用C#写,却困难重重——网上很难找到不用Ajax.dll实现的例子。好了,闲话不说了,进入主题:

        我们需要两个页面a.aspxb.aspxa页面代码如下(就用最常见的,两个下拉列表连动的例子):

    <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>

     

    a页面触发onchange事件后,我们进入写在a页面的SetBList()方法中,这里将完整的js列出来:

     

    <script language="javascript">
    var xmlHttp;

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

        
    var url = "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");
            option.text 
    = rs[i].getElementsByTagName("CityName");
            option.value 
    = rs[i].getElementsByTagName("CityCode");
            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("Microsoft.XMLHTTP");
        } 
        
    // Mozilla
        else if (window.XMLHttpRequest) ...{
            xmlHttp 
    = new XMLHttpRequest();
        }
    }
    </script>
     



     b.aspx页面将html部分全部删除,仅仅留一行:

    <%@ Page language="c#" Codebehind="b.aspx.cs" AutoEventWireup="false" Inherites="Test.Ajax" %>

      

    原因是我们a页面要求返回的xml文档,因此,我们将Html标签部分删除。然后在b页面的Page_Load方法中,对数据库进行操作,然后数据写成xml的格式,例如:

    // ......    
    // 数据库操作,得到DataTable dt

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

    在整体运行之前可以先将b页面测试一下,如果得到类似如下结果,则说明,数据部分是没问题的。 

    <Data>
        - 
    <Vendor>
            
    <VendorId>7</VendorId> 
           
    <VendorName>千千</VendorName> 
       
    </Vendor>
    </Data>
  • 相关阅读:
    BZOJ2821 作诗(Poetize) 【分块】
    BZOJ2724 蒲公英 【分块】
    Codeforces 17E Palisection 【Manacher】
    BZOJ2565 最长双回文串 【Manacher】
    Codeforces 25E Test 【Hash】
    CODEVS3013 单词背诵 【Hash】【MAP】
    HDU2825 Wireless Password 【AC自动机】【状压DP】
    HDU2896 病毒侵袭 【AC自动机】
    HDU3065 病毒侵袭持续中【AC自动机】
    HDU2222 Keywords Search 【AC自动机】
  • 原文地址:https://www.cnblogs.com/seerlin/p/1186931.html
Copyright © 2011-2022 走看看