AJAX学习总结（二）--XMLHttprequest实例

步骤1.新建项目ajaxtrain

 

下面有基于XMLHttprequest的文本返回方式和XML返回方式：

（一）文本返回形式

步骤2.新建servlet

 

package 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 AJAXServer extends HttpServlet {
	private static final long serialVersionUID = -7936252450796205712L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String old = request.getParameter("name");
		if(old == null || old.length() == 0){
			out.println("用户名不能为空！");
		}else{
			String name = old;
			if(name.equals("lichao")){
				out.println("用户名为：【"+name+"】的用户名已存在，请选用其他的用户名！");
			}else{
				out.println("用户名为：【"+name+"】的用户名尚未存在，可以使用该用户名！");	
			}
		}
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
			doGet(request, response);
	}

}

 

 

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">
	
  <servlet>
    <servlet-name>AJAXServer</servlet-name>
    <servlet-class>servlet.AJAXServer</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>AJAXXMLServer</servlet-name>
    <servlet-class>servlet.AJAXXMLServer</servlet-class>
  </servlet>


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

 

 

步骤3.WebRoot下新建jslib文件夹，其下新建js文件verifyown.js

 

//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
	//0.使用dom的方式获取文本框中的值
	//document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如<input>,
	//value可以获取一个元素节点的value属性值
	var userName = document.getElementById("userName").value;
	
	//1.创建XMLHttprequest对象
	//这是XMLHttprequest对象五步使用中最复杂的一步
	//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
	if(window.XMLHttpRequest){
		//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
		xmlhttp = new XMLHttpRequest();
		//针对某些特定版本的mozillar浏览器的BUG进行修正
		if(xmlhttp.overrideMimeType){
			xmlhttp.overrideMimeType("text/xml");
		}
	}else if(window.ActiveXObject){
		//针对IE6,IE5,IE5.5
		//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中，排在前面的版本较新
		var activxName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
		for(var i = 0 ; i < activexName.length; i++){
			try{
				//取出一个控件名进行创建，如果创建成功就终止循环
				//如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建
				xmlhttp = new ActiveXObject(activexName[i]);
				break;
			}catch(e){}
		}
	}
	//确认XMLHttprequest对象创建成功
	if(!xmlhttp){
		alert("XMLHttprequest对象创建失败！！");
		return;
	}else{
		alert(xmlhttp);
	}
	
	//2.注册回调函数
	//注册回调函数时，只需要函数名，不要加括号
	//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
	xmlhttp.onreadystatechange = callback;
	
	//3.设置连接信息
	//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
	//第二个参数表示请求的url地址，get方式请求的参数也在url中
	//第三个参数表示采用异步还是同步方式交互，true表示异步
	/**
	*GET方式请求
	*/
	//xmlhttp.open("GET","AJAXServer?name="+ userName,true);
	
	/**
	*POST方式请求的代码
	*/
	xmlhttp.open("POST","AJAXServer",true);
	//POST方式需要自己设置http的请求
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//POST方式发送数据
	xmlhttp.send("name=" + userName);
	
	//4.发送数据，开始和服务器端进行交互
	//同步方式下，send这句话会在服务器端数据回来后才执行完
	//异步方式，send这句话会立即完成执行
	//xmlhttp.send(null);
}

//回调函数
function callback(){
	//5.接收响应数据
	//判断对象的状态是交互完成
	if(xmlhttp.readyState == 4){
		//判断http的交互是否成功
		if(xmlhttp.status == 200){
			//获取服务器端返回的数据
			//获取服务器端输出的纯文本数据
			var responseText = xmlhttp.responseText;
			//将数据显示在页面上
			//通过dom的方式找到div标签所对应的元素节点
			var divNode = document.getElementById("result");
			//设置元素节点的html内容
			divNode.innerHTML = responseText;
		}
	}
}

 

步骤4.新建jsp---ajax1.jsp

 

<%@ page language="java"  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>
    <base href="<%=basePath%>">
    
    <title>ajax测试注册页面</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="jslib/verifyown.js"></script>
  </head>
  <body>
   请输入你要注册的用户名：
   <input type="text" id="userName"/>
   <input type="button" value="注册" onclick="verify()"/>
   <div id="result"></div>
  </body>
</html>

 

 

 然后访问http://localhost:8080/ajaxtrain/ajax1.jsp测试即可

 

 

（二）XML返回形式

 

步骤5.新建servlet---AJAXXMLServer

 

