【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)
一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识。
今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax。
介绍
在具体讨论Ajax是什么之前,先让我们花一分钟了解一下Ajax做什么。如图所看到的:
如上图展示给我们的就是使用Ajax技术实现的效果。伴随着web应用的越来越强大而出现的是等待。等待server响应,等待浏览器刷新。等待请求返回和生成新的页面成为了程序猿们的最最头疼的难题。随着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应用程序的原理图,由client向server提交页面请求,再由server通过HTTP传给client生成浏览页面。server端承担大量的工作,client仅仅负责显示。
图1.传统的Web应用程序的原理图
图2使用Ajax应用程序的工作原理例如以下图,可见通过Ajax在浏览器与用户交互方面有了非常大改进。用户不用为提交Form表单而长时间等待server响应,提高用户体验度,并且通过Ajax也能够开发出更加华丽的Web交互页面。client界面和Ajax引擎都是在client执行,这样大量的server工作能够在Ajax引擎处实现,减轻了server端的负担。
图2.使用Ajax应用程序的原理图
Ajax的优缺点:
Ajax给我们带来的优点,大家都有切身体会,在这里我仅仅是简单的讲几点:
长处:
1.最大的一点是页面无刷新,用户的体验度更好。
2.异步与server交互,不须要打断用户操作,具有更快的响应能力。
3.减轻server和带宽的负担,节约空间和成本,ajax是“按需取数据”。能够最大程度的减轻对server造成的负担。
4.基于标准化的并被广泛应用的技术,不须要下载插件或者小程序。
Ajax具有非常多的长处,正是这些长处也反应了它的缺点(当然这里缺点能够克服)。
缺点:
1.安全问题
2.对搜索引擎的支持比較弱。
3.破坏了程序的异常处理机制。
4.违背了url和资源定位的初衷。
实战
一个简单,但很有用的样例:java版异步验证username是否存在
先给大家看一下实现的效果,以下给大家用代码实现:
JS部分的代码:
<script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() { //表示当前浏览器不是ie,如ns,firefox if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } function validate(field) { if (trim(field.value).length != 0) { //创建Ajax核心对象XMLHttpRequest createXMLHttpRequest(); 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开源项目中总结出的常见坏实践(Bad Practice)
- Java 数组常用操作二(扩充、扩容、重复数据、动态数组、数组差集、数组交集、查找指定元素、判断是否相同、数组合并)
- Tomcat部署项目时出错java.lang.IllegalStateException: ContainerBase.addChild: start:org.apache.catalina.Life
- AKKA文档(java)——角色系统
- How to hide warning "Illegal reflective access" in java 9 without JVM argument?
- CSDN日报191113:Java 8 Optional 类错误使用的26个示例;Redis常见面试题(带答案)
- CSDN日报191016:Java纯干货分享:史上最全的JAVA工程师面试题汇总
- Java项目实战——瑞吉外卖Day01
- Java开发环境的搭建以及使用eclipse从头一步步创建java项目
- 第七节:详细讲解Java中的日期,java.util.date
- maven项目的java和resources等文件夹不在Java Resources的文件夹里,并且缺少Deployment...
- 《Java遗传算法编程》—— 1.4 进化计算的优势
- Java IDEA中设置导入import java.xx.*和设置导入具体的import java.xx.yy;
- java中获取类加载路径和项目根路径的5种方法
- 为什么java里面经常作List判断的时候,既要判断list不为null,又要判断size>0呢?
- Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL
- 大型Java Web项目的架构和部署问题
- 在java中使用JMH(Java Microbenchmark Harness)做性能测试
- Java打印输出:java在线8x8x
- Java_jdbc 基础笔记之七 数据库连接(方法升级)
- Spring_错误 java.sql.SQLException: Lock wait timeout exceeded | CannotAcquireLockException 的解决
- 浅析Java对集合进行操作时报java.util.ConcurrentModificationException并发修改异常问题:产生原因、单线程/多线程环境解决、CopyOnWriteArrayList线程安全的ArrayList、fail-fast快速失败机制防止多线程修改集合造成并发问题
- JAVA控制台下:控制台商城购物系统(二)项目小结
- 华为OD机试 - 压缩报文还原(Java) | 机试题+算法思路+考点+代码解析 【2023】
- 从零学Java(21)之while 语句,小AD竟然想躺着上王者!
- 云服务器 ECS 建站教程:手工部署Java Web项目
- IDEA创建java项目并打包成jar包
- Java IDEA 如何找到是哪个程序删除了项目 监听文件夹删除 查看文件夹操作记录
- Java 用Maven创建的项目 创建包发现怎么建都在同一级
- 解决Java使用response下载文件报错,并总结可能出错的原因: java.io.IOException: 你的主机中的软件中止了一个已建立的连接。
- 【Java I/O 流】文件字节输入输出流:FileInputStream & FileOutputStream(文件读写案例)
- Java random 随机数种子