正文

在jsp中运用ajax实现同一界面不跳转处理事件

IP云
IP云V管理员/3 阅读
08/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

目前，编写应用程序时有两种基本的选择：

  • 桌面应用程序
  • Web应用程序

它们有什么区别呢？桌面应用程序一般很快（就在您的计算机上运行，不用等待互联网连接），具有漂亮的用户界面（通常和操作系统有关）和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游，基本上不需要等待。而相对而言，Web应用程序是最新的潮流，它提供了在桌面上不能实现的服务（比如 Amazon.com和eBay）。但是，伴随着Web的强大而出现的是等待，等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。

Ajax能做什么呢？它就是尝试在Web应用程序中使用像桌面应用程序中常见的那些动态用户界面和漂亮的控件。现在就让我们来看看Ajax如何将笨拙的Web界面转化成能迅速响应的Ajax应用程序吧。

举一个小例子，大家都经常在一些网站注册用户。早几年，这是个不太愉快的经历。简单回想一下吧，在您千辛万苦输入用户名，密码，电子邮箱等一大片个人信息后，点击提交按钮将信息提交到服务器上，然后页面一片空白，您开始痛苦地等待。更不幸的是，您的用户名已经被人家注册过了！这时候您又会回到原先的注册页面，而前面填写过的信息已经荡然无存，您又开始陷入重新填写，提交，等待的循环，直到所填写的信息全部通过服务器端验证……这对您的耐心真是一种莫大的考验！您已经受够了。

幸好，AJAX横空出世。有了它，一切都不一样啦。当您输入注册名并点击旁边的一个验证按钮后，可以立刻在输入框的后面无刷新地显示该用户名是否被注册。哈哈，您被拯救了！那么，它是怎么做到的呢？其实道理非常简单，它就是通过客户端脚本，判断您已经输入了用户名，然后去创建一个组件（XMLHTTP），异步地将用户名提交到服务器检测，服务器会把检测结果输出给客户端组件，那么客户端组件在知道结果后，就可以通过DOM去显示结果。我们不明白这个不要紧，先来看ajax应用的第一个demo（这里做了一个前台HTML页面和一个后台Servlet）:

regedit.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
var xmlHttpReq;
//创建一个XmlHttpRequest对象
function createXmlHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlHttpReq = new XMLHttpRequest();//非IE浏览器
}else
{
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
}
}
//检测用户名是否已经被注册
function checkUser()
{
var username = document.getElementById("user").value;
if(username=="")
{
alert("用户名必须填写！");
return false;
}
//首先创建精灵对象
createXmlHttpRequest();
//指明准备状态改变时回调的函数名
xmlHttpReq.onreadystatechange=handle;
//尝试以异步的get方式访问某个URL
//请求服务器端的一个servlet
var url = "check?username="+username;
xmlHttpReq.open("get",url,true);
//向服务器发送请求
xmlHttpReq.send(null);
}
//状态发生改变时回调的函数
function handle()
{
//准备状态为4
if(xmlHttpReq.readyState==4)
{
//响应状态码为200，代表一切正常
if(xmlHttpReq.status==200)
{
var res = xmlHttpReq.responseText;
var result = document.getElementById("result");
result.innerHTML = "<font color=red>"+res+"</font>";
}
}
}
</script>
</head>
<body>
<center><h1>表单注册</h1></center>
<hr>
姓名:
<input type="text" id="user">
<input type="button" value="检测用户名" onclick="checkUser()">
<span id="result"></span>
</body>
</html>

Check.java:

package com.wepull.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class Check extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决返回中文乱码问题
response.setCharacterEncoding("utf-8");
String user = request.getParameter("username");
//解决接收中文乱码问题
user = new String(user.getBytes("iso-8859-1"),"gb2312");
System.out.println(user);
String msg = null;
if("许老师".equals(user))
{
msg = "用户名已经被占用!";
}else
{
msg = "用户名可以使用!";
}
response.getWriter().println(msg); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}