1、控制显示记录个数
1 <?xml version="1.0" encoding="gb2312"?>//后台代码test.asp xml格式文档
2 <%
3 'Response.AddHeader "Content-Type","text/html;charset=gb2312"//此行代码会让浏览器以为是HTML文档，因此必须删除
4 Response.ContentType = "text/xml"//XML文档格式声明
5
6 set conn = Server.CreateObject("adodb.connection")
7 data = Server.mappath("data.mdb")//获取数据库物理路径
8 conn.Open "driver={microsoft access driver (*.mdb)};"&"dbq="&data//利用数据库连接对象打开数据库
9 coun=CInt(Request("coun"))
10 %>
11 <%
12 set rs = Server.CreateObject("adodb.recordset")//定义记录集对象
13 sql ="select * from xmlhttp order by id desc"
14 rs.open sql,conn,1,1//第三个参数表示指针类型，第四个参数表示锁定类型
15 %>
16 <data count="<%=coun%>" >
17 <%
18 n=0
19 while (not rs.eof) and (n<coun)
20 %>
21 <item id="<%=rs("id")%>">
22 <who><%=trim(rs("who")) %></who>
23 <class><%=trim(rs("class")) %></class>
24 <what><%=trim(rs("what")) %></what>
25 </item>
26 <%
27 n = n + 1
28 rs.movenext
29 wend
30 %>
31 </data>
32 <!doctype html>
34 <html>
35 <head>
36 <meta charset="gb2312">
37 <title></title>
38 <script>
39 var request;
40 function createXMLHttpRequest()// 创建XMLHttpRequest对象函数
41 {
42 if( window.XMLHttpRequest )
43 {
44 request = new XMLHttpRequest();
45 }
46 else if ( window.ActiveXObject )
47 {
48 try
49 {
50 request = new ActiveXObject( "Msxml2.XMLHTTP" );
51 }
52 catch ( e )
53 {
54 try
55 {
56 request = new ActiveXObject( "Microsoft.XMLHTTP" );
57 }
58 catch ( e )
59 {
60 alert( "初始化XMLHttpRequest对象失败，请检查浏览器是否支持XMLHttpRequest组件。" );
61 }
62 }
63 }
64 }
65 createXMLHttpRequest();
66
67 function check(){//绑定回调函数
68 var coun = document.getElementById( "coun" ).value;
69 request.open( "GET", "test.asp?coun=" + coun, true );
70 request.onreadystatechange = updatePage;
71 request.send( null );
72 }
73
74 function updatePage()
75 {
76 var info = document.getElementById( "info" );
77 if( request.readyState == 1 )
78 {
79 info.innerHTML = "<img src='images/loading.gif' />，连接中......";
80 }
81 else if( request.readyState == 2 || request.readystate == 3 )
82 {
83 info.innerHTML = "<img src='images/loading.gif' />，读数据......";
84 }
85 else if( request.readyState == 4 )
86 {
87 if( request.status == 200 )
88 {
89 xml = request.responseXML;
90 info.innerHTML = showXml( xml );//输出XML格式信息
91 }
92 else
93 alert( request.status );
94 }
95
96 }
97
98 function showXml( xml )
99 {
100 var count = "";
101 var html = "";
102 var items = xml.getElementsByTagName( "item" );
103 html += "<table><tr><th>成员名</th><th>类型</th><th>说明</th></tr>"
104 //for( var i in items ){//IE不支持for……in循环结构
105 for( var i=0 ; i< items.length; i++ ){
106 html += "<tr>"
107 var child = items[i].childNodes
108 //for( var n in child ){
109 for( var n=0 ; n< child.length; n++ ){
110 if( child[n].nodeType == 1 ){
111 html += "<td>"
112 html += child[n].firstChild.data;
113 html += "</td>"
114 }
115 }
116 html += "</tr>";
117 }
118 html += "</table>"
119 return html;
120 }
121 </script>
122 <style type="text/css">
123 table {
124 margin:1em;
125 border-collapse:collapse;
126 border:solid 1px #FF33FF;
127 }
128 td, th {
129 border:solid 1px #FF33FF;
130 padding:4px 8px;
131 }
132 </style>
133 </head>
134 <body>
135 <h1>显示记录个数</h1>
136 显示记录数：
137 <input name="coun" type="text" id="coun">
138 （最多14条）
139 <input type="button" onClick="check();" value="查询">//为单击事件绑定函数
140 <div id="info"></div>
141 </body>
142 </html>
2、记录集分页显示
1 <?xml version="1.0" encoding="gb2312"?>
2 <%
3 Response.CacheControl="no-cache"
4 Response.AddHeader "pragma","no-cache"
5 'Response.AddHeader "Content-Type","text/html;charset=gb2312"
6 Response.Expires = -1
7 Response.ExpiresAbsolute = now - 1
8 Response.ContentType = "text/xml"
9
10 set conn = Server.CreateObject("adodb.connection")
11 data = Server.mappath("data.mdb")
12 conn.Open "driver={microsoft access driver (*.mdb)};"&"dbq="&data
13 coun=CInt(Request("coun"))
14 if coun<1 then coun = 1
15 if coun>14 then coun =14
16 %>
17 <%
18 set rs = Server.CreateObject("adodb.recordset")
19 sql ="select * from xmlhttp"
20 rs.CursorType=3
21 rs.CursorLocation = 3
22 rs.open sql,conn,2,1
23 rs.AbsolutePosition = coun
24 %>
25 <data count="<%=coun%>" >
26 <%
27 n=0
28 while (not rs.eof) and (n<2)//每一页都只读取前两个记录
29 %>
30 <item id="<%=rs("id")%>">
31 <who><%=trim(rs("who")) %></who>
32 <class><%=trim(rs("class")) %></class>
33 <what><%=trim(rs("what")) %></what>
34 </item>
35 <%
36 n = n + 1
37 rs.movenext
38 wend
39 %>
40 </data>
41 <!doctype html>
42 <html>
43 <head>
44 <meta charset="gb2312">
45 <title></title>
46 <script>
47 var request;
48 function createXMLHttpRequest()// 创建XMLHttpRequest对象函数
49 {
50 if( window.XMLHttpRequest )
51 {
52 request = new XMLHttpRequest();
53 }
54 else if ( window.ActiveXObject )
55 {
56 try
57 {
58 request = new ActiveXObject( "Msxml2.XMLHTTP" );
59 }
60 catch ( e )
61 {
62 try
63 {
64 request = new ActiveXObject( "Microsoft.XMLHTTP" );
65 }
66 catch ( e )
67 {
68 alert( "初始化XMLHttpRequest对象失败，请检查浏览器是否支持XMLHttpRequest组件。" );
69 }
70 }
71 }
72 }
73 createXMLHttpRequest();
74
75 function check(n){//绑定回调函数
76 var coun = 1;
77 var cur = parseInt(document.getElementById( "cur" ).innerHTML);
78 document.getElementById( "up" ).style.display = "none";
79
80 if(n==1) {
81 coun = (cur-1)*2-1;//页码转化为下一页首条记录
82 document.getElementById( "cur" ).innerHTML =cur-1; //更新标题页码
83 document.getElementById( "down" ).style.display = "inline";
84 if(cur<=2){
85 document.getElementById( "up" ).style.display = "none";
86 }
87 else {
88 document.getElementById( "up" ).style.display = "inline";
89 }
90 }
91 if(n==2){
92 coun = (cur+1)*2-1;
93 document.getElementById( "cur" ).innerHTML =cur+1;
94 document.getElementById( "up" ).style.display = "inline";
95 if(cur>=6) {
96 document.getElementById( "down" ).style.display = "none";
97 }
98 else {
99 document.getElementById( "down" ).style.display = "inline";
100 }
101 }
102
103 request.open( "GET", "test.asp?coun=" + coun, true );
104 request.onreadystatechange = updatePage;
105 request.send( null );
106 }
107
108 function updatePage()
109 {
110 var info = document.getElementById( "info" );
111 if( request.readyState == 1 )
112 {
113 info.innerHTML = "<img src='images/loading.gif' />，连接中......";
114 }
115 else if( request.readyState == 2 || request.readystate == 3 )
116 {
117 info.innerHTML = "<img src='images/loading.gif' />，读数据......";
118 }
119 else if( request.readyState == 4 )
120 {
121 if( request.status == 200 )
122 {
123 xml = request.responseXML;
124 info.innerHTML = showXml( xml );
125 }
126 else
127 alert( request.status );
128 }
129
130 }
131
132 function showXml( xml )
133 {
134 var count = "";
135 var html = "";
136 var items = xml.getElementsByTagName( "item" );
137 html += "<table><tr><th>成员名</th><th>类型</th><th>说明</th></tr>"
138 //for( var i in items ){
139 for( var i=0 ; i< items.length; i++ ){
140 html += "<tr>"
141 var child = items[i].childNodes
142 //for( var n in child ){
143 for( var n=0 ; n< child.length; n++ ){
144 if( child[n].nodeType == 1 ){
145 html += "<td>"
146 html += child[n].firstChild.data;
147 html += "</td>"
148 }
149 }
150 html += "</tr>";
151 }
152 html += "</table>"
153 return html;
154 }
155 </script>
156 <style type="text/css">
157 table{
158 margin:1em;
159 border-collapse:collapse;
160 border:solid 1px #FF33FF;
161 }
162 td,th {
163 border:solid 1px #FF33FF;
164 padding:4px 8px;
165 }
166 .btn {
167 cursor:pointer;
168 border:solid 1px;
169 border-color:#888 #ddd #eee #888;
170 padding:6px 12px;
171 zoom:1;
172 }
173 .red {
174 color:red;
175 font-size:1.5em;
176 padding:2px 6px;
177 }
178 </style>
179 </head>
180 <body onLoad="check();">
181 <h1>记录集分页显示</h1>
182 <h2>第<span class="red" id="cur">1</span>页记录列表</h2>
183 <p>（2条/页，共7页）</p>
184 <div id="info"></div>
185 <span class="btn" id="up" onClick="check(1)">上一页</span> <span class="btn" id="down" onClick="check(2)">下一页</span>
186 </body>
187 </html>
3、异步更新Tab面板
1 <?xml version="1.0" encoding="gb2312"?>
2 <%
3 Response.CacheControl="no-cache"
4 Response.AddHeader "pragma","no-cache"
5 'Response.AddHeader "Content-Type","text/html;charset=gb2312"
6 Response.Expires = -1
7 Response.ExpiresAbsolute = now - 1
8 Response.ContentType = "text/xml"
9
10 set conn = Server.CreateObject("adodb.connection")
11 data = Server.mappath("data.mdb")
12 conn.Open "driver={microsoft access driver (*.mdb)};"&"dbq="&data
13 coun=CInt(Request("coun"))
14 if coun = 1 then
15 str = "属性"
16 else
17 str = "方法"
18 end if
19 %>
20 <%
21 set rs = Server.CreateObject("adodb.recordset")
22 sql ="select * from xmlhttp where class = '"&str&"' order by id desc"
23 rs.open sql,conn,1,1
24 %>
25 <data count="<%=coun%>" >
26 <%
27 n=0
28 while (not rs.eof)
29 %>
30 <item>
31 <who><%=trim(rs("who")) %></who>
32 <class><%=trim(rs("class")) %></class>
33 <what><%=trim(rs("what")) %></what>
34 </item>
35 <%
36 n = n + 1
37 rs.movenext
38 wend
39 %>
40 </data>
41 <!doctype html>
42 <html>
43 <head>
44 <meta charset="gb2312">
45 <title></title>
46 <style type="text/css">
47 h1 { font-size:20px; }
48 /*** Tab面板样式
49 -------------------------------------------***/
50 /* Tab菜单包含框结构 */
51 .tab_wrap { width:auto; }
52 /* Tab菜单栏结构 */
53 ul.tab {
54 height:24px;
55 list-style:none;
56 margin:0;
57 padding:0;
58 }
59 ul.tab li {
60 float:left;
61 height:24px;
62 padding:0 1em;
63 cursor:pointer;
64 font:14px/24px "宋体" Arial, Helvetica, sans-serif;
65 }
66 /* Tab菜单栏样式类 */
67 .normal {
68 color:#1f3a87;
69 background:#fff;
70 border:1px solid #e6f2ff;
71 border-bottom:0;
72 }
73 .hover {
74 color:#1f3a87;
75 font-weight:bold;
76 background:#e6f2ff;
77 border:1px solid #e6f2ff;
78 border-bottom:0;
79 }
80 /* Tab内容显隐样式类 */
81 .show { display:block; }
82 .none { display:none; }
83 /* Tab内容包含框结构 */
84 .content {
85 height:auto;
86 padding:6px;
87 clear:both;
88 background:#e6f2ff;
89 text-align:left;
90 }
91 </style>
92 <script>
93 function hover(event){
94 var $ = function(o){
95 if(typeof(o) == "string")
96 return document.getElementById(o);
97 return o;
98 }
99 var tab = $("tab").getElementsByTagName("li");
100 var content = $("content").getElementsByTagName("div");
101 var check=function(tab, o) {//为每个TAB项都绑定鼠标滑入函数，兼容IE
102 if(document.addEventListener){
103 return tab.addEventListener("mouseover", o, true);
104 }
105 else if(document.attachEvent){
106 return tab.attachEvent("onmouseover", o);
107 }
108 }
109 ;
110 for(var i = 0; i < tab.length; i ++ )//核心代码
111 {
112 (function(j){
113 check(tab[j], function(){
114 for(var n = 0; n < tab.length; n ++ )
115 {
116 tab[n].className = "normal";
117 content[n].className = "none";
118 }
119 tab[j].className = "hover";
120 content[j].className = "show";
121 }
122 );
123 }
124 )(i);
125 }
126 }
127 window.onload = function()
128 {
129 hover();
130 check(1);//默认显示Tab1
131 }
132 //以上是Tab菜单的脚本
133 /////////////////////////////////////////////////////////////////////
134 //以下是Ajax自动分类查询脚本
135 //-----------------------------------
136 </script>
137 <script>
138 var request;
139 function createXMLHttpRequest()// 创建XMLHttpRequest对象函数
140 {
141 if( window.XMLHttpRequest )
142 {
143 request = new XMLHttpRequest();
144 }
145 else if ( window.ActiveXObject )
146 {
147 try
148 {
149 request = new ActiveXObject( "Msxml2.XMLHTTP" );
150 }
151 catch ( e )
152 {
153 try
154 {
155 request = new ActiveXObject( "Microsoft.XMLHTTP" );
156 }
157 catch ( e )
158 {
159 alert( "初始化XMLHttpRequest对象失败，请检查浏览器是否支持XMLHttpRequest组件。" );
160 }
161 }
162 }
163 }
164 createXMLHttpRequest();
165
166 function check(n){
167 request.open( "GET", "test.asp?coun=" + n, true );
168 request.onreadystatechange = function(){
169 updatePage(n);
170 };
171 request.send( null );
172 }
173
174 function updatePage(n)
175 {
176 if(n==1){
177 var info = document.getElementById( "content_1" );
178 }else{
179 var info = document.getElementById( "content_2" );
180 }
181 if( request.readyState == 1 )
182 {
183 info.innerHTML = "<img src='images/loading.gif' />，连接中......";
184 }
185 else if( request.readyState == 2 || request.readystate == 3 )
186 {
187 info.innerHTML = "<img src='images/loading.gif' />，读数据......";
188 }
189 else if( request.readyState == 4 )
190 {
191 if( request.status == 200 )
192 {
193 xml = request.responseXML;
194 info.innerHTML = showXml( xml );
195 }
196 else
197 alert( request.status );
198 }
199
200 }
201
202 function showXml( xml )
203 {
204 var count = "";
205 var html = "";
206 var items = xml.getElementsByTagName( "item" );
207 html += "<table><tr><th>成员名</th><th>类型</th><th>说明</th></tr>"
208 //for( var i in items ){
209 for( var i=0 ; i< items.length; i++ ){
210 html += "<tr>"
211 var child = items[i].childNodes
212 //for( var n in child ){
213 for( var n=0 ; n< child.length; n++ ){
214 if( child[n].nodeType == 1 ){
215 html += "<td>"
216 html += child[n].firstChild.data;
217 html += "</td>"
218 }
219 }
220 html += "</tr>";
221 }
222 html += "</table>"
223 return html;
224 }
225 </script>
226 <style type="text/css">
227 table{
228 margin:1em;
229 border-collapse:collapse;
230 border:solid 1px #FF33FF;
231 }
232 td,th {
233 border:solid 1px #FF33FF;
234 padding:4px 8px;
235 }
236 </style>
237 </head>
238 <body>
239 <h1>XMLHttpRequest对象成员参考</h1>
240 <div class="tab_wrap">
241 <ul class="tab" id="tab">
242 <li id="tab_1" onMouseOver="check(1)" class="hover">属性</li>//为tab面板绑定check()函数
243 <li id="tab_2" onMouseOver="check(2)" class="normal">方法</li>
244 </ul>
245 <div class="content" id="content">
246 <div id="content_1" class="show">暂无属性</div>
247 <div id="content_2" class="none">暂无方法</div>
248 </div>
249 </div>
250 </body>
251 </html>
4、快速匹配搜索
1 <%
2 dim a(20)
3 a(1)="CSS: Cascading Style Sheets，层叠格式表"
4 a(2)="CGI（Common Gateway Interface，通用网关接口）"
5 a(3)="DCD: Document Content Description for XML: XML文件内容描述"
6 a(4)="DTD: Document Type Definition，文件类型定义"
7 a(5)="HTML（HyperText Markup Language，超文本标记语言）"
8 a(6)="JVM: Java Virtual Machine, Java虚拟机"
9 a(7)="SGML: Standard Generalized Markup Language，标准通用标记语言 "
10 a(8)="XML: Extensible Markup Language（可扩展标记语言）"
11 a(9)="XSL: Extensible Style Sheet Language（可扩展设计语言）"
12 a(10)="DNS（Domain Name System，域名系统）"
13 a(11)="IMAP4: Internet Message Access Protocol Version 4，第四版因特网信息存取协议 "
14 a(12)="Internet（因特网）"
15 a(13)="IP（Internet Protocol，网际协议）"
16 a(14)="MODEM（Modulator Demodulator，调制解调器）"
17 a(15)="POP3: Post Office Protocol Version 3，第三版电子邮局协议"
18 a(16)="RDF: Resource Description Framework，资源描述框架"
19 a(17)="SNMP（Simple Network Management Protocol，简单网络管理协议）"
20 a(18)="SMTP（Simple Mail Transfer Protocol，简单邮件传输协议）"
21 a(19)="VPN: virtual private network，虚拟局域网"
22 a(20)="WWW（World Wide Web，万维网，是因特网的一部分"
23
24 Response.AddHeader "Content-Type","text/html;charset=gb2312"
25 q=request.querystring("q")
26 if len(q)>0 then
27 hint=""
28 for i=1 to ubound(a)
29 x1=ucase(mid(q,1,len(q)))
30 x2=ucase(mid(a(i),1,len(q)))
31 if x1=x2 then
32 if hint="" then
33 hint="<option value="""&a(i)&""">"&a(i)&"</option>"//首次匹配成功
34 else
35 hint=hint & "<option value="""&a(i)&""">"&a(i)&"</option>"//下次匹配成功则累加
36 end if
37 end if
38 next
39 end if
40
41 if hint="" then
42 response.write("<select><option>没有匹配对象</option></select>")
43 else
44 response.write("<select onblur='ok(this)' onchange='ok(this)'>"&hint&"</select>")//定义两个事件，失去焦点和改动选项都可以触发，因为当下拉选项仅有一个选项时，onchange事件类型触发不了
45 end if
46
47 %>
48 <!doctype html>
49 <html>
50 <head>
51 <meta charset="gb2312">
52 <title></title>
53 <script>
54 var request;
55 function createXMLHttpRequest()// 创建XMLHttpRequest对象函数
56 {
57 if( window.XMLHttpRequest )
58 {
59 request = new XMLHttpRequest();
60 }
61 else if ( window.ActiveXObject )
62 {
63 try
64 {
65 request = new ActiveXObject( "Msxml2.XMLHTTP" );
66 }
67 catch ( e )
68 {
69 try
70 {
71 request = new ActiveXObject( "Microsoft.XMLHTTP" );
72 }
73 catch ( e )
74 {
75 alert( "初始化XMLHttpRequest对象失败，请检查浏览器是否支持XMLHttpRequest组件。" );
76 }
77 }
78 }
79 }
80 createXMLHttpRequest();
81
82 function check(str){
83 if (str.length > 0)
84 {
85 var url = "test.asp?q=" + str
86 request.open("GET", url , true)
87 request.onreadystatechange = updatePage;
88 request.send(null)
89 }
90 }
91
92 function updatePage()
93 {
94 var info = document.getElementById("txtHint");
95 if( request.readyState == 4 )
96 {
97 if( request.status == 200 )
98 {
99 info.innerHTML = request.responseText;
100 }
101 else
102 alert( request.status );
103 }
104
105 }
106
107 function ok(o){//当用户选择或激活匹配下拉选项，则自动把文本复制到上面
108 var o1 = document.getElementById("ok1");
109 document.getElementById("txt1").value = o.value;
110 }
111 </script>
112 </head>
113 <body>
114 <h1>快速匹配搜索</h1>
115 <form>
116 <label for="txt1">关 键 词:</label>
117 <input name="txt1" type="text" id="txt1" onkeyup="check(this.value)" size="60"><input name="" type="submit" value="提交">
118 </form>
119 <p>快速匹配: <span id="txtHint">
120 <select>
121 <option>请输关键词</option>
122 </select>
123 </span></p>
124 </body>
125 </html>
