各种Ajax整理

技术2025-02-06 14

说在前面：下面的几个ajax实现都是我在练习中积累的，或许过于小儿科，但，这是自己学习过程的记录与见证。代码不都是自己写的，有些是直接从网上拷来的，但都是自己修改过测试可行的，现将他们整理如下，分享给朋友们~

一：异步检测用户名的唯一性

这是没有用到jQuery或者ajax控件的ajax实现，其中的check_nick.ashx是用来服务器端检测用户名的返回值只有1、2、3具体代表含义请看代码：

js代码如下：

var xmlhttp; function checkname() { try { xmlhttp=new ActiveXObject("Msxml2.MLHTTP"); } catch(E) { try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E) { xmlhttp=new XMLHttpRequest();//兼容非IE浏览器，直接创建XMLHTTP对象 } } var nickname=document.getElementById("nick").value; if (nickname == "") { document.getElementById("NameError").innerHTML = "<img src="/" mce_src="/""img/wrong.gif/"/><font color=/"red/">请输入您的用户名！</font>"; return; } var reg = new RegExp("^[a-zA-Z0-9_]{5,16}$"); if (reg.test(nickname)) chened(); else document.getElementById("NameError").innerHTML = "<img src="/" mce_src="/""img/wrong.gif/"/><font color=/"red/">用户名格式错误!</font>"; } function chened() { document.getElementById("NameError").innerHTML=""; document.getElementById("loadingflag").style.display = 'inline'; var m_nickname=document.getElementById("nick").value; var strurl="check_nick.ashx?nickname="+m_nickname; xmlhttp.open("GET",strurl,true); xmlhttp.onreadystatechange= handleStateChange; xmlhttp.send(null); document.getElementById("loadingflag").style.display='none'; } function handleStateChange() { if(xmlhttp.readyState==4) { if(xmlhttp.status==200) { var date=xmlhttp.responseText; if(date!="") { switch(date) { case "1": document.getElementById("NameError").innerHTML="<img src="/" mce_src="/""img/wrong.gif/"/><font color=/"red/">此用户名已被注册</font></br>"; document.getElementById("loadingflag").style.display='none'; break; case "2": document.getElementById("NameError").innerHTML = "<img src="/" mce_src="/""img/right.gif/"/><font color=/"blue/">此用户名还没有被注册!</font></br>"; document.getElementById("loadingflag").style.display='none'; break; case "3": document.getElementById("NameError").innerHTML = "<img src="/" mce_src="/""img/wrong.gif/"/><font color=/"red/">系统错误!</font></br>"; document.getElementById("loadingflag").style.display='none'; break; } } } } }

然后在用到的地方加上下面的代码，当然textbox也可以直接是input

<asp:TextBox ID="nick" runat="server" οnblur="checkname()" /> <%-- 监测是否已注册--%> <div style="background-color: #66FFCC; font-weight: bold; color: Red; display: none" mce_style="background-color: #66FFCC; font-weight: bold; color: Red; display: none" id="loadingflag"> 正在加载数据........</div> <span id="NameError" style="color: #00FF00;" mce_style="color: #00FF00;">允许5-16个字母，允许字母数字还有下划线</span>

二：异步搜索用户信息并展示

这个例子是用jQuery的$ajax()实现的，第一次试这个库，感觉非常棒，简单几句代码就能代替我几十行的代码。还用到了autocomplete这个jQuery插件，非常强大！废话少说上代码：其中get_usr_infor.ashx便是提取用户信息的一般处理程序，功能有提供autocomplete里的用户名选项（每行选项是：用户名+“ ”+真实姓名）以及提供搜索之后提取完整用户信息的功能（以xml实现）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>搜索用户信息</title> <mce:script type="text/javascript" src="js/jquery-1.5.js" mce_src="js/jquery-1.5.js"></mce:script> <mce:script type="text/javascript" src="js/jquery.autocomplete.min.js" mce_src="js/jquery.autocomplete.min.js"></mce:script> <link rel="Stylesheet" href="js/jquery.autocomplete.css" mce_href="js/jquery.autocomplete.css" /> <link href="CSS/user_search.css" mce_href="CSS/user_search.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript"></mce:script> </head> <body> <form id="form1"> <div> <input id="search" /> <button id="submit" type="button">提交</button> <div> <label> 基本信息</label> <table id="infor" style="width: 100%;"> <tr> <td class="col"> 用户ID </td> <td id="id" class="value"> 无 </td> </tr> <tr> <td class="col"> 昵称 </td> <td id="nick" class="value"> 无 </td> </tr> <tr> <td class="col"> 姓名 </td> <td id="name" class="value"> 无 </td> </tr> <tr> <td class="col"> 密码 </td> <td id="pwd" class="value"> 无 </td> </tr> <tr> <td class="col"> 性别 </td> <td id="sex" class="value"> 无 </td> </tr> <tr> <td class="col"> 手机 </td> <td id="cell" class="value"> 无 </td> </tr> <tr> <td class="col"> 加入时间 </td> <td id="jointime" class="value"> 无 </td> </tr> </table> </div> </div> </form> </body> </html>

三：仿新浪微博首页的新闻滚动功能

第一次看到新浪微博上那个新闻滚动功能就很好奇，究竟是怎么实现的，现在有了jQuery，实现起来是那么地方便：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <mce:script type="text/javascript" src="js/jquery-1.5.js" mce_src="js/jquery-1.5.js"></mce:script> <meta http-equiv="Content-Type" content="text/html;" /> <title>无标题文档</title> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">*{ margin:0; padding:0;} ul,li{ list-style-type:none;} body{ font-size:13px; background-color:#999999;} #con{ width:700px; height:400px; margin:10px auto; position:relative; border:1px #666 solid; background-color:#FFFFFF; overflow:hidden;} #con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;} #con ul li{ width:100%; border-bottom:1px #333333 dotted; padding:20px 0; overflow: } #con ul li a{ float:left; border:1px #333333 solid; padding:2px;} #con ul li p{ margin-left:68px;line-height:1.5; padding:10px;}</style> </head> <body> <div id="con"> <ul> <li><a href="#" mce_href="#"> <img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" mce_src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright"> aaa </p> </li> <li><a href="#" mce_href="#"> <img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" mce_src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright"> bbb </p> </li> <li><a href="#" mce_href="#"> <img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" mce_src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright"> ccc </p> </li> <li><a href="#" mce_href="#"> <img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" mce_src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright"> ddd </p> </li> </ul> </div> </body> </html>

说在后面：上面那些例子都用ajax技术实现，提高了用户体验，每个例子的实现都是令自己激动不已的，但是，激动和高兴过后，我也开始反思：实现的原理自己懂吗？这些代码不都是自己写的，自己究竟学到了多少？总之自己未来学习的路子还很长，不可得过且过。

最新回复(0)