AjaxTest.js 客户端JavaScript文件,负责请求动态数据
AjaxTest.js
var xmlHttpRequest = false; var url="ajaxData.aspx";var xmlTagName='select';var selectID=null;var postStr=null;//創建XMLHttpRequest対象function createRequest() { xmlHttpRequest = false; if(window.XMLHttpRequest) // Mozilla, Safari,
{ xmlHttpRequest = new XMLHttpRequest(); if(xmlHttpRequest.overrideMimeType) { xmlHttpRequest.overrideMimeType('text/xml'); } } else if(window.ActiveXObject) // IE { try { xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } } if(!xmlHttpRequest) { alert('Giving up :( Cannot create an XMLHTTP instance'); return false; }}//動態のデータを願い出ますfunction sendRequest(){ createRequest(); xmlHttpRequest.onreadystatechange = callback; xmlHttpRequest.open("POST", url, true); xmlHttpRequest.setRequestHeader("cache-control","no-cache"); xmlHttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xmlHttpRequest.send(postStr);}//動態のデータを得ますfunction callback(){ if(xmlHttpRequest.readyState == 4) { if(xmlHttpRequest.status == 200) { setSelectOptions() } else { alert('There was a problem with the request.'); } }}//新しい値を設定しますfunction setSelectOptions(){ var xmlDoc=xmlHttpRequest.responseXML; var selectNodes=xmlDoc.getElementsByTagName(xmlTagName); var select=document.getElementById(selectID) select.options.length=1; for(var i=0;i<selectNodes.length;i++) { var value=selectNodes[i].childNodes[0].firstChild.nodeValue; var text=selectNodes[i].childNodes[1].firstChild.nodeValue; select.options.add(new Option(text,value)); }}//function changeDisplay(value){ if(value==0) { //alert('This is a test.'); document.getElementById("Div1").style.visibility="hidden"; document.getElementById("Div2").style.visibility="hidden"; document.getElementById("Div3").style.visibility="hidden"; } else if(value==1) { document.getElementById("Div1").style.visibility="visible"; document.getElementById("Div2").style.visibility="hidden"; document.getElementById("Div3").style.visibility="hidden"; } else if(value==2) { document.getElementById("Div1").style.visibility="visible"; document.getElementById("Div2").style.visibility="visible"; document.getElementById("Div3").style.visibility="hidden"; } else if(value==3) { document.getElementById("Div1").style.visibility="visible"; document.getElementById("Div2").style.visibility="visible"; document.getElementById("Div3").style.visibility="visible"; } ajaxSetSelect1();}//function ajaxSetSelect1(){ selectID='Select1' postStr='selectID='+selectID; sendRequest(); document.getElementById('Select2').options.length=1; document.getElementById('Select3').options.length=1;}function ajaxSetSelect2(value){ selectID='Select2' postStr='selectID='+selectID+'&optionValue='+value; sendRequest(); document.getElementById('Select3').options.length=1;}function ajaxSetSelect3(value){ selectID='Select3' postStr='selectID='+selectID+'&optionValue='+value; sendRequest();}WebForm1.aspx 客户端HTML页面,负责数据呈现
WebForm1.aspx<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="Ajax.WebForm1" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML> <HEAD> <title>WebForm1</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> <script src="AjaxTest.js" type="text/javascript"></script> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <FONT face="MS UI Gothic"></FONT> <DIV id="Div1" style="Z-INDEX: 101; LEFT: 432px; VISIBILITY: hidden; WIDTH: 280px; POSITION: absolute; TOP: 120px; HEIGHT: 24px" ms_positioning="FlowLayout"> <DIV style="DISPLAY: inline; WIDTH: 70px; HEIGHT: 18px" ms_positioning="FlowLayout">第一級：</DIV> <SELECT id="Select1" style="WIDTH: 184px" onchange="ajaxSetSelect2(this.value)" name="Select1"> <OPTION value="0" selected></OPTION> </SELECT></DIV> <DIV id="Div2" style="Z-INDEX: 102; LEFT: 432px; VISIBILITY: hidden; WIDTH: 280px; POSITION: absolute; TOP: 176px; HEIGHT: 24px" ms_positioning="FlowLayout"> <DIV style="DISPLAY: inline; WIDTH: 70px; HEIGHT: 15px" ms_positioning="FlowLayout">第二級：</DIV> <SELECT id="Select2" style="WIDTH: 184px" onchange="ajaxSetSelect3(this.value)" name="Select2"> <OPTION value="0" selected></OPTION> </SELECT></DIV> <DIV id="Div3" style="Z-INDEX: 103; LEFT: 432px; VISIBILITY: hidden; WIDTH: 280px; POSITION: absolute; TOP: 232px; HEIGHT: 24px" ms_positioning="FlowLayout"> <DIV style="DISPLAY: inline; WIDTH: 70px; HEIGHT: 15px" ms_positioning="FlowLayout">第三級：</DIV> <SELECT id="Select3" style="WIDTH: 184px" name="Select3"> <OPTION value="0" selected></OPTION> </SELECT> </DIV> <DIV id="Div4" style="Z-INDEX: 104; LEFT: 88px; WIDTH: 256px; POSITION: absolute; TOP: 120px; HEIGHT: 24px" ms_positioning="FlowLayout"> <DIV style="DISPLAY: inline; WIDTH: 48px; HEIGHT: 18px" ms_positioning="FlowLayout">級数：</DIV> <SELECT id="Select4" style="WIDTH: 184px" onchange="changeDisplay(this.value)"> <OPTION value="0" selected>無</OPTION> <OPTION value="1">ひとつ</OPTION> <OPTION value="2">ふたつ</OPTION> <OPTION value="3">みっつ</OPTION> </SELECT></DIV> </form> </body></HTML>
WebForm1.aspx.cs 客户端页面后台,什么都不干
WebForm1.aspx.csusing System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;namespace Ajax{
/**//// <summary>
/// WebForm1 の概要の説明です。
/// </summary> public class WebForm1 : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { // ページを初期化するユーザー コードをここに挿入します。 } Web フォーム デザイナで生成されたコード#region Web フォーム デザイナで生成されたコード override protected void OnInit(EventArgs e) { // // CODEGEN: この呼び出しは、ASP.NET Web フォーム デザイナで必要です。 // InitializeComponent(); base.OnInit(e); } /**//// <summary> /// デザイナ サポートに必要なメソッドです。このメソッドの内容を /// コード エディタで変更しないでください。 /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion }
}
ajaxData.aspx 被Ajax请求的页面,啥都没有
ajaxData.aspx<%@ Page language="c#" Codebehind="ajaxData.aspx.cs" AutoEventWireup="false" Inherits="Ajax.ajaxData" %>
ajaxData.aspx.cs 被Ajax请求的页面后台,负责读取数据库,输出XML流
ajaxData.aspx.csusing System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using Oracle.DataAccess.Client; using Oracle.DataAccess;namespace Ajax{ /**//// <summary> /// ajaxData の概要の説明です。 /// </summary> public class ajaxData : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { // ページを初期化するユーザー コードをここに挿入します。 string xml=null; string sql=null; string selectID=Request.Params.Get("selectID"); string optionValue=Request.Params.Get("optionValue"); OracleConnection con=new OracleConnection(); OracleCommand cmd; OracleDataReader reader; con.ConnectionString = "User Id=test_user;Password=test_pass;Data Source=TEST_DB_LOCAL"; con.Open(); if(selectID=="Select1") { sql="select DISTINCT STR1 from AJAXTEST"; } else if(selectID=="Select2") { sql="select DISTINCT STR2 from AJAXTEST where STR1='"+optionValue+"'"; } else if(selectID=="Select3") { sql="select DISTINCT STR3 from AJAXTEST where STR2='"+optionValue+"'"; } cmd =new OracleCommand(sql); cmd.Connection = con; cmd.CommandType = CommandType.Text; reader=cmd.ExecuteReader(); Response.ContentType="text/xml"; Response.CacheControl="no-cache"; xml="<?xml version=\"1.0\" encoding=\"utf-8\" ?>"; xml+="<selects>"; while(reader.Read()) { xml+="<select>"; xml+="<value>"; xml+=reader.GetValue(0).ToString(); xml+="</value>"; xml+="<text>"; xml+=reader.GetValue(0).ToString(); xml+="</text>"; xml+="</select>"; } xml+="</selects>"; Response.Write(xml); } Web フォーム デザイナで生成されたコード#region Web フォーム デザイナで生成されたコード override protected void OnInit(EventArgs e) { // // CODEGEN: この呼び出しは、ASP.NET Web フォーム デザイナで必要です。 // InitializeComponent(); base.OnInit(e); } /**//// <summary> /// デザイナ サポートに必要なメソッドです。このメソッドの内容を /// コード エディタで変更しないでください。 /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion }}
database.txt 创建数据库的文档
database.txt北海道 渡島国 亀田郡 茅部郡 上磯郡 胆振国 山越郡 虻田郡 有珠郡 北見国 網走郡 利尻郡 礼文郡本州 中部地方 岐阜県 静岡県 愛知県 中国地方 鳥取県 島根県 岡山県 東北地方 青森県 岩手県 宮城県四国 徳島県 阿南市 鳴門市 徳島市 香川県 丸亀市 坂出市 高松市 愛媛県 大洲市 西条市 今治市CREATE TABLE TEST_USER.AJAXTEST ( ID NUMBER NOT NULL, STR1 VARCHAR2(10), STR2 VARCHAR2(10), STR3 VARCHAR2(10), PRIMARY KEY(ID) USING INDEX TABLESPACE TEST_TABLESPACE LOGGING PCTFREE 10 INITRANS 2 MAXTRANS 255 STORAGE(INITIAL 128K NEXT 128K MINEXTENTS 1 MAXEXTENTS UNLIMITED PCTINCREASE 0 BUFFER_POOL DEFAULT ) ) TABLESPACE TEST_TABLESPACE LOGGING PCTFREE 10 INITRANS 1 MAXTRANS 255 STORAGE(INITIAL 128K NEXT 128K MINEXTENTS 1 MAXEXTENTS UNLIMITED PCTINCREASE 0 BUFFER_POOL DEFAULT ) MONITORING /INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(13,'北海道','北見国','網走郡');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(14,'北海道','北見国','利尻郡');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(15,'北海道','北見国','礼文郡');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(16,'本州','東北地方','青森県');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(17,'本州','東北地方','岩手県');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(18,'本州','東北地方','宮城県');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(19,'四国','徳島県','阿南市');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(20,'四国','徳島県','鳴門市');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(21,'四国','徳島県','徳島市');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(22,'四国','香川県','丸亀市');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(23,'四国','香川県','坂出市');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(24,'四国','香川県','高松市');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(25,'四国','愛媛県','大洲市');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(26,'四国','愛媛県','西条市');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(27,'四国','愛媛県','今治市');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(1,'北海道','渡島国','亀田郡');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(2,'北海道','渡島国','茅部郡');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(3,'北海道','渡島国','上磯郡');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(4,'北海道','胆振国','山越郡');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(5,'北海道','胆振国','虻田郡');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(6,'北海道','胆振国','有珠郡');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(7,'本州','中部地方','岐阜県');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(8,'本州','中部地方','静岡県');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(9,'本州','中部地方','愛知県');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(10,'本州','中国地方','鳥取県');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(11,'本州','中国地方','島根県');INSERT INTO AJAXTEST (ID, STR1, STR2, STR3) VALUES(12,'本州','中国地方','岡山県'); 