Ajax(1):get请求

来源：互联网发布：网络商品直销流程编辑：程序博客网时间：2024/05/18 11:25

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

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

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>

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>

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>

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");}}}