30分钟学会使用Ajax：

 下面的例子是使用Ajax的get方法进行异步请求。

这个例子的作用是：输入一个用户名，检查下用户名是否可以用。

一：首先写个ajax的工具类，这个工具类的写法

(1)建个ajaxUtils.js

(2)里面代码如下

var Ajax = {
	createXHR : function() {// 创建XHR对象
		if (window.XMLHttpRequest) {// 针对除IE浏览器以外的
			var xhr = new XMLHttpRequest();
			return xhr;
		} else if (window.ActiveXObject) {// 针对IE浏览器的
			var xhr = new ActiveXObject("Microsoft.XMLHTTP");
			return xhr;
		}
	},
	sendRequest : function(method, url, data, callback) {// callback代表函数名
		var xhr = this.createXHR();
		xhr.open(method, url, true);
		if ("GET" == method.toUpperCase()) {
			xhr.send(null);
		} else if ("POST" == method.toUpperCase()) {
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send(data);
		}
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				// callback(xhr);可以这样
				callback({
					text : xhr.responseText,
					xml : xhr.responseXML
				});// 也可以这样。这样最好，面向对象
			}
		}
	}
};

 

二：写jsp，建个check.jsp，在jsp中把ajax工具类引入进行，jsp代码如下

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









	
		

			username：
			

			


			password：
			


		
	

三：在WEB-INF\web.xml中配置servlet

  	ajaxGetServlet
  	com.web.AjaxGetServlet
  
  
  	ajaxGetServlet
  	/servlet/AjaxGetServlet
  

四：在包名com.web下建个Servlet，如：AjaxGetServlet，Servlet里的代码

package com.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;

public class AjaxGetServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();
		
		String username = request.getParameter("username");
		String password =request.getParameter("password");
		
		if("zhangsan".equals(username)){
			//此处是out.print不是out.println
			out.print("不可用");//out.print()里的内容将会输出到jsp页面中callback函数里
		}else{
			out.print("可以使用");
		}
		out.flush();
		out.close();
	}
}

下一节将讲述Ajax的post方法，事实上post方法使用的最多