zoukankan      html  css  js  c++  java

  • Ajax

    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 { 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>
  • 相关阅读:
    PS转换图片——我教你
    通过Ajax——异步获取相关问题解答
    Spring的线程安全
    Spring MVC的工作机制
    Annotation的语法和使用
    Spring Bean的生命周期
    浅谈Spring
    Spring的事务管理
    行为型模式
    结构型模式
  • 原文地址：https://www.cnblogs.com/agasha/p/9997953.html
Copyright © 2011-2022 走看看