在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++ --018]让接口容易被正确使用，不易被误用
□第一节 什么是接口?什么是接口?百度百科的解释:两个不同系统(或子程序)交接并通过它彼此作用的部分.接口的概念贯穿于整个软件开发过程中,本文讨论的接口概念仅局限于以C++实现的class,funct ...
- Mysql数据库导出压缩并保存到指定位置备份脚本
#!/bin/bashbackdir=/home/shaowei/dbbakdbuser='dbusername'dbpass='dbpasswd'dblist=$(ls -p /var/lib/my ...
- com.classpath.www
package com.classpath.www; import java.io.File; import java.net.URL; import javax.servlet.ServletCon ...
- Fixflow引擎解析(三)(模型) - 创建EMF模型来读写XML文件
Fixflow引擎解析(四)(模型) - 通过EMF扩展BPMN2.0元素 Fixflow引擎解析(三)(模型) - 创建EMF模型来读写XML文件 Fixflow引擎解析(二)(模型) - BPMN ...
- oracle数据库中，分天查询数目
select to_CHAR(SP_MT_TIME,'DD'),count(*) from table2 group by to_CHAR(SP_MT_TIME,'DD');
- MySQL（1）：启动MySQL服务，客户端连接服务
1.安装完毕mysql之后,在windows中找到服务,启动MySQL服务(服务端)(mysqld.exe) 2.接下来启动客户端(mysql.exe) 这里参数中: -hlocalhost 表示主机 ...
- WIndows 7 与 Debian 7 双系统启动引导
以前写有一篇文章是Windows XP下引导Linux的(http://www.cnblogs.com/ibgo/archive/2012/05/20/2510736.html),采用的是grub4d ...
- AT-FragmentPagerAdapter
关于FragmentPagerAdapter的粗略翻译 英文版api地址:FragmentPagerAdapter(自备梯子) FragmentPagerAdapter 类概述(Class Ov ...
- fstat - 读取文件相关信息
#fstat读取到的信息 ["dev"]=> int(16777220) ["ino"]=> int(66880002) ["mode&q ...
- Floyd判圈算法(判断是否有环)
介意转吗博主~~http://blog.csdn.net/thestoryofsnow/article/details/6822576,我知道不介意啦~ 问题:如何检测一个链表是否有环,如果有,那么如 ...