1.用戶端網頁代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>檢測使用者名稱是否唯一</title> <script language="javascript"> function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // 非IE瀏覽器 http_request = new XMLHttpRequest(); //建立XMLHttpRequest對象 } else if (window.ActiveXObject) { // IE瀏覽器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); //建立XMLHttpRequest對象 } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest對象 } catch (e) { } } } if (!http_request) { alert("不能建立XMLHttpRequest對象執行個體！"); return false; } http_request.onreadystatechange = getResult; //調用返回結果處理函數 http_request.open('GET', url, true); //建立與伺服器的串連 http_request.send(null); //向伺服器發送請求 } function getResult() { if (http_request.readyState == 4) { // 判斷請求狀態 if (http_request.status == 200) { // 請求成功，開始處理返回結果 document.getElementById("toolTip").innerHTML = http_request.responseText; //設定提示內容 document.getElementById("toolTip").style.display = "block"; //顯示提示框 } else { // 請求頁面有錯誤 alert("您所請求的頁面有錯誤！"); } } } function checkUser(userName) { if (userName.value == "") { alert("請輸入使用者名稱！"); userName.focus(); return; } else { //createRequest('http://10.65.9.181:8090/ajax/checkUser.jsp?user='+userName.value); createRequest('http://10.65.9.181:8090/ajax/checkUser.action?user='+ userName.value); } } </script> <style type="text/css"> <!-- #toolTip { position: absolute; left: 331px; top: 39px; width: 98px; height: 48px; padding-top: 45px; padding-left: 25px; padding-right: 25px; z-index: 1; display: none; color: red; background-image: url(images/tooltip.jpg); } --> </style> </head> <body style="margin: 0px;"> <form method="post" action="" name="form1"> <table width="509" height="352" border="0" align="center"cellpadding="0" cellspacing="0" background="images/bg.gif"> <tr> <td height="54"> </td> </tr> <tr> <td height="253" valign="top"> <div style="position: absolute;"> <table width="100%" height="250" border="0" cellpadding="0"cellspacing="0"> <tr> <td width="18%" height="54" align="right" style="color: #8e6723"><b>使用者名稱：</b></td> <td width="49%"><input name="username" type="text"id="username" size="32"></td> <td width="33%"><img src="images/checkBt.jpg" width="104"height="23" style="cursor: hand;"onClick="checkUser(form1.username);"></td> </tr> <tr> <td height="51" align="right" style="color: #8e6723"><b>密碼：</b></td> <td><input name="pwd1" type="password" id="pwd1" size="35"></td> <td rowspan="2"> <div id="toolTip"></div> </td> </tr> <tr> <td height="56" align="right" style="color: #8e6723"><b>確認密碼：</b></td> <td><input name="pwd2" type="password" id="pwd2" size="35"></td> </tr> <tr> <td height="55" align="right" style="color: #8e6723"><b>E-mail：</b></td> <td colspan="2"><input name="email" type="text" id="email"size="45"></td> </tr> <tr> <td> </td> <td colspan="2"><input type="image" name="imageField"src="images/registerBt.jpg"></td> </tr> </table> </div> </td> </tr> <tr> <td> </td> </tr> </table> </form> </body> </html>
更多精彩內容：http://www.bianceng.cnhttp://www.bianceng.cn/webkf/ajax/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
