简单的Ajax实现

使用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="登录" onclick="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);
					}

简单的Ajax实现

猜你在找的Ajax相关文章