使用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 {
@Override
protected 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();
@Override
protected 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.效果如下
