ajax 注册的例子（XMLHttpRequest）

最新推荐文章于 2022-08-25 16:14:52 发布
最新推荐文章于 2022-08-25 16:14:52 发布
阅读量515 收藏 1
点赞数
文章标签： xmlhttprequest ajax url application null 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xutaoran/article/details/3521051
版权

看了好久的ajax，自己动手做的例子却很少，今天决定自己动手写一个，功能很简单，实现一个简单的用户名注册功能，同时对用户输入在服务器端进行简单校验，没有用数据库保存用户名，这里利用application·对象模拟。做了好久才弄好，遇到了很多问题，最后得以解决，比较有意思的地方是当我写完例子后，在firefox下运行正常，但是在ie下有点问题，注册过的用户名还是显示注册成功，查了好久没有搞出原因，最后又复习了以前看过的一个视频教程，才知道是IE的缓存造成的，用了一个小技巧欺骗ie一下，就可以轻松搞定！感觉收获挺大的！

下面是代码：

注册页面reg.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.            <title>login.html</title>
  6.         <script type="text/javascript">
  7.         
  8.             function createXmlHttpReq() {
  9.                 if(window.XMLHttpRequest) {
  10.                     xmlHttpReq = new XMLHttpRequest();
  11.                 
  12.                 } else {
  13.                 
  14.                     xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
  15.                 
  16.                 }
  17.                 return xmlHttpReq;
  18.             
  19.             }
  20.             function processResponse() {
  21.                 if(xmlHttpReq.readyState == 4) {
  22.                     if(xmlHttpReq.status == 200) {
  23.                         var res = xmlHttpReq.responseText;
  24.                         document.getElementById("message").innerHTML=res;               
  25.                     
  26.                     }
  27.                 
  28.                 }
  29.             
  30.             }
  31.             function sendRequest(url) {
  32.                 url = convertUrl(url);
  33.                 createXmlHttpReq();
  34.                 xmlHttpReq.open("get",url,true);
  35.                 xmlHttpReq.onreadystatechange=processResponse;
  36.                 xmlHttpReq.send(null);
  37.                 
  38.             }
  39.             function convertUrl(url) {
  40.                 var timestamp = (new Date()).valueOf();
  41.                 if(url.indexOf("?") >= 0) {
  42.                     urlurl = url + "t=" + timestamp;
  45.                 } else {
  46.                     urlurl = url +"?t=" + timestamp;
  47.                 }
  48.                 return url;
  50.             }
  51.             function checkUsername() {
  52.                 var url = "check.jsp?type=username&username="+document.getElementById("username").value;
  53.                 sendRequest(url);
  54.             
  55.             
  56.             }
  57.             function checkPassword() {
  58.                 var url = "check.jsp?type=password&password="+document.getElementById("password").value;
  59.                 sendRequest(url);           
  60.             
  61.             }
  62.             
  63.             function checkPassword2() {
  64.                 var url = "check.jsp?type=password2&password2="+document.getElementById("password2").value+"passwordpassword="+document.getElementById("password").value;
  65.                 sendRequest(url);   
  66.             
  67.             }
  68.             
  69.             function doSubmit() {
  70.                 
  71.                 var url = "check.jsp?type=submit&username="+document.getElementById("username").value+"password="+document.getElementById("password").value+"password2password2="+document.getElementById("password2").value;
  72.                 sendRequest(url);
  73.             }
  74.         
  75.         
  76.         </script>
  77.     </head>
  79.     <body>
  80.         <h3>
  81.             REGISTER
  82.         </h3>
  83.         <img src="img/ico_loading3.gif" id="loading" style="display:none;"></img>
  84.         <div id="message" style="color:red;">
  85.         </div>
  87.         userName:
  88.         <input id="username" name="username" type="text" size="12" onblur="checkUsername()"/>
  89.         <br />
  90.         password:
  91.         <input id="password" name="password" type="password" size="10" onblur="checkPassword()" />
  92.         <br />
  93.         password2:<input id="password2" name="password" type="password" size="10" onblur="checkPassword2()" />
  94.         <br />
  95.         <button id="submit" onclick="doSubmit()">
  96.             Submit
  97.         </button>
  99.     </body>
  100. </html>

 

