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

  • 桌面应用程序
  • 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实现同一界面不跳转处理事件的更多相关文章

  1. jsp 中实现点击按钮 实现页面跳转到HTML

    <input type ="button" value="跳转" onclick="window.location.href='main.htm ...

  2. jsp中的路径问题

    在学jsp的时候我每次都遇到路径的问题,每次都不能够说100%的把这搞定,这让我很烦恼,今天下午花了点时间来把路径问题整理了下. 一:首先我们在加载项目(我的项目名称是FinalExam)是的路径是h ...

  3. 关于在SSH2中使用ajax技术的总结(主要写Struts2和ajax)

    以下内容是自己理解的,因为还没有看过相关的文章,所以,技术上还是有很大的欠缺.不过这也是自己努力思考得到的,如果有什么更好的建议可以回复我. 1. 任务需求: 实现一个包含数据的表格,并且有分页功能. ...

  4. AJAX实现登录界面

    使用php跳转界面和AJAX都可实现登录界面的跳转的登录失败对的提醒.但是,php跳转的方式 需要额外加载其他界面,用户体验差.AJAX可实现当前页面只刷新需要的数据,不对当前网页进行 重新加载或者是 ...

  5. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  6. JSP中乱码问题

    一.JSP页面显示乱码 二.表单提交中文时出现乱码 三.数据库连接 大家在JSP的开发过程中,经常出现中文乱码的问题,可能一至困扰着您,我现在把我在JSP开发中遇到的中文乱码的问题及解决办法写出来供大 ...

  7. PHP中使用Ajax

    在PHP中使用Ajax来获取数据库中的数据,从而达到不刷新页面就可以获取. 首先在JS中定义变量如: var xmlHttp;function getXmlHttp(){ if(window.Acti ...

  8. jQuery中操作Ajax方法小结

    有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...

  9. MVC中的Ajax与增删改查

    自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...

随机推荐

  1. java_泛型 TreeSet 判断hashcode/length(升序排列)

    package ming; import java.util.ArrayList; import java.util.Collection; import java.util.Comparator; ...

  2. ios运行某些工程时屏幕上下出现黑边的解决办法

    今天准备了解下MVVM设计模式,于是就从GitHub上Down了一个MVVM的demo(地址在这)学习,下载之后,在模拟器上运行一下,出现如下图上下有黑边,以前也遇到过这个问题,但当时没有记录,现在还 ...

  3. 使用GDB调试Android NDK native(C/C++)程序

    使用GDB调试Android NDK native(C/C++)程序 先说明下,这里所谓的ndk native程序跟Android上层java应用没有什么关系,也不需要涉及jni来封装native接口 ...

  4. 记一次大量 TCP 连接失败

    背景 在一段没有日志的历史遗留代码上面加入监控部署后不久,就收到了服务调用成功率低的告警,真是哗了狗了 解决过程 client端在线上单机部署,根据监控上面的返回码比例看出失败原因都是链接失败,通过 ...

  5. 关于Eclipse开发插件(三)

    视图之间实现事件监听 两个视图中的组件之间的互动,在开发插件的时候是经常碰到的问题.点击视图1列表的某项时,视图2的文本框显示相应的字符. 第一种主动式: 主动式就是在视图1的代码块中获取对视图2的对 ...

  6. centos find

    首先你要确定你的软件是什么方式安装?如果不确定,你可知道你的软件名字,用find查找一下在哪个目录find / -name softname

  7. windows7 图形界面远程 centos6.5

    一.首先确定centos已经安装了gnome,因为centos自身没有图形界面,别说远程图形界面方式访问了,就本地图像界面方式都不行 1.首先查看系统的运行级别以及是否安装了桌面环境    1.使用命 ...

  8. MySQL索引详解

    导读:大家都知道,一个MySQL数据库能够储存大量的数据,如果要查找那一个数据,就得费好大劲从一大堆的数据中找到,即费时间又费力气,这时,索引的出现就大大减轻了数据库管理员的工作.本文介绍了数据库索引 ...

  9. Ajax效果

    Ajax的效果就是不通过网页的跳转,就可以通过请求,就可以自动加载某个网页,在注册帐号时,经常 不通过网页跳转从数据库中查看是否有相同数据的出现,确认是否能够正确注册 下面是用其他方式实现ajax的效 ...

  10. eclipse中启动Genymotion模拟器的错误

    错误程序: Output file: C:\Users\wishwzp\.genymotion-eclipse.logLoading Genymotion libraryGenymotion dire ...