第一个ajax小demo

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

前台部分

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>







	
		

			
Ajax Demo
			
 
			

				
username
				

				
 
			
		
	
	

    页面上方一个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输入值的方法在以前的博文中讲过， 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的结果值，供前台提示用。