XMLHttpRequest Ajax 实例检查用户名是否存在
一、XMLHttpRequest 对象的方法与属性
方 法
描 述
abort()
停止当前请求
getAllResponseHeaders()
把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")
返回指定首部的串值
open("method", "url")
建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
send(content)
向服务器发送请求
setRequestHeader("header", "value")
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
?
?
属 性
描 述
onreadystatechange
每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数
readyState
请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成
responseText
服务器的响应,表示为一个串
responseXML
服务器的响应,表示为XML。这个对象可以解析为一个DOM对象
status
服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等)
statusText
HTTP状态码的相应文本(OK或Not Found(未找到)等等)
js/xmlHttpRequest.js
function createXmlHttpRequest() {var xmlHttp;try {// Firefox, Opera 8.0+, SafarixmlHttp = new XMLHttpRequest();} catch (e) {// Internet Explorertry {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("您的浏览器不支持AJAX!");return false;}}}return xmlHttp;}
?
jsp文件:
<head><script type="text/javascript" src="js/xmlHttpRequest.js"></script> </head> <body> <script type="text/javascript">function userNameCheck() { var username = document.all.username.value; //获得text的值 var request = createXmlHttpRequest();//创建request 对象 request.open("post","UserAction?username="+username);//建立到服务器的新请求 request.send();//向服务器发送请求 request.onreadystatechange=function()//指定当readyState属性改变时的事件处理句柄 { if (request.readyState==4)//提取当前HTTP的就绪状态,状态4表示:响应已完成,可以访问服务器响应并使用它 if (request.status==200)//HTTP状态,我们期望的状态码是 200,它表示一切顺利。 //如果就绪状态是 4 而且状态码是 200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据 { var value = request.responseText;//服务器返回响应文本 if (value=="true") { document.all.unc.innerHTML="该用户名已存在"; } else { document.all.unc.innerHTML="OK"; } } } } </script>用户姓名: <input type="text" name="username" onblur="userNameCheck()"/><font color="red" size="-1" id="unc"></font> </body></html>
public class UserAction extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username=request.getParameter("username"); if(username.equals("chenlh")) response.getWriter().print("true"); else response.getWriter().print("false"); }}
?