现在的位置: 首页 > 综合 > 正文

30分钟学会使用Ajax:<二>

2013年08月01日 ⁄ 综合 ⁄ 共 3200字 ⁄ 字号 评论关闭

 下面例子是介绍使用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"%>
<!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">
<script type="text/javascript" src="${pageContext.request.contextPath }/jsp/ajax/ajaxUtils.js"">
</script>
<script type="text/javascript">
	function checkUserName(){
		var username = document.getElementById("name").value;
		var password = document.getElementById("pwd").value;
		
		var url = "${pageContext.request.contextPath }/servlet/AjaxPostServlet";
		// 使用Ajax工具类,4个入参
		// 第一个入参:字符串"get"
		// 第二个入参:请求的url
		// 第三个入参:请求的参数
		// 第四个入参:回调函数,函数名随便起,这里我起了callback
		Ajax.sendRequest("post",url,"username="+username+"&password"+password, callback);
	}
	
	// 经过Servlet处理后返回的信息
	function callback(data){
		// 后台返回的是字符串,就用data.text,如果返回的是xml对象,则就用data.xml
		var value = data.text;
		
		//这个value要么是Servlet里out.print()里的内容
		alert(value);
	}
	
</script>
<title>学习ajax的Post方法</title>
</head>
<body>
	<center>
		<form action="" method="post">
			username:<input type="text" size="25" value="" id="name" name="username"/><input type="button" value="检查是否被占用" onclick="checkUserName();"/>
			<br />
			<br /><br />
			password:<input type="password" size="25" value="" id="pwd" name="password" />
			<br /><br />
		</form>
	</center>
</body>
</html>

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

 <servlet>
  	<servlet-name>ajaxPostServlet</servlet-name>
  	<servlet-class>com.web.AjaxPostServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>ajaxPostServlet</servlet-name>
  	<url-pattern>/servlet/AjaxPostServlet</url-pattern>
  </servlet-mapping>

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

 

抱歉!评论已关闭.