ajax实现异步请求范例
ajax.js
//依据id查找结点,然后返回value function $(id){ return document.getElementById(id); } //返回节点的value function $F(id){ return $(id).value; }
//获得ajax对象 function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //不是ie浏览器 xhr=new XMLHttpRequest; }else{ xhr=new ActiveXObject("Microsoft.XMLHttp") } return xhr; }
regist.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript"> function checkusername(){ //首先获得ajax对象 var xhr = getXhr(); //发送请求 xhr.open('get','checkusername.do?username='+$F('username'),true); xhr.onreadystatechange = function(){ //处理服务器返回的数据 if(xhr.readyState == 4 && xhr.status == 200){ //获取服务器返回的数据 var txt = xhr.responseText; $("result_msg").innerHTML = txt; } }; xhr.send(null); } </script> </head> <body style="font-size:30px;"> <form action="" method="post"> 用户名：<input id="username" name="username" οnblur="checkusername();" /> <span id="result_msg"></span><br/> 密码：<input type="password" name="password"/><br/> <input type="submit" value="注册" /> </form> </body> </html>
public class ActionServlet extends HttpServlet {
package web;
import java.io.IOException; import java.io.PrintWriter;
import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;
import com.sun.corba.se.spi.activation.Repository;
public class ActionServlet extends HttpServlet {
@Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); System.out.println("service()"); //获得请求资源路径 String uri = request.getRequestURI(); System.out.println("uri:"+uri); String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf(".")); System.out.println("action:"+action); if ("/checkusername".equals(action)) { String username = request.getParameter("username"); System.out.println("username:"+username); if ("king".equals(username)) { pw.println("用户名已被使用"); }else { pw.println("可以使用"); } } } }
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>checkusername</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>checkusername</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> </web-app>
