30分钟学会使用Ajax:

 下面例子是介绍使用Ajax的post 方法,ajax的post方法使用比较多。

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

<一>:建个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,在jsp中引入ajaxUtils.js工具类,jsp代码中如下

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






学习ajax的Post方法


	
username:


password:


<3>:配置WEB-INF下面的web.xml

 
  	ajaxPostServlet
  	com.web.AjaxPostServlet
  
  
  	ajaxPostServlet
  	/servlet/AjaxPostServlet
  


<4>:建Servlet,如AjaxPostServlet,代码如下

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 AjaxPostServlet 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();
	}
}


 

你可能感兴趣的:(Java,JavaScript,Ajax,ajax,callback,servlet,xmlhttprequest,function,jsp)