Ajax异步测试

使用Ajax完成异步请求，对其使用有一个简单的认识

1.完成两个基本的小功能，效果如下

2.组成非常简单Servlet+jsp

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><base href="<%=basePath%>"><title>AjaxTest</title><meta charset = "utf-8"/><style type="text/css">#divshow{height: 200px;width:200px;background : orange;border : "1px, solid";}</style><script type="text/javascript">function getData(){//获取ajax引擎对象var ajax = new XMLHttpRequest();//复写onreadystatechange方法ajax.onreadystatechange = function(){//获取响应数据var data = ajax.responseText;//获取要操作的元素var showdiv = document.getElementById("divshow");//操作元素内容showdiv.innerHTML = data;};//创建并发送请求ajax.open("get", "data", true);ajax.send(null);} //ajax的优化function getData1(){//获取ajax对象(判断不同的浏览器类型)var ajax ;if(window.XMLHttpRequest){				//火狐 与谷歌的获取方式ajax = new XMLHttpRequest();}else if(window.ActiveXObject){		//IE浏览器的获取方式ajax = new ActiveXObject("Msxml2.XMLHTTP");}//复写onreadystatechange方法ajax.onreadystatechange = function(){//判断数据的状态码  ----通过方法：  对象名.readyState 调用//（有0、1、2、3、4 合计5种，其中状态码为4的时候，表示数据已经接收成功）if(ajax.readyState==4){//判断相应码（200、404、500等）if(ajax.status==200){//获取相应结果var data = ajax.responseText;//获取所要操作的元素var showdiv = document.getElementById("divshow");//操作与元素showdiv.innerHTML = data;}else if(ajax.status==404){document.getElementById("divshow").innerHTML = "资源未找到";}else if(ajax.status==500){document.getElementById("divshow").innerHTML = "服务器繁忙";}}};ajax.open("get", "data", true);	//true表示：此ajax引擎对象采用异步处理。ajax.send(null);// alert("我是异步处理的测试警告");		//在data的servlet，线程休眠3000ms。异步处理的结果是，点击按钮后，此弹窗直接弹出，div中的内容自点击按钮后3秒刷新出来（不论是否去除弹窗）}//使用ajax配合servlet进行用户名校验（失去焦点后自动校验）function userNameCheck(){//获取用户数据var uname = document.getElementById("uname").value;//声明ajax引擎对象var ajax;if(window.XMLHttpRequest){ajax = new XMLHttpRequest();}else if(window.ActiveXObject){ajax = new ActiveXObject("Msxml2.XMLHTTP");}//重写onreadystatechange方法ajax.onreadystatechange = function(){//判断数据的就绪状态码if(ajax.readyState==4){//判断相应码if(ajax.status==200){//获取响应结果var data =ajax.responseText;//获取要操作的元素var span = document.getElementById("unameSpan");//处理响应结果if("empty"==data){span.innerHTML = "*用户名不能为空";span.style.color = "red";}else if(eval(data)){span.innerHTML = "*该用户名已存在";span.style.color = "red";}else{span.innerHTML = "*该用户名可以使用";    	span.style.color = "green";}}}};ajax.open("get", "user?uname="+uname, true);ajax.send(null);}</script></head><body><h3>测试Ajax异步请求</h3><hr /><input type="button" value="点击查看数据" id="btn" οnclick="getData1()" /><div id="divshow"></div><hr /><h3>使用ajax完成用户名校验(丧失焦点后，自动校验)</h3>用户名: <input type="text" name="uname" id="uname" value="" οnblur="userNameCheck()"/><span id=unameSpan></span></body>
</html>

3.第一个测试基本请求的Servlet

public class DataServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//设置请求编码格式req.setCharacterEncoding("utf-8");//设置相应编码格式resp.setContentType("text/html;utf-8");resp.setCharacterEncoding("utf-8");//响应请求结果resp.getWriter().write("我是异步返回的数据！");}
}

4.第二个用户名校验的Servlet

package com.bjsxt.servlet;import java.io.IOException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.bjsxt.pojo.User;
import com.bjsxt.service.UserService;
import com.bjsxt.serviceImpl.UserServiceImpl;public class UserServlet extends HttpServlet {UserService us = new UserServiceImpl();@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//声明请求编码格式req.setCharacterEncoding("utf-8");//声明响应编码格式resp.setCharacterEncoding("utf-8");resp.setContentType("text/html; charset =utf-8");//获取请求信息String str = req.getParameter("uname");//处理请求信息,查询数据库，获取信息User userName = us.checkUserInfo(str);if (!"".equals(str)) {if (userName!=null) {//返回处理结果resp.getWriter().write("true");}else {resp.getWriter().write("false");}}else {resp.getWriter().write("empty");}}
}

5.效果如下