【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)
来源:互联网 发布:绵阳鼎盛医疗软件 编辑:程序博客网 时间:2024/04/30 04:30
一年前,从不知道Ajax是什么,伴随着不断的积累,到现在经常使用,逐渐有了深入的认识。今天,如果想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax。
介绍
在详细讨论Ajax是什么之前,先让我们花一分钟了解一下Ajax做什么。如图所示:
如上图展示给我们的就是使用Ajax技术实现的效果。伴随着web应用的越来越强大而出现的是等待,等待服务器响应,等待浏览器刷新,等待请求返回和生成新的页面成为了程序员们的最最头疼的难题。随着Ajax的出现使web应用程序变得更完善,更友好。
好,还等什么呢?让我们来一起看看Ajax的强大功能。
1、什么是Ajax
Ajax的全称是:Asynchronous JavaScript + XML=异步 JavaScript + XML
从Ajax的全称我们可以看出,Ajax不是一个技术,它是几种技术的结合体,每种技术都有其独特之处,合在一起就成为了功能强大的新技术,用于创建快速动态网页的技术。因此,Ajax也有一个时髦的术语“旧貌换新颜”。
2、Ajax包括:
1、HTML,用于建立web表单
2、DOM,用于动态显示和交互
3、XML,使用XML做数据交互和操作
4、XmlHttpRequest,进行异步数据接收
5、JavaScript,将它们紧密的结合在一起
相信您对上面的技术都很熟悉,最难是创建XMLHttpRequest对象,大家看我的一篇博文就好,里面详细介绍了它是什么,以及五步创建法,猛戳这里。
Ajax工作原理
我们通过两张图以往传统的Web应用程序和使用Ajax应用程序的原理图,来解释一下Ajax的工作原理,如下图所示:
图1是以往传统的Web应用程序的原理图,由客户端向服务器提交页面请求,再由服务器通过HTTP传给客户端生成浏览页面。服务器端承担大量的工作,客户端只负责显示。
图1.传统的Web应用程序的原理图
图2使用Ajax应用程序的工作原理如下图,可见通过Ajax在浏览器与用户交互方面有了很大改进,用户不用为提交Form表单而长时间等待服务器响应,提高用户体验度,而且通过Ajax也可以开发出更加华丽的Web交互页面。客户端界面和Ajax引擎都是在客户端运行,这样大量的服务器工作可以在Ajax引擎处实现,减轻了服务器端的负担。
图2.使用Ajax应用程序的原理图
Ajax的优缺点:
Ajax给我们带来的好处,大家都有切身体会,在这里我只是简单的讲几点:
优点:
1.最大的一点是页面无刷新,用户的体验度更好。
2.异步与服务器交互,不需要打断用户操作,具有更快的响应能力。
3.减轻服务器和带宽的负担,节约空间和成本,ajax是“按需取数据”,可以最大程度的减轻对服务器造成的负担。
4.基于标准化的并被广泛应用的技术,不需要下载插件或者小程序。
Ajax具有很多的优点,正是这些优点也反应了它的缺点(当然这里缺点可以克服)。
缺点:
1.安全问题
2.对搜索引擎的支持比较弱。
3.破坏了程序的异常处理机制。
4.违背了url和资源定位的初衷。
实战
一个简单,但非常实用的例子:java版异步验证用户名是否存在
先给大家看一下实现的效果,下面给大家用代码实现:
JS部分的代码:
<script type="text/javascript">var xmlHttp; function createXMLHttpRequest() {//表示当前浏览器不是ie,如ns,firefoxif(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}function validate(field) {if (trim(field.value).length != 0) {//创建Ajax核心对象XMLHttpRequestcreateXMLHttpRequest();var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();//设置请求方式为GET,设置请求的URL,设置为异步提交xmlHttp.open("GET", url, true);//将方法地址复制给onreadystatechange属性//类似于电话号码xmlHttp.onreadystatechange=callback;//将设置信息发送到Ajax引擎xmlHttp.send(null);} else {document.getElementById("spanUserId").innerHTML = "";}}//回调函数function callback() {//Ajax引擎状态为成功if (xmlHttp.readyState == 4) {//HTTP协议状态为成功if (xmlHttp.status == 200) {if (trim(xmlHttp.responseText) != "") {document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"}else {document.getElementById("spanUserId").innerHTML = "";}}else {alert("请求失败,错误码=" + xmlHttp.status);}}}</script>
提交到user_validate.jsp页面的代码:
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%><%@ page import="sysmgr.manager.*" %><%String userId = request.getParameter("userId");if (UserManager.getInstance().findUserById(userId) != null) {out.println("用户代码[" + userId + "]已经存在!");}%>
访问数据库部分的代码,我们就不再这里展示了,大家可以到查看源码。
总结
Web开发一直在追求界面友好,人性化,较高的用户体验度以及更加美观等等,我相信只要从点点滴滴做起,任何问题都不是问题。
- 【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)
- 【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)
- 【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在(java版)
- Ajax异步验证用户名是否已经存在
- 【java web】--Ajax异步判断用户名是否存在
- JQuery实现异步验证用户名是否存在
- ajax+struts实现验证用户名是否存在
- 菜鸟学Java(一)——Ajax异步检查用户名是否存在(附Demo下载)
- SSH第一步——Ajax异步验证用户名是否存在
- thinkphp5.0+ajax异步刷新验证用户名是否存在
- Ajax实现异步验证用户是否存在
- ajax验证用户名是否存在
- ajax验证用户名是否存在
- AJAX 验证用户名是否存在
- ajax 验证用户名是否存在
- ajax验证用户名是否存在
- ajax验证用户名是否存在
- ajax验证用户名是否存在
- Qt 5.20 的安装
- iOS 面试题(八)
- MessageDigest简介
- 关于一个简单的python上传到linux服务器再经过shell脚本ftp传输的问题
- 第一个java程序(9x9乘法表)
- 【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)
- 哈希表简易入门
- easyui 不适用fit属性让布局在一定宽度自适应,小于此宽度产生滚动条
- 浅谈异常Exception
- 重构个人版机房收费(二)——泛型集合
- 今年暑假数学建模让我们一起加油↖(^ω^)↗
- myeclise10 svn: E210004: Number is larger than maximum 解决方案
- 2014-08-07 日志
- C++设计模式之原型模式(二)