Second-level interactive Select implemented by XMLHTTP

This is another application of XMLHTTP following "retrieving data without refreshing XMLHTTP.
XMLHTTP. can be said to be a good combination of clients and servers.
Using XMLHTTP. We can implement many good ideas.
In this article, two-level dynamic Select is implemented.
The traditional secondary linkage transfers all data to clients ..
With XMLHTTP, we can return the data we need in real time.
Select.htm
Copy codeThe Code is as follows:
<Script language = "Javascript">
Function GetResult (str)
{
/*
* --------------- GetResult (str )-----------------
* GetResult (str)
* Function: send a request through XMLHTTP and return the result.
* Parameter: str, String, sending condition.
* Instance: GetResult (document. all. userid. value );
* Author: wanghr100 (Baby gray bean. net)
* Update:
* --------------- GetResult (str )-----------------
*/
Var oBao = new ActiveXObject ("Microsoft. XMLHTTP ");
OBao. open ("POST", "Server. asp? Sel = "+ str, false );
OBao. send ();
// The server processes the returned escape encoded string.
// Return data through XMLHTTP and start to build Select.
BuildSel (unescape (oBao. responseText), document. all. sel2)
}
Function BuildSel (str, sel)
{
/*
* --------------- BuildSel (str, sel )-----------------
* BuildSel (str, sel)
* Function: Build Select using str.
* Parameter: str, String, returned by the server. It has a specific structure "string 1, string 2, string 3"
* Parameter: sel, Select to be constructed
* Instance: BuildSel (unescape (oBao. responseText), document. all. sel2)
* Author: wanghr100 (Baby gray bean. net)
* Update:
* --------------- BuildSel (str, sel )-----------------
*/
// Clear the original data first.
Sel. options. length = 0;
Var arrstr = new Array ();
Arrstr = str. split (",");
// Start to build a new Select.
For (var I = 0; I <arrstr. length; I ++)
{
Sel. options [sel. options. length] = new Option (arrstr, arrstr)
}
}
</Script>
<Select name = "sel" onChange = "GetResult (this. value)">
<Option value = ""> select
<Option value = "Fujian Province"> Fujian Province
<Option value = "Hubei Province"> Hubei Province
<Option value = "Liaoning Province"> Liaoning Province
<Select>
<Select name = "sel2"> </select>

Server. asp server processing.
Copy codeThe Code is as follows:
<% @ Language = "Javascript" %>
<%
Function OpenDB (sdbname)
{
/*
* --------------- OpenDB (sdbname )-----------------
* OpenDB (sdbname)
* Function: Open the database sdbname and return the conn object.
* Parameter: sdbname, String, database name.
* Instance: var conn = OpenDB ("database. mdb ");
* Author: wanghr100 (Baby gray bean. net)
* Update:
* --------------- OpenDB (sdbname )-----------------
*/
Var connstr = "Provider = Microsoft. Jet. OLEDB.4.0; Data Source =" + Server. MapPath (sdbname );
Var conn = Server. CreateObject ("ADODB. Connection ");
Conn. Open (connstr );
Return conn;
}
Var oConn = OpenDB ("data. mdb ");
Var province = Request ("sel ");
Var arrResult = new Array ();
Var SQL = "select city from china where province = '" + province + "'";
Var rs = Server. CreateObject ("ADODB. Recordset ");
Rs. Open (SQL, oConn, 1, 1 );
While (! Rs. EOF)
{
// Traverse all suitable data and put it into the arrResult array.
ArrResult [arrResult. length] = rs ("city"). Value;
Rs. MoveNext ();
}
// Escape solves XMLHTTP. Chinese processing problems.
// Arrays are combined into strings. Connected by "," strings.
Response. Write (escape (arrResult. join (",")));
%>

Database Design
Data. mdb
Table china.
Field
Id automatic number
Province text
City text
Table: china data:
Id province city
1 Fujian Province Fuzhou City
2 Xiamen City, Fujian Province
3. Quanzhou City, Fujian Province
4 Hubei Wuhan
5 Jingzhou City, Hubei Province
6 Yichang City, Hubei Province
7. Shenyang city, Liaoning Province
8. Dalian city, Liaoning Province
9 Panjin City, Liaoning Province