使用Ajax实现异步交互的效果,使显示验证结果信息的时候没有页面刷新
改程序源代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var XMLHttprequest = flase;
function createXMLHttprequest() {
if(window.XMLHttprequest){
XMLHttprequest = new XMLHttpRequest();
}
else if(window.ActiveXObject){
try {
XMLHttprequest = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e) {
try {
XMLHttprequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
function sendRequest(url) {
createXMLHttprequest();
XMLHttprequest.open("GET",url,true);
XMLHttprequest.onreadystatechange =processResponse;
XMLHttprequest.send(null);
}
function processResponse() {
if(XMLHttprequest.readyState==4){
if(XMLHttprequest.status==200){
var res = XMLHttprequest.responseText;
window.alert(res);
}
}
}
function userCheck() {
var username = document.myform.username.value;
var password = document.myform.password.value;
if(username==""){
window.alert("用户名不能为空");
document.myform.username.focus();
return false;
}
else{
sendRequest('log?username='+username+'&password='+password);
}
}
</script>
</head>
<body>
<form action="" name="myform">
用户名:<input type="text" name="username"/><br>
密码:<input type="text" name="password"/><br>
<input type="button" value="登录" οnclick="userCheck()"/>
</form>
</body>
</html>
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_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>AjaxTest</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>msl</servlet-name>
<servlet-class>action.LoginAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>msl</servlet-name>
<url-pattern>/log</url-pattern>
</servlet-mapping>
</web-app>
LoginAction.java
package action;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import javax.jms.Session;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class LoginAction extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
response.setContentType("text/html; charset=utf-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
if(username.equals("admin")&&password.equals("admin")){
System.out.println("1");
out.println("热烈欢迎您");
}else{
out.println("对不起,登录失败!");
}
out.close();
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws IOException{
doGet(request, response);
}
}
核心内容就是将字符串写进response中,然后通过下面这部分javascript代码显示出来
if(XMLHttprequest.readyState==4){
if(XMLHttprequest.status==200){
var res = XMLHttprequest.responseText;
window.alert(res);
}