第一个ajax小demo

谁践踏了优雅 2022-08-07 07:47 194阅读 0赞

之前转过两篇[ajax][]的文章，今天终于自己动手写了一个ajax的小demo，体验一下ajax的神奇之处，记录下来，纯属个人学习代码，分享给初学的朋友们。

# 前台部分 #

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    	"http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>AjaxDemo</title>
    </head>
    <body>
    	<center>
    		<table>
    			<caption>Ajax Demo</caption>
    			<tr><td colspan="3"> </td></tr>
    			<tr>
    				<td>username</td>
    				<td><input name="username" οnchange="checkUsername()"></td>
    				<td id="usernameTips"> </td>
    			</tr>
    		</table>
    	</center>
    	<script type="text/javascript">
    		// 校验username是否被占用
    		function checkUsername(){
    			// 定义ajax变量xmlhttp
    			var xmlhttp;
    			
    			// 创建xmlhttp
    			if (window.XMLHttpRequest){
    				xmlhttp = new XMLHttpRequest;
    			} else {
    				xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
    			}
    			
    			// 获取username的输入值
    			var username = document.getElementsByName("username")[0].value;
    			
    			// 拼接请求URL
    			var url = "checkUsername?username=" + username;
    			xmlhttp.open("get", url);
    			xmlhttp.send();
    			
    			// 设置回调函数
    			xmlhttp.onreadystatechange = function() {
    				
    				// 判断请求状态
    				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    					
    					// 获取返回的responseText 值
    					if (xmlhttp.responseText === "using"){
    						
    						// 设置username的提示语
    						document.getElementById("usernameTips").innerHTML = 
    							username + " is using, please change other.";
    					} else {
    						document.getElementById("usernameTips").innerHTML = 
    							"Congratulations.";
    					}
    				}
    			}
    		}
    	</script>
    </body>
    </html>

页面上方一个table，主要是为了保持username和输入框即提示框的展示。

主要的输入域为username所在的input输入域，绑定的事件为onchange事件，调用方法为checkUsername。

## 创建XMLHttpRequest对象    ##

创建xmlhttp对象的时候，采取兼容低版本IE浏览器和高版本IE浏览器，火狐，chrome等浏览器的方式

// 创建xmlhttp
    if (window.XMLHttpRequest){
    	xmlhttp = new XMLHttpRequest;
    } else {
    	xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
    }

获取username输入值的方法在[以前的博文][Link 1]中讲过， document.getElementsByName("username")\[0\].value 因为这里没有定义id属性，所以采用getElementsByName的方式，拿到集合后再取第0个元素的value值。

## get请求    ##

var url = "checkUsername?username=" + username;

拼接URL时，在请求的path中，添加上username的变量值。

其中

// 拼接请求URL
    var url = "checkUsername?username=" + username;
    xmlhttp.open("get", url);
    xmlhttp.send();

为get请求方式，也可换为post请求方式。

## post请求 ##

代码修改为

xmlhttp.open("post", "checkUsername", true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("username=" + username);

## 回调函数 ##

// 设置回调函数
    xmlhttp.onreadystatechange = function() {
    				
        // 判断请求状态
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    					
    	    // 获取返回的responseText 值
    	    if (xmlhttp.responseText === "using"){
    						
    		    // 设置username的提示语
    		    document.getElementById("usernameTips").innerHTML = 
    			    username + " is using, please change other.";
    	    } else {
    		    document.getElementById("usernameTips").innerHTML = 
    			    "Congratulations.";
    	    }
        }
    }

回调部分，一定要先判断readyState 值和 status值，否则会得到意想不到的结果。

刚开始的代码，没有判断readyState 和 status，在 xmlhttp.onreadystatechange = function() \{ 紧接着读取xmlhttp.responseText值，一下子返回三个值。加上readyState 和 status 的判断后，就正常了。

# 后台部分 #

package com.ajax;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class CheckUsername
     */
    @WebServlet("/checkUsername")
    public class CheckUsername extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public CheckUsername() {
            super();
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		String username = request.getParameter("username");
    		
    		PrintWriter out = response.getWriter();
    		
    		if ("admin".equals(username)){
    			out.write("using");
    		} else {
    			out.write("notUsing");
    		}
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    }

后台部分相对简单很多，通过request.getParameter("username"); 来获取到username的值

加以判断，向前台写回username是否在using的结果值，供前台提示用。

[ajax]: http://blog.csdn.net/magi1201/article/details/17200815
[Link 1]: http://blog.csdn.net/magi1201/article/details/43974171