在jsp中运用ajax实现同一界面不跳转处理事件
目前，编写应用程序时有两种基本的选择：
- 桌面应用程序
- 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);
}
}
在jsp中运用ajax实现同一界面不跳转处理事件的更多相关文章
- jsp 中实现点击按钮 实现页面跳转到HTML
<input type ="button" value="跳转" onclick="window.location.href='main.htm ...
- jsp中的路径问题
在学jsp的时候我每次都遇到路径的问题,每次都不能够说100%的把这搞定,这让我很烦恼,今天下午花了点时间来把路径问题整理了下. 一:首先我们在加载项目(我的项目名称是FinalExam)是的路径是h ...
- 关于在SSH2中使用ajax技术的总结(主要写Struts2和ajax)
以下内容是自己理解的,因为还没有看过相关的文章,所以,技术上还是有很大的欠缺.不过这也是自己努力思考得到的,如果有什么更好的建议可以回复我. 1. 任务需求: 实现一个包含数据的表格,并且有分页功能. ...
- AJAX实现登录界面
使用php跳转界面和AJAX都可实现登录界面的跳转的登录失败对的提醒.但是,php跳转的方式 需要额外加载其他界面,用户体验差.AJAX可实现当前页面只刷新需要的数据,不对当前网页进行 重新加载或者是 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- JSP中乱码问题
一.JSP页面显示乱码 二.表单提交中文时出现乱码 三.数据库连接 大家在JSP的开发过程中,经常出现中文乱码的问题,可能一至困扰着您,我现在把我在JSP开发中遇到的中文乱码的问题及解决办法写出来供大 ...
- PHP中使用Ajax
在PHP中使用Ajax来获取数据库中的数据,从而达到不刷新页面就可以获取. 首先在JS中定义变量如: var xmlHttp;function getXmlHttp(){ if(window.Acti ...
- jQuery中操作Ajax方法小结
有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...
- MVC中的Ajax与增删改查
自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...
随机推荐
- [Effective C++ --021]必须返回对象时，别妄想返回其reference
引言 在条目20中,我们知道了值传递和引用传递的效率问题,因此在设计程序时,我们可能就尽可能来返回引用而不是值. 可是,可能会犯下面的一些错误:传递一些引用指向其实并不存在的对象. 第一节:返回临时变 ...
- [面试算法题重做]求1+2+...+n
题目:求1+2+…+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字以及条件判断语句(A?B:C). 不能用条件语句,基本上只有考虑递归. 常规解法: 利用构 ...
- 插件就是生产力——那些不能错过的XCode插件们
古人云"工欲善其事必先利其器",打造一个强大的开发环境,是立即提升自身战斗力的绝佳途径! 晾一下我的武器库,欢迎大家选用:) 全能搜索家CodePilot 2.0 -------- ...
- linux上安装ftp
1.安装 rpm -ivh vsftpd-2.2.2-11.el6_4.1.x86_64.rpm 2.启动 service vsftpd start 3.连接 windows 命令行输入 ftp ww ...
- Android开发环境搭建完全图解（转）
本文介绍从0开始,在Linux系统下,搭建一个Android开发环境的方法. 如果你是<Learning Android>这本书的读者,你也可以参考这篇文章,因为这篇文章是以书中的安装方法 ...
- 一款仿36氪iOS版APP源码
Features 离线缓存 解决视频播放器的网速慢卡顿 视频播放器调用简单 cell自适应高度 cell中嵌套webView cell中嵌套webView 条件实时搜索 Known problems ...
- mapping 详解2（field datatypes）
基本类型 1. 字符串 字符串类型被分为两种情况:full-text 和 keywords. full-text 表示字段内容会被分析,而 keywords 表示字段值只能作为一个精确值查询. 参数: ...
- ubuntu14.04LTS更新源
这两天一直在使用Linux系统做一些事情,但是又会有特别多的报错,其中有一个问题就是源的问题,我知道有太多太多的人写这个源更新的帖子,我现在也写一篇关于源更新的帖子,只是针对ubuntu14.04LT ...
- VSPackge插件系列：如何正确获取DTE
做VS插件开发,不得不了解DTE,有了DTE我们就可以与VS交互了,比如说获取当前选择的文件,比如说获取当前主窗口,比如说获取编译器等等,关于DTE接口更多的说明我把接口地址贴出来方便大家查阅. ht ...
- ACM——五位以内的对称素数
http://acm.njupt.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=1026 五位以内的对称素数 时间限制(普 ...