用户注册与异步刷新

最新推荐文章于 2023-06-27 16:26:45 发布

MrWangf

最新推荐文章于 2023-06-27 16:26:45 发布

阅读量890

点赞数 2

文章标签：注册异步刷新 ajax 异步

本文链接：https://blog.csdn.net/mrwangf/article/details/77624275

版权

所谓异步刷新是指,前端页面与后端服务器交流.获取后端服务器传来的数据,只需要在页面局部刷新,而不需要整体页面刷新.
异步刷新在用户注册上是很常见的,也是十分实用的.诸位是否有遇到这样的情况,辛辛苦苦注册一个账户,最后点击完提交后,页面刷新反馈该账号已被注册,请重新完成注册信息,请问各位的内心是怎样的?不仅如此,整体的页面刷新,给用户的体验是很不友好的,加载时间会变长,用户会失去兴趣和耐心.

这么一来,异步刷新就显得很有必要了.当用户的账号填写完毕后,账号输入框失去焦点,使用异步刷新与后台交流,获取来自后台的反馈信息,如果该账号已被注册,就会立刻在页面显示提示信息.这样的注册,不是更加友好吗?

代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/myajax.js"></script>
</head>
<body>
	<form>
		<div id="msg"></div>
		<input type="text" name="username" id="username" οnblur="checkName(this.value)"/>
		<button type="button" οnclick="checkName()">检查账号是否可用</button>
	</form>
	<script>
	function checkName(name){
		ajaxGet("check?uname="+name, function(data){
			var msgBox = document.getElementById('msg');
			if(data == -1){
				//账号不可用
				msgBox.style.color='#f00';
				msgBox.innerHTML='账号已经被注册';
			}else{
				//账号可用
				msgBox.style.color='#0f0';
				msgBox.innerHTML='账号可以使用';
			}
		});
	}
/*	
		//声明XMLHttpRequest
		var xhr;
		//判断浏览器获取XMLHttpRequest
		function getXHR(){
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				//IE5 IE6
				xhr = new ActiveXObject('microsoft.XMLHTTP');
			}
		}
		
		function checkName(){
			var input_name = document.getElementById('username');
			var name = input_name.value;
			//location.href='check?uname='+name;
			getXHR();
			//打开连接
			xhr.open('get','check?uname='+name,true);
			//发送请求
			xhr.send(null);
			//当请求状态发生改变时触发回调函数
			xhr.onreadystatechange=function(){
				if(xhr.readyState == 4 && xhr.status == 200){
					//获取服务端的响应数据
					var msg = xhr.responseText;
					var msgBox = document.getElementById('msg');
					if(msg == -1){
						//账号不可用
						msgBox.style.color='#f00';
						msgBox.innerHTML='账号已经被注册';
					}else{
						//账号可用
						msgBox.style.color='#0f0';
						msgBox.innerHTML='账号可以使用';
					}
				}
			}
			
		}
*/			
	</script>
</body>
</html>

其中ajaxGet是封装了异步刷新的方法.具体代码如下:


//封装一个用于发送get请求的ajax函数
//参数1:需要请求的服务器地址
//参数2:需要执行的回调函数
function ajaxGet(url,callback){
	var xhr;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject('microsoft.XMLHTTP');
	}
	//打开连接
	xhr.open('get',url,true);
	//发送请求
	xhr.send();
	//当请求状态发生改变时触发回调函数
	xhr.onreadystatechange=function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			var data = xhr.responseText;
			//data = JSON.parse(data);
			//闭包
			callback(data);	
		}
	}
}

其中,"check?uname="+name,访问的是一个Servlet类.具体代码:

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class CheckNameServlet
 */
@WebServlet("/check")
public class CheckNameServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
  
    public CheckNameServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name = request.getParameter("uname");
		
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		
		if("admin".equals(name) || "softeem".equals(name)){
			out.print(-1);
		}else{
			out.print(1);
		}
		out.flush();
	}

}

异步刷新的用处不仅仅限于注册,很多地方都可以用到,比如:分页,还有一些搜索等都

可以使用异步刷新.

有时候,访问的页面一刷新,整个页面都是空白,这是怎样的体验?或许异步刷新是个不错的选择?

MrWangf

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用户注册与异步刷新

所谓异步刷新是指,前台页面与后台服务器交流.获取后台服务器传来的信息,只需要在局部刷新,而不需要整体页面刷新.异步刷新在用户注册上是很常见的,也是十分实用的.有没有遇到这样的情况,辛辛苦苦注册一个账户,最后点击完提交后,页面刷新反馈该账号已被注册,请重新注册信息,请问用户的内心是怎样的?那么异步刷新就显得很有必要了.当用户的账号填写完毕后,账号输入框失去焦点,使用异步刷新与后台交流,获取来
复制链接

扫一扫