java项目实践具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)

Posted claireyuancy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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项目实践具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)的主要内容,如果未能解决你的问题,请参考以下文章

Java Web可视化实践项目

Java跨域以及实现原理

Java跨域以及实现原理

(转)Java 日志框架解析(下) - 最佳实践

解释ajax的工作原理

TCP/IP协议族——IP工作原理及实例具体解释(上)