服务器端代码：

 

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  4. <%
  7. String type = request.getParameter("type");
  8. if (type.equals("username")) {
  9.     String username = request.getParameter("username");
  11.     if (username != null && username.length() > 0) {
  12.         if (application.getAttribute(username) != null) {
  13.             
  14.             out.println("Username is exist!");
  15.         } else {
  16.             out.println("Username is OK!");
  17.         }
  18.         
  19.         
  20.     } else {
  21.         out.println("Username is need!");
  22.     }
  25. } else if(type.equals("password")) {
  26.     String password = request.getParameter("password");
  27.     if(password != null && password.length() > 0) {
  28.         out.println("password is ok");
  29.     
  30.     } else {
  31.         out.println("Password is need!");
  32.     
  33.     }
  37. } else if (type.equals("password2")) {
  38.     String password2 = request.getParameter("password2");
  39.     if(password2 != null && password2.length() > 0) {
  40.         String password = request.getParameter("password");
  41.         if( password2.equals(password)) {
  42.             out.println("Password2 is OK!");
  43.         } else {
  44.         
  45.             out.println("Password2 is not equal Password!");
  46.         }
  47.     
  48.     } else {
  49.         out.println("Password2 is need!");
  50.     
  51.     }
  54. } else if (type.equals("submit")) {
  56.     boolean regFlag = true;
  57.     
  58.     String username = request.getParameter("username");
  59.     String password = request.getParameter("password");
  60.     String password2 = request.getParameter("password2");
  61.     
  62.     
  63.     if (username != null && username.length() > 0) {        
  64.         
  65.         if (username != null && username.length() > 0) {
  66.             if (application.getAttribute(username) != null) {
  67.                 regFlag = false;
  68.                 out.println("username is exist!");
  69.             } 
  70.         }
  71.                 
  73.     } else {
  74.         out.println("Username is needed!<br/>");
  75.         regFlag = false;
  76.     }
  77.     
  78.     if(password != null && password.length() > 0) {
  79.         
  80.     
  81.     } else {
  82.         out.println("Password is need!<br/>");
  83.         regFlag = false;
  84.     
  85.     }
  86.     if(password2 != null && password2.length() > 0) {
  87.         
  88.         if( password2.equals(password)) {
  89.             
  90.         } else {
  91.         
  92.             out.println("Password2 is not equal Password!<br/>");
  93.             regFlag = false;
  94.         }
  95.     
  96.     } else {
  97.         out.println("Password2 is need!<br/>");
  98.         regFlag = false;
  99.     
  100.     
  101.     }
  102.     if (regFlag == true) {
  103.         application.setAttribute(username,username);            
  104.         
  105.         out.println("Register is  successful!");
  106.         
  107.     
  108.     }
  111. }
  112. %>

 

