- 浏览: 97699 次
- 性别:
- 来自: 北京
最新评论
-
南星_JAVA:
看似很简单,一琢磨深藏奥秘!
java数组的深度思考【转】 -
sujun7758:
好!
java 日期API的应用 -
shuchaoo:
三星你也去啊?
三星数据(中国)研发中心面试经历。。 -
Alrale:
quiii 写道rubylover 写道初始是电话面试吗?对好 ...
三星数据(中国)研发中心面试经历。。 -
quiii:
rubylover 写道初始是电话面试吗?对好像必须过四级。
...
三星数据(中国)研发中心面试经历。。
如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息,用户输入用户名或企业名称的时候,当输入文本框失去焦点的时候,则会自动向服务器发出请求,用户继续做下面的操作,不必点击“检查”,也不必等待服务器返回信息,检查与用户操作是异步的,可同时进行。当服务器信息返回的时候,会自动在面页相应位置显示返回信息,不必刷新页面,相当于局部刷新的效果。 下面我们来看代码吧。
HTML页面的完整代码如下:
- <%@page language="java" contentType="text/html;charset=GBK"%>
-
- <script language="javascript" type="text/javascript">
-
- <!--
-
- /**//**Ajax 开始 by Alpha 2007-7-5*/
-
- 5
-
- 6 var http = getHTTPObject();
-
- 7
-
- 8 function handleHttpResponse(){
-
- 9 if(http.readyState == 4){
-
- 10 if(http.status == 200){
-
- 11 var xmlDocument = http.responseXML;
-
- 12 if(http.responseText!=""){
-
- 13 document.getElementById("showStr").style.display = "";
-
- 14 document.getElementById("userName").style.background= "#FF0000";
-
- 15 document.getElementById("showStr").innerText = http.responseText;
-
- 16 }else{
-
- 17 document.getElementById("userName").style.background= "#FFFFFF";
-
- 18 document.getElementById("showStr").style.display = "none";
-
- 19 }
-
- 20
-
- 21 }
-
- 22 else{
-
- 23 alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");
-
- 24 alert(http.status);
-
- 25 }
-
- 26 }
-
- 27 }
-
- 28
-
- 29 function handleHttpResponse1(){
-
- 30 if(http.readyState == 4){
-
- 31 if(http.status == 200){
-
- 32 var xmlDocument = http.responseXML;
-
- 33 if(http.responseText!=""){
-
- 34 document.getElementById("comNmStr").style.display = "";
-
- 35 document.getElementById("comNm").style.background= "#FF0000";
-
- 36 document.getElementById("comNmStr").innerText = http.responseText;
-
- 37 }else{
-
- 38 document.getElementById("comNm").style.background= "#FFFFFF";
-
- 39 document.getElementById("comNmStr").style.display = "none";
-
- 40 }
-
- 41
-
- 42 }
-
- 43 else{
-
- 44 alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");
-
- 45 alert(http.status);
-
- 46 }
-
- 47 }
-
- 48 }
-
- 49
-
- 50 function chkUser(){
-
- 51 var url = "/chkUserAndCom";
-
- 52 var name = document.getElementById("userName").value;
-
- 53 url += ("&userName="+name+"&oprate=chkUser");
-
- 54 http.open("GET",url,true);
-
- 55 http.onreadystatechange = handleHttpResponse;
-
- 56 http.send(null);
-
- 57 return ;
-
- 58 }
-
- 59 function chkComNm(){
-
- 60 var url = "/chkUserAndCom";
-
- 61 var name = document.getElementById("comNm").value;
-
- 62 url += ("&comName="+name+"&oprate=chkCom");
-
- 63 http.open("GET",url,true);
-
- 64 http.onreadystatechange = handleHttpResponse1;
-
- 65 http.send(null);
-
- 66 return ;
-
- 67 }
-
- 68
-
- 69 //该函数可以创建我们需要的XMLHttpRequest对象
-
- 70 function getHTTPObject(){
-
- 71 var xmlhttp = false;
-
- 72 if(window.XMLHttpRequest){
-
- 73 xmlhttp = new XMLHttpRequest();
-
- 74 if(xmlhttp.overrideMimeType){
-
- 75 xmlhttp.overrideMimeType('text/xml');
-
- 76 }
-
- 77 }
-
- 78 else{
-
- 79 try{
-
- 80 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
-
- 81 }catch(e){
-
- 82 try{
-
- 83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
-
- 84 }catch(E){
-
- 85 xmlhttp = false;
-
- 86 }
-
- 87 }
-
- 88 }
-
- 89 return xmlhttp;
-
- 90 }
-
- 91/**//**Ajax 结束*/
-
- 92
-
- 93//检测表单
-
- 94function chkpassword()
-
- 95{
-
- 96 var m=document.form1;
-
- 97 if(len(m.password.value) > 20 || len(m.password.value) < 5 || !isStr(m.password.value))
-
- 98 {
-
- 99 document.getElementById("passwordStr").style.display = "";
-
- 100 document.getElementById("password").style.background= "#FF0000";
-
- 101 document.getElementById("passwordStr").innerText = "对不起,密码必须为英文字母、数字或下划线,长度为5~20!";
-
- 102 }
-
- 103 else
-
- 104 {
-
- 105 document.getElementById("password").style.background= "#FFFFFF";
-
- 106 document.getElementById("passwordStr").style.display = "none";
-
- 107 }
-
- 108}
-
- 109
-
- 110function chkconfirmPassword()
-
- 111{
-
- 112 var m=document.form1;
-
- 113 if (m.password.value != m.confirmPassword.value)
-
- 114 {
-
- 115 document.getElementById("confirmPasswordStr").style.display = "";
-
- 116 document.getElementById("confirmPassword").style.background= "#FF0000";
-
- 117 document.getElementById("confirmPasswordStr").innerText = "对不起,密码与重复密码不一致!";
-
- 118 }
-
- 119 else
-
- 120 {
-
- 121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
-
- 122 document.getElementById("confirmPasswordStr").style.display = "none";
-
- 123 }
-
- 124}
-
- 125
-
- 126function checkfield()
-
- 127{
-
- 128 var m=document.form1;
-
- 129 if(m.userName.value.length==0)
-
- 130 {
-
- 131 alert("对不起,用户名必须为英文字母、数字或下划线,长度为5~20。");
-
- 132 m.userName.focus();
-
- 133 return false;
-
- 134 }
-
- 135 if(m.password.value.length==0)
-
- 136 {
-
- 137 alert("对不起,密码必须为英文字母、数字或下划线,长度为5~20。");
-
- 138 m.password.focus();
-
- 139 return false;
-
- 140 }
-
- 141 if (m.password.value != m.confirmPassword.value)
-
- 142 {
-
- 143 alert("对不起,密码与重复密码不一致!");
-
- 144 m.confirmPassword.focus();
-
- 145 return false;
-
- 146 }
-
- 147 if(m.comNm.value.length==0)
-
- 148 {
-
- 149 alert("对不起,企业名称不能为空!!");
-
- 150 m.comNm.focus();
-
- 151 return false;
-
- 152 }
-
- 153 m.submit();
-
- 154}
-
- 155
-
- 156//-->
-
- 157</script>
-
- 158<body topmargin="0">
-
- 159<form name="form1" method="post" action="/Control?act=Register">
-
- 160<table width="100%">
-
- 161 <tr><td align="center"> <H2>Ajax 演示程序</H1></td></tr>
-
- 162 <tr><td align="center"> ------ 企业注册 By Alpha</td></tr>
-
- 163</table>
-
- 164
-
- 165<HR>
-
- 166 <table width="400" border="0" cellpadding="1" cellspacing="1" align="center" >
-
- 167 <tr>
-
- 168 <td><font color="red">*</font></td>
-
- 169 <td>用户帐号:</td>
-
- 170 <td>
-
- 171 <input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/>
-
- 172 <div id="showStr" style="background-color:#FF9900;display:none"></div>
-
- 173 </td>
-
- 174 </tr>
-
- 175 <tr>
-
- 176 <td><font color="red">*</font></td>
-
- 177 <td>企业名称:</td>
-
- 178 <td>
-
- 179 <input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/>
-
- 180 <div id="comNmStr" style="background-color:#FF9900;display:none"></div>
-
- 181
-
- 182 </td>
-
- 183 </tr>
-
- 184 <tr>
-
- 185 <td><font color="red">*</font></td>
-
- 186 <td>用户密码:</td>
-
- 187 <td><input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/>
-
- 188 <div id="passwordStr" style="background-color:#FF9900;display:none"></div>
-
- 189 </td>
-
- 190 </tr>
-
- 191 <tr>
-
- 192 <td><font color="red">*</font></td>
-
- 193 <td>确认密码:</td>
-
- 194 <td><input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/>
-
- 195 <div id="confirmPasswordStr" style="background-color:#FF9900;display:none"></div>
-
- 196 </td>
-
- 197 </tr>
-
- 198 </table>
-
- 199
-
- 200 <div align="center">
-
- 201 <input type="button" name="ok" value=" 确 定 " onclick="checkfield()">
-
- 202
-
- 203 <input type="reset" name="reset" value=" 取 消 ">
-
- 204 </div>
-
- 205
-
- 206</form>
-
- 207</body>
-
- 208</html>
用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后,接下来要决定当收到服务器的响应后,需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后。
再看看数据提供者的URL,url = "/chkUserAndCom",servlet如下:
- 1/**//*
-
- 2 * Created on 2005-12-31
-
- 3 *
-
- 4 * TODO To change the template for this generated file go to
-
- 5 * Window - Preferences - Java - Code Style - Code Templates
-
- 6 */
-
- 7package com.event;
-
- 8
-
- 9import javax.servlet.ServletException;
-
- 10import javax.servlet.http.HttpServletRequest;
-
- 11import javax.servlet.http.HttpServletResponse;
-
- 12
-
- 13import com.beans.EBaseInfo;
-
- 14
-
- 15/** *//**
-
- 16 * @author Alpha 2007-7-5
-
- 17 *
-
- 18 * <P>Ajax 演示---企业注册时检查企业用户名和企业名称</P>
-
- 19 *
-
- 20 * TODO To change the template for this generated type comment go to
-
- 21 * Window - Preferences - Java - Code Style - Code Templates
-
- 22 */
-
- 23public class CheckUserAndComNm {
-
- 24 private String msgStr = "";
-
- 25 protected void doGet(HttpServletRequest request,HttpServletResponse response)
-
- 26 throws ServletException
-
- 27 {
-
- 28
-
- 29 EComBaseInfo info=new EComBaseInfo();
-
- 30 String oprate=request.getParameter("oprate")).trim();
-
- 31 String userName=request.getParameter("userName");
-
- 32 String passWord=request.getParameter("password");
-
- 33 String comName=request.getParameter("comName");
-
- 34
-
- 35 try
-
- 36 {
-
- 37 if(oprate.equals("chkUser"))
-
- 38 {
-
- 39 response.setContentType("text/html;charset=GB2312");
-
- 40 if(userName.length()<5||userName.length()>20)
-
- 41 {
-
- 42 msgStr = "对不起,用户名必须为字母、数字或下划线,长度为5-20个字符!";
-
- 43 }
-
- 44 else
-
- 45 {
-
- 46 boolean bTmp=info.findUser(userName); //找查数据库中有无该用户名
-
- 47 if(bTmp)
-
- 48 msgStr ="对不起,此用户名已经存在,请更换用户名注册!";
-
- 49 else
-
- 50 msgStr ="";
-
- 51 }
-
- 52 response.getWriter().write(msgStr);
-
- 53 }
-
- 54 else if(oprate.equals("chkCom"))
-
- 55 {
-
- 56 response.setContentType("text/html;charset=GB2312");
-
- 57 if(comName.length()<6||comName.length()>100)
-
- 58 {
-
- 59 msgStr = "对不起,公司名称长度为6-100个字符(不包括字符内的空格)!";
-
- 60 }
-
- 61 else
-
- 62 {
-
- 63 boolean bTmp=info.findCom(comName); //找查数据库中有无该企业名
-
- 64 if(bTmp)
-
- 65 msgStr ="对不起,此企业名称已经存在,请更换企业名称注册!";
-
- 66 else
-
- 67 msgStr ="";
-
- 68 }
-
- 69 response.getWriter().write(msgStr);
-
- 70
-
- 71 }
-
- 72 }
-
- 73 catch(Exception ex)
-
- 74 {
-
- 75 }
-
- 76 finally
-
- 77 {
-
- 78 request.setAttribute("url",url);
-
- 79 }
-
- 80 }
-
- 81
-
- 82 protected void doPost(HttpServletRequest request,HttpServletResponse response)
-
- 83 throws ServletException
-
- 84 {
-
- 85 doGet(request,response);
-
- 86 }
-
- 87}
-
- 88
AJAX技术小结
1. Ajax(Asynchronous JavaScript and XML)是一个结合了Java技术、XML、以及JavaScript的编程技术,可以让你构建基于Java技术的Web应用,并打破了使用页面重载的惯例。
2. Ajax,异步JavaScript与XML,是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,你可以创建接近本地桌面应用的,直接的、高可用的、更丰富的、更动态的Web用户接口界面。
3. 对于Mozilla﹑Netscape﹑Safari、Firefox等浏览器,创建XMLHttpRequest 方法如下:
xmlhttp_request = new XMLHttpRequest();
4. IE等创建XMLHttpRequest 方法如下:
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") 或 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
5. xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);
6. open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用的方式。 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。
Ajax技术运用的好的话,给我们的网页增添了许多友好的效果,给用户还来更好的感觉。Ajax是个好东西。
发表评论
-
IE6以后版本,去除页面控件的虚线框的方法
2008-04-18 09:54 1753新版本的IE,用户不能直接与 APPLET、EMBED 或 O ... -
eclipse3.3中使用CXF开发HelloWorld程序
2008-01-10 18:54 6395开发环境的配置: 1、下载并安装eclipse3.3或更高版本 ... -
异步入门小程序
2007-12-11 19:03 1123重新做个省市关联的小程序,修正一下思路,自己参看JS的DOC和 ... -
jsp页面中打印出用,能取得的各种路径
2007-07-23 21:33 1875在registerNetinfo.jsp页面中输入这些东东: ... -
flash+struts的小应用
2007-07-18 16:45 2467前言:原创,实现flash结合struts框架的一个小应用。 ... -
ajax基础
2007-07-16 20:37 963前言:讲得很不错,不过贴到这上面,代码就乱了,所以记下地址,以 ... -
用java向一个Web站点发送POST请求
2007-07-16 20:17 1847向一个Web站点发送POST请求只需要简单的几步: 首先要和 ... -
用eclipse配置struts,手写的action无效?
2007-07-11 18:48 2123前言:昨天搭建struts环境时遇到一个蹊跷的事情:所有最简需 ... -
javascript调用xmlhttp不刷新取得数据
2007-07-06 09:49 1683js 代码 <script lang ... -
struts 2.08 的HelloWorld配置错误
2007-07-04 16:09 3213在Eclipse3.2+MyEclipse5.5+Tomcat ...
相关推荐
在本实例中,我们探讨了如何使用AJAX(Asynchronous JavaScript and XML)技术来改进用户注册过程,特别是在检查用户名和企业名的可用性方面。AJAX允许我们在不刷新整个页面的情况下,与服务器进行异步通信,提升...
在探讨“ajax编写用户注册的应用实例”这一主题时,我们主要关注的是如何利用Ajax技术实现一个用户注册系统中的用户名验证功能。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,...
在本文中,我们将深入探讨如何使用Ajax技术实现一个用户注册功能。Ajax,即Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在这个...
### AJAX在用户注册过程中的应用实例 #### 一、引言 随着Web技术的发展,用户对网站交互体验的要求越来越高。传统的网页操作模式已不能满足现代用户的期待,这促使开发者们寻找更加高效、流畅的交互解决方案。AJAX...
在这个用户注册实例中,我们将深入探讨如何利用ASP.NET AJAX来实现一个交互性强、用户体验良好的注册流程。 首先,我们需要理解ASP.NET的基础。ASP.NET是.NET Framework的一部分,用于构建动态网站、Web应用和服务...
描述部分与标题相同,"[其他类别]Ajax之用户注册实例_ajaxcheckuser(ASP.NET源码).rar",这表明这是一个关于Ajax用户注册的示例代码,可能包含了实现用户验证的ASP.NET后端代码和与之交互的前端Ajax脚本。...
这个“Ajax之用户注册实例_ajaxcheckuser.zip”压缩包文件包含了一个实际的Ajax用户注册验证示例,旨在教授如何利用Ajax实现动态、无刷新的用户注册功能。下面我们将深入探讨这一技术及其在用户注册中的应用。 首先...
### 标题解读:用 AJAX 编写用户注册时的 此标题明确指出了文章的主要内容是关于使用 AJAX 在用户注册过程中的应用。通过 AJAX,开发者可以在不重新加载整个页面的情况下,与服务器进行数据交换,完成诸如用户名和...
这个"ASP.NET源码——Ajax之用户注册实例.zip"文件包含了一个具体的用户注册示例,它利用了Ajax技术来实现无刷新的交互体验。 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够...
【标题】".NET Ajax 用户注册实例源码AjaxCheckUs"主要展示了如何在.NET环境中利用Ajax技术实现一个用户注册功能。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下,能够更新部分网页的技术...
综上所述,《AJAX编程技术与实例》这本书很可能是涵盖了这些AJAX的基础知识,包括如何创建和使用XMLHttpRequest对象,处理响应数据,以及如何在实际项目中应用AJAX来提升网页交互性。如果你正在学习AJAX,这本书会是...
【AJAX + Servlet 入门实例:用户注册】 在Web开发中,AJAX(Asynchronous JavaScript and XML)和Servlet是两种关键的技术,它们共同构建了动态、交互性强的Web应用程序。这个入门实例将向我们展示如何利用AJAX与...
在“Ajax实现用户注册”的主题中,我们将深入探讨如何利用Ajax技术构建一个实时验证用户注册信息的系统,从而提高用户体验,减少不必要的页面刷新。 首先,Ajax的核心原理是通过JavaScript在后台与服务器进行异步...
在本实例中,我们将探讨如何利用ASP.NET和Ajax技术实现一个用户注册功能。Ajax(Asynchronous JavaScript and XML)的核心是通过JavaScript进行异步数据交换,无需刷新整个页面即可更新部分网页内容,从而提升用户...
Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这使得网页更加用户友好,提高了用户体验,...
总结来说,"PHP+Ajax 无刷新登录及注册实例"展示了如何结合使用这两种技术来创建一个高效且用户友好的Web应用。PHP处理后台数据处理和验证,而Ajax则负责前端的实时交互,两者共同营造了无缝的用户体验。对于想要...
在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术已经成为提升用户体验的重要工具,它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON(JavaScript Object Notation)作为数据交换...
**jQuery AJAX分页技术详解** 在Web开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高页面加载速度,优化用户体验。jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和...
在本实例中,我们将深入探讨如何运用Ajax来提升Web应用的用户体验。 首先,我们看到一个名为`DraggableTBHeader`的项目,这可能是一个实现了拖动表格表头功能的Ajax实例。在Web开发中,允许用户自由拖动表格列头以...