Ajax(1):get请求

上篇文章讨论了Ajax技术的理论，本篇文章讨论的是实际编程中如何利用XMLHttpRequest异步地向服务器发送get请求，并且不考虑中文问题，中文乱码问题在后续文章中讨论！这里以一个表单注册过程为例讲解Ajax的过程，为简单起见，用户名并没有到实际数据库里做查询验证，这里只简单地认为只要用户名为"tom"，即表示已经注册过，必须重新换一个用户名。用户名文本框的焦点一旦失去，Ajax就开始发送请求。

先看示例工程的文件目录结构：

@H_301_9@register.jsp :

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
function getXmlHttpRequest(){
var xhr=null;
if((typeof XMLHttpRequest)!='undefined'){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}

function valiUsername(){
var xhr=getXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var doc=xhr.responseText;
document.getElementById('username_msg').innerHTML=doc;
}else{
document.getElementById('username_msg').innerHTML='sorry,system error...';
}
}else{
document.getElementById('username_msg').innerHTML='checking...';
}
}
var url="valiusername.do?username="+document.getElementById('n1').value;
xhr.open("get",url,true);
xhr.send(null);
}
</script>
</head>
<body>
<form action="register.do" method="post">
username:<input type="text" name="username" id="n1" onblur="valiUsername();">
<span style="color:red" id="username_msg"></span><br>
password:<input type="password" name="password"><br>
<input type="submit" value="register">
</form>
</body>
</html>

@H_301_9@login.jsp :

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="login.do" method="post">
username:<input type="text" name="username"><br>
password:<input type="password" name="password"><br>
<input type="submit" value="login">
</form>
</body>
</html>

@H_301_9@web.xml :

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	
  <servlet>
    <servlet-name>UsernameServlet</servlet-name>
    <servlet-class>web.UsernameServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>UsernameServlet</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
 
</web-app>

@H_301_9@UsernameServlet.java :

public class UsernameServlet extends HttpServlet {
	
	public void service(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException {
		
		String uri=request.getRequestURI();
		String path=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
		PrintWriter pw=response.getWriter();
		if(path.equals("/valiusername")){
			String username=request.getParameter("username");
			if(username.equals("tom")){
				pw.println("username exists,change one...");
			}else{
				pw.println("OK");
			}
		}
		if(path.equals("/register")){
			String username=request.getParameter("username");
			String password=request.getParameter("password");
			response.sendRedirect("login.jsp");
		}
	}

}

原文链接：https://www.f2er.com/ajax/166231.html

猜你在找的Ajax相关文章