xutaoran
关注
基于XML简单的登录和注册
06-22
基于xml的简单数据库的登录和注册,全部源代码在这里。 能够实现基本用户登录和注册的功能， 主要是基于xml进行存储和读取，都是学校的一些demo
ajax实例--注册
Android探索之路
08-19 653
校验用户名是否存在 请填写用户注册信息 用户名: 密码: 确认密码: 出生日期: window.onload=function(){ // document.getE
用XMLHttpRequest()对象实现注册页面
qq_40704765的博客
05-08 421
一、在PHP文件中这样写： // print_r($_FILES);//注意：这句一般要注释掉，不然结果报错 //首先上传头像，上传不成功，注册失败 if(!empty($_FILES['pic']['name'])){ $result = move_uploaded_file($_FILES['pic']['tmp_name'],$_FILES['pic']['name']); }
用AJAX实现注册用户即时检测(XMLHttpRequest对象)
weixin_34112030的博客
06-27 313
常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示（当用户注册重名时将返回重新注册），或者稍微人性化一点就是在用户名文本框后添加一个检测按钮，让用户检测后再做注册。 以上操作，对于用户体验方面来说是比较“差劲”的，一个很好的用户体验就是：当用户输入完注册用户名后，Web系统应能即时检查并即时显示，并在检查和显示的同时不影响当前页面的操作。这也就是“异步...
AJAX(异步JavaScript和XML)注册账户实时验证
fei641327936的博客
07-25 280
文章属于入门级水平，重要事情说三遍，入门级，入门级，入门级 原理： 不刷新页面的情况下访问服务器处理数据，并根据数据库的处理结果按你想要的方式对页面做出即使更改。 AJAX发出请求→服务器接收请求，处理请求并将结果返回→AJAX收到结果，按照你设定的方式解析结果并改变页面内容。 登陆验证 Insert title here var xmlHttp;
Ajax通讯原理XMLHttpRequest
12-10
这个例子展示了jQuery如何简化了创建和处理Ajax请求的过程。 ### 总结 Ajax通过XMLHttpRequest对象实现了网页的异步更新，使得用户在等待服务器响应时可以继续浏览页面其他部分。理解XMLHttpRequest的生命周期、...
一个简单的xmlHttpRequest ajax的例子
04-04
在这个“一个简单的xmlHttpRequest AJAX的例子”中，我们将探讨如何使用XMLHttpRequest对象来实现基本的AJAX请求。 首先，我们需要创建一个新的XMLHttpRequest实例。在JavaScript中，这是通过`new XMLHttpRequest()...
一个完整的ajax应用例子
09-25
2. **JavaScript**：Ajax使用JavaScript来创建XMLHttpRequest对象，它是与服务器进行通信的关键。 3. **XML与JSON**：虽然名字中有XML，但现代Ajax应用更倾向于使用JSON（JavaScript Object Notation）作为数据交换...
Ajax核心对象XMLHTTPRequest
05-20
Ajax核心对象XMLHTTPRequest详细参数及例子
Ajax学习总结(一)：Ajax工作流程+XMLHttpRequest对象及它的两个方法+用户名无刷新验证
知且行的博客
05-31 378
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） 用途：快速创建动态网页，不需要刷新整个页面，只需与服务器进行少量的数据交换便可达到属于新的目的，适用于需要局部刷新的用例场景。如：省市联动、股票K线图、地图等。 Ajax工作流程： 1、浏览器创建一个XMLHttpRequest对象，发送HttpRequest请求到服...
使用AJAX完成登录注册,[原创]ajax 实现用户注册功能教程二
weixin_39612297的博客
08-05 445
[原创]ajax 实现用户注册功能教程二','//本教程由本站原创,转载请注明来处作者:www.jquerycn.cn邮箱:drise@163.comQQ:271728967//上面第一个reg.php文件己经做好了,我就来做第二步var xmlHttp = false;function ajaxcreate(){//这里是创建xmlhttpt对像try {xmlHttp = new Active...
用XMLHTTPRequest对象来进行AJAX的异步数据交互实现用户名校验的方法
麦田守望者
12-13 249
废话不多说直接贴源码： 1.新建一个jsp页面 &lt;%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getSch...
JAVAEE 第六课 ----- ch4 ----- Ajax简介&XMLHttpRequest对象的使用&用户登陆用户名实时查询
Jzandth的博客
11-12 315
今天这节课主要学习 什么是Ajax，Ajax有什么作用 通过调用XMLHttpRequest对象实现异步请求 XMLHttpRequest对象调用的步骤 实践：通过异步请求实现对登陆用户的用户名是否在数据库中做实时的查询 这次还是和上次一样，结合晚上实验的内容来回忆今天学习的内容 实验要求： 首先分析完成以上要求的逻辑结构： 由以上分析可知共需要4个文件：首页(index.h...
用XMLHTTPRequest对象进行客户端验证
Wintalen的博客
07-07 1141
表单验证是WEB开发中经常遇到的问题，我们以前常见的做法是：在客户端对表单域进行内容的检查，看是否是满足一定的要求或满足一定的结构，比如：是内容否为空或是否按规定的格式填写了内容等。其实，我们还可以进行更进一步的验证，比如对数据进行实时验证，下面，我们就利用微软提供的XMLHTTPRequest组件来进一步提高表单的验证能力。 在WIN32平台上进行HTTP编程的方式很多，VB和C++程序员可以使
ajax学习之xml数据处理实例（网页注册用户名无刷新检测）
u013303425的专栏
05-08 871
用户注册     用户名字:             用户密码:     电子邮件:                         用户名字:             用户密码:     电子邮件:         var xmlHttpRequest; var myre
XMLHttpRequest实现无刷新验证用户名
热门推荐
Sandy专栏
05-12 1万+
  在用户注册时，我们经常需要检查用户名是否存在，本文就是实现无刷新验证用户名打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web窗体,命名为 Default.aspx代码如下：  无标题页 <!-- var xmlHttp=null; function createXMLHttpRe
Ajax复习(一)：使用XMLHttpRequest对象
BKSW.的博客
03-14 1893
Ajax复习(一)：使用XMLHttpRequest对象 全局刷新和局部刷新 全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面 局部刷新：在浏览器的内部，发起请求，获取数据，改变页面中的部分内容局部刷新的速度更快，可以按需获取数据 是一种局部刷新的新方法，不是一种语言，核心是javascript和xml javascript：负责创建异步对象，发送请求，更新页面的dom对象。 xml：网络中的传输的数据格式。目前使用json替代了xml 创建异步对象 步骤
XMLHttpRequest是怎么实现的
浮游的博客
08-25 634
自从网页中引入了 JavaScript，操作 DOM 树中任意一个节点就变得非常容易了，例如隐藏 / 显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等。不过在 XMLHttpRequest 出现之前，如果服务器数据有更新，依然需要重新刷新整个页面。
掌握Ajax入门：XMLHttpRequest的核心应用
在这个例子中，当用户点击按钮时，`handleButtonPress`函数会被触发，它创建一个新的XMLHttpRequest对象，设置好回调函数`handleResponse`，并使用`open`方法指定请求类型和URL。当服务器响应返回后，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值