熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

ASP.NET中使用無框架的Ajax實例

2013-11-13 09:41:47  來源: .NET編程 

  我們需要兩個頁面aaspxbaspxa頁面代碼如下(就用最常見的兩個下拉列表連動的例子)

  <body> <form id=Form method=post runat=server> <select id=AList onchange=SetBList()> <option value=>A</option> <option value=>B</option> <option value=>C</option> </select> <select id=BList></select> </form> </body>

  當a頁面觸發onchange事件後我們進入寫在a頁面的SetBList()方法中這裡將完整的js列出來



  

  <script language=javascript> var xmlHttp; function SetBList() { var avalue = documentgetElementById(AList)value; var url = baspx?Avalue= + avalue; createXMLHttpRequest(); // 創建xmlHttp對象 xmlHttponreadystatechange = handleStateChange; // 當xmlHttp狀態碼發生改變時調用handleStateChage方法 xmlHttpopen(GET url true); // GET方法發送請求 xmlHttpsend(null); } function BListInitial() { // 先清空一下BList的option clearBList(); var blist = documentgetElementById(BList); // 獲取BList對象 var rs = xmlHttpresponseXMLgetElementsByTagName(City); // 從返回xml文檔中讀取<City>標簽的數據 // 這個循環取值的地方卡了我一會將xmlHttpresponseXML創建成一個xml文檔然後找讀文檔的方法但問題是不同浏覽器創建xml文檔的方法不一樣 for(var i=;i<rslength;i++) { var option = documentcreateElement(OPTION); optiontext = rs[i]getElementsByTagName(CityName); optionvalue = rs[i]getElementsByTagName(CityCode); blistoptionsadd(option); } } function clearBList() { var ven = documentgetElementById(VendorList); while(venoptionslength > ) venremoveChild(venchildNodes[]); } function handleStateChange() { if(xmlHttpreadyState == ) { if(xmlHttpstatus == ) { BListInitial(); } } } function createXMLHttpRequest() { // IE if (windowActiveXObject) { xmlHttp = new ActiveXObject(MicrosoftXMLHTTP); } // Mozilla else if (windowXMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } </script>

  baspx頁面將html部分全部刪除僅僅留一行

  <%@ Page language=c# Codebehind=baspxcs AutoEventWireup=false Inherites=TestAjax %>

  原因是我們a頁面要求返回的xml文檔因此我們將Html標簽部分刪除然後在b頁面的Page_Load方法中對數據庫進行操作然後數據寫成xml的格式例如

  // 數據庫操作得到DataTable dt string xml = <Data>; foreach(DataRow row in dtRows) { xml += <City>; xml += <CityName> + row[CityName] + </CityName>; xml += <CityCode> + row[CityCode] + </CityCode>; xml += </City>; } xml += </Data>; // 清頁面格式寫xml ResponseClearContent(); ResponseCacheSetNoStore(); ResponseContentType = text/xml; ResponseContentEncoding = SystemTextEncodingUTF; ResponseWrite(xml);

  在整體運行之前可以先將b頁面測試一下

  如果得到類似如下結果則說明數據部分是沒問題的

   <Data> <Vendor> <VendorId></VendorId> <VendorName>千千</VendorName> </Vendor> </Data>


From:http://tw.wingwit.com/Article/program/net/201311/11357.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.