Ajax初识_通过ajax校验数据（纯文本）

最新推荐文章于 2025-01-29 19:37:25 发布

javaho

最新推荐文章于 2025-01-29 19:37:25 发布

阅读量305

点赞数

分类专栏： Java_WEB

本文链接：https://blog.youkuaiyun.com/linux_he/article/details/8262516

版权

Java_WEB 专栏收录该内容

5 篇文章

订阅专栏

Ajax

1、XMLHttpRequest对象的使用

2、Ajax异步通信机制

index.jsp页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/verifywon.js"></script>
</head>

<body>
	<!-- ajax可以不用使用表单进行提交 -->
		输入用户名：<input type="text" id="wd" οnblur="verify()"/> 
		<div id="result"></div>
		<br/> 
		<input type="button" value="校验"  οnclick="verify()"/>
</body>
</html>

Web.xml文档

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
 	 <!-- 注册servlet -->
	<servlet>
		<servlet-name>MyServlet</servlet-name>
		<servlet-class>MyServlet</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>MyServlet</servlet-name>
		<url-pattern>/MyServlet</url-pattern>
	</servlet-mapping>	
	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

Verifywon.js文件

var xmlHttp;
function verify() {
	// 1通过Document对象获取文本框中的数据
	var userName = document.getElementById("wd").value;
	// 2获取xmlHttpRequest对象
	
		// 2.1针对不同的浏览器通过不同的方式创建XMLHttpRequest对象
	if (window.XMLHttpRequest) {
		// 2.1.1适配FireFox,Mozillar,Opera,Safari,IE7,IE8
		xmlHttp = new XMLHttpRequest();
		// 2.1.2针对Mozillar浏览器的Bug进行修改
		if (xmlHttp.overrideMimeType) {
			xmlHttp.overrideMimeType("text/xml");
		}

	} else if (window.ActiveXObject) {
		// 2.1.3针对IE6、IE5.5、IE5等浏览器创建XMLHttpRequest对象的控件

		var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
		for ( var i = 0; i < activexName.length; i++) {
			try {
				xmlHttp = new ActiveXObject(activexName[i]);
				break;
			} catch (e) {

			}
		}
	}
		//2.2对XMLHttpRequest对象进行校验
	if (!xmlHttp) {
		alert("XMLHttpRequest创建失败");
	} else {
		
	}
	// 3设置回调函数
	xmlHttp.onreadystatechange = callback;
	// 4设置连接信息
		// 4.1设置数据提交的方式（post/get）
		// 4.2设置连接URL
		// 4.3设置采用同步还是异步形式，true为异步。
	xmlHttp.open("get", "MyServlet?wd="+userName, true);
	
	//O_Opost 方式
	/*	
	xmlHttp.open("post", "MyServlet", true);
	//O_O设置http头部信息
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttp.send("wd="+userName);
	*/
	
	// 5.发送数据
		//5.1同步时，该语句执行完毕后（服务器端数据返回时）才开始往下面执行
		//5.2异步时，执行该方法后立即往下执行
	xmlHttp.send(null);
	
}
//回调函数
function callback(){
	//判断xmlHttp对象是否交互完成
	if(xmlHttp.readyState==4){
		//判断http请求是否成功
		if(xmlHttp.status==200){
			//获取服务器端返回数据两种（纯文本形式）
			var responseText = xmlHttp.responseText;//纯文本方式
			//设置前段页面显示
			document.getElementById("result").innerHTML=responseText;
		}
	}
}

readyState 属性

0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

XMLHttpRequest 或 XMLHttp

Microsoft™ 和 Internet Explorer 使用了一个名为 XMLHttp 的对象，而不是XMLHttpRequest 对象，而 Mozilla、Opera、Safari 和大部分非 Microsoft 浏览器都使用的是后者。

Servlet页面

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 MyServlet extends HttpServlet {

	public MyServlet() {
		super();
	}

	public void destroy() {
		super.destroy(); 
	}
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	 	
			doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		//取参数
		String old = request.getParameter("wd");
		//对参数值得检查
		if(old == null || old.length() == 0){
			out.println("用户名不能为空");
		}else{
			//参数校验
			String name = old;
			if(name.equals("wang")){
				//返回数据
				out.println("用户名："+ name + "已经存在！ ");
			}else{
				//返回数据
				out.println("用户名："+ name + "可以使用！ ");
			}
		}
	}
	public void init() throws ServletException {
	}

}

—— 2012年12月05日