`

【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)

阅读更多

一年前,从不知道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,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开发一直在追求界面友好,人性化,较高的用户体验度以及更加美观等等,我相信只要从点点滴滴做起,任何问题都不是问题。

 

分享到:
评论

相关推荐

    基于ASP+AJAX+ACCESS实现的无刷新检测用户名是否占用程序源码

    【ASP+AJAX+ACCESS实现无刷新检测用户名是否占用程序源码详解】 在网页应用开发中,用户体验至关重要,其中无刷新验证技术能显著提升用户体验。本篇将详细讲解如何使用ASP(Active Server Pages)、AJAX...

    用JAVA开发的在线问卷调查系统(WAR+源码+SQL)

    【标题】:“用JAVA开发的在线问卷调查系统(WAR+源码+SQL)”揭示了这是一个基于Java技术栈构建的Web应用程序,主要功能是实现在线问卷调查。这种系统通常包括创建问卷、发布问卷、收集答案以及分析结果等功能,对...

    孙卫琴.Tomcat与Java.Web开发技术详解pdf+源码

    《孙卫琴.Tomcat与Java.Web开发技术详解》是一本深入探讨Tomcat服务器与Java Web开发的权威著作。该书由资深Java开发者孙卫琴撰写,旨在帮助读者全面掌握在Tomcat上进行Java Web应用的开发、部署及优化技术。书中...

    基于Java+JSP的微博系统毕业设计实现+源码毕业设计实现+源码.rar

    总结,基于Java+JSP的微博系统开发是一个涉及多方面技术的综合实践项目,不仅需要扎实的Java基础,还要掌握Web开发的相关技术,以及良好的设计思维和安全意识。通过这样的毕业设计,学生可以全面理解Web应用的开发...

    这是一个简单登陆验证也可以改为检查用户名是否存在的ajax例子(可以自由扩张)

    这两本书籍将提供关于XMLHttpRequest对象的详细信息,以及Ajax技术的深入理解,包括其工作原理、使用方法和最佳实践。 **知识点详解:** 1. **Ajax(Asynchronous JavaScript and XML)**:是一种在不重新加载整个...

    javacrm金堂国际项目源码加说明

    【JavaCRM金堂国际项目源码详解】 JavaCRM金堂国际项目是一款基于Java技术构建的客户关系管理系统,它集成了企业对客户管理、销售管理、市场营销和服务支持等核心业务流程,旨在提高企业的运营效率和客户满意度。这...

    ajax完整代码与实现.rar_ajax_java_servlet_实现_源码

    **Ajax(异步JavaScript和XML)技术详解** Ajax是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器交换少量数据并更新部分网页内容,从而提升了用户体验,使得网页更具交互性。本...

    韩顺平Ajax笔记+源码+ppt

    **Ajax技术详解** Ajax,全称为"Asynchronous JavaScript and XML",即异步JavaScript与XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现...

    基于Java+JSP的网上拍卖系统毕业设计实现+源码.rar

    8. **AJAX异步通信**:为了提供更好的用户体验,JSP可能使用AJAX技术进行局部页面更新,无需每次交互都刷新整个页面。 9. **Web容器**:如Tomcat或Jetty,用于运行Java Web应用程序。 10. **前端技术**:除了JSP,...

    ajax学习经典源码

    通过分析和实践这些源码,你可以更好地理解Ajax的工作原理,掌握如何使用Ajax实现动态加载数据、异步通信等功能。记得在实际项目中,根据需求选择合适的请求类型、数据格式和错误处理策略,以提高应用程序的性能和...

    Maven+SSM上传下载源码实现

    总结,"Maven+SSM上传下载源码实现"涉及到的是基于Java的Web开发实践,通过SSM框架搭建业务逻辑,利用Maven进行项目管理,实现了文件上传和下载的核心功能。这样的实现方式具有良好的可扩展性和维护性,是现代企业级...

    java web项目源码

    【Java Web项目源码——图书管理系统详解】 在Java Web开发领域,图书管理系统是一个常见的实践项目,它涵盖了多种核心技术,如Servlet、JSP、MVC设计模式、数据库操作以及框架的运用。本项目基于IntelliJ IDEA开发...

    java web开发详解源代码

    Java Web开发是构建基于互联网应用程序的关键技术,它涵盖了多种技术和工具,用于...通过研究这些源代码,开发者不仅可以理解Java Web开发的基本原理,还能学习到最佳实践和常见设计模式,为实际项目开发打下坚实基础。

    基于Java web的图书管理系统(源码+数据库+报告).zip

    《基于Java Web的图书管理系统详解》 图书管理系统是软件工程中的一个重要实践项目,它涉及到数据库设计、用户交互、数据处理等多个关键环节。本系统采用Java Web技术进行开发,结合数据库管理,实现图书的添加、...

    jsp+servlet+javabean实现网上商城项目完整源码

    总的来说,"jsp+servlet+javabean实现网上商城项目完整源码"是一个涵盖了Web开发基础、数据库操作、业务逻辑处理等多个方面的综合实践。通过对这个项目的深入学习,开发者不仅能掌握Web开发的基本技术,还能理解如何...

    基于java的BBS系统源码

    【Java BBS系统源码详解】 Java BBS系统是一种基于Java编程语言开发的在线讨论论坛软件,它允许用户进行登录、注册,发布和查看信息。这个系统通常采用MySQL作为其后端数据库,提供了稳定的数据存储和支持。在此,...

    +Ajax异步无刷新登录实例

    **Ajax异步无刷新登录实例详解** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript与XML),是一种创建动态网页的技术。它允许在不重新加载整个网页的情况下,与服务器交换数据并更新部分网页内容。在...

    经典AJAX简单入门篇(PDF+源码)

    通过分析这些源码,你可以更深入地了解AJAX的工作原理和实践应用。 总结,这个经典AJAX简单入门篇结合PDF教程和源码实例,将帮助你快速理解并掌握AJAX的基本用法和DOM操作,是学习Web开发中AJAX技术的宝贵资源。...

    AJAX留言板源码(PHP版)

    【AJAX留言板源码(PHP...开发者可以研究这个源码来提升自己的Web开发技能,理解前后端交互的工作原理,以及如何构建动态Web应用程序。同时,这个源码也提供了一个实战案例,帮助开发者在实际项目中应用AJAX和PHP技术。

    java毕业设计&课设-博客系统项目(视频+源码+资料).doc

    ### Java毕业设计&课设-博客系统项目知识点详解 #### 一、项目概述 本项目为Java语言开发的博客系统,适用于计算机相关专业学生的毕业设计或课程设计。项目包括了完整的视频教程、源代码以及相关文档资料。通过本...

Global site tag (gtag.js) - Google Analytics