package 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 AJAXXMLServer extends HttpServlet {
	private static final long serialVersionUID = 280925768036330892L;
	public void doGet(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		//修改点1
		response.setContentType("text/xml;charset=utf-8");
		PrintWriter out = response.getWriter();
		String old = request.getParameter("name");
		//修改点2-------xml文本形式
		StringBuilder builder = new StringBuilder();
		builder.append("<message>");
		if(old == null || old.length() == 0){
			builder.append("用户名不能为空！").append("</message>");
		}else{
			String name = old;
			if(name.equals("lichao")){
				builder.append("用户名为：【"+name+"】的用户名已存在，请选用其他的用户名！").append("</message>");
			}else{
				builder.append("用户名为：【"+name+"】的用户名已存在，请选用其他的用户名！").append("</message>");	
			}
			
		}
		out.println(builder.toString());
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
		doGet(request, response);
	}

}

 

 

 

 

步骤6.WebRoot下新建jslib文件夹，其下新建js文件verifyxml.js

 

//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
	//0.使用dom的方式获取文本框中的值
	//document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如<input>,
	//value可以获取一个元素节点的value属性值
	var userName = document.getElementById("userName").value;
	
	//1.创建XMLHttprequest对象
	//这是XMLHttprequest对象五步使用中最复杂的一步
	//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
	if(window.XMLHttpRequest){
		//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
		xmlhttp = new XMLHttpRequest();
		//针对某些特定版本的mozillar浏览器的BUG进行修正
		if(xmlhttp.overrideMimeType){
			xmlhttp.overrideMimeType("text/xml");
		}
	}else if(window.ActiveXObject){
		//针对IE6,IE5,IE5.5
		//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中，排在前面的版本较新
		var activxName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
		for(var i = 0 ; i < activexName.length; i++){
			try{
				//取出一个控件名进行创建，如果创建成功就终止循环
				//如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建
				xmlhttp = new ActiveXObject(activexName[i]);
				break;
			}catch(e){}
		}
	}
	//确认XMLHttprequest对象创建成功
	if(!xmlhttp){
		alert("XMLHttprequest对象创建失败！！");
		return;
	}else{
		alert(xmlhttp);
	}
	
	//2.注册回调函数
	//注册回调函数时，只需要函数名，不要加括号
	//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
	xmlhttp.onreadystatechange = callback;
	
	//3.设置连接信息
	//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
	//第二个参数表示请求的url地址，get方式请求的参数也在url中
	//第三个参数表示采用异步还是同步方式交互，true表示异步
	/**
	*GET方式请求
	*/
	//xmlhttp.open("GET","AJAXServer?name="+ userName,true);
	
	/**
	*POST方式请求的代码
	*/
	xmlhttp.open("POST","AJAXXMLServer",true);
	//POST方式需要自己设置http的请求
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//POST方式发送数据
	xmlhttp.send("name=" + userName);
	
	//4.发送数据，开始和服务器端进行交互
	//同步方式下，send这句话会在服务器端数据回来后才执行完
	//异步方式，send这句话会立即完成执行
	//xmlhttp.send(null);
}

//回调函数
function callback(){
	//5.接收响应数据
	//判断对象的状态是交互完成
	if(xmlhttp.readyState == 4){
		//判断http的交互是否成功
		if(xmlhttp.status == 200){
			//使用responseXML的方式来接收XML数据对象的DOM对象
			var domObj = xmlhttp.responseXML;
			alert(domObj);
			if(domObj){
				//dom中利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组
				var messageNodes = domObj.getElementsByTagName("message");
				if(messageNodes.length > 0){
					//获取message节点中的文本内容
					//message标签中的文本在dom中是message标签所对应的元素节点的字节点，firstChild可以获取到当前内容
					//通过以下方式可以获取到文本内容所对应的节点
					var textNode = messageNodes[0].firstChild;
					//对于文本节点来说，可以通过nodeValue的方式返回文本节点的文本内容
					var responseMessage = textNode.nodeValue;
					
					//将数据显示在页面上
					//通过dom的方式找到div标签所对应的元素节点
					var divNode = document.getElementById("result");
					//设置元素节点的html内容
					divNode.innerHTML = responseMessage;		
				}else{
					alert("XML数据格式错误，原始文本内容为1：" + xmlhttp.responseText);
				}
			}else{
					alert("XML数据格式错误，原始文本内容为2：" + xmlhttp.responseText);
			}
			
		}
	}
}

  

 

步骤7.新建Jsp文件---ajaxxml.jsp

 

<%@ page language="java"  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>
    <base href="<%=basePath%>">
    
    <title>ajax测试注册页面</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="jslib/verifyxml.js"></script>
  </head>
  <body>
   请输入你要注册的用户名：
   <input type="text" id="userName"/>
   <input type="button" value="注册" onclick="verify()"/>
   <div id="result"></div>
  </body>
</html>

 

 

然后访问http://localhost:8080/ajaxtrain/ajaxxml.jsp测试即可！！！