所谓异步刷新是指,前端页面与后端服务器交流.获取后端服务器传来的数据,只需要在页面局部刷新,而不需要整体页面刷新.
异步刷新在用户注册上是很常见的,也是十分实用的.诸位是否有遇到这样的情况,辛辛苦苦注册一个账户,最后点击完提交后,页面刷新反馈该账号已被注册,请重新完成注册信息,请问各位的内心是怎样的?不仅如此,整体的页面刷新,给用户的体验是很不友好的,加载时间会变长,用户会失去兴趣和耐心.
这么一来,异步刷新就显得很有必要了.当用户的账号填写完毕后,账号输入框失去焦点,使用异步刷新与后台交流,获取来自后台的反馈信息,如果该账号已被注册,就会立刻在页面显示提示信息.这样的注册,不是更加友好吗?
代码如下:
<%@ 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>
//封装一个用于发送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();
}
}
异步刷新的用处不仅仅限于注册,很多地方都可以用到,比如:分页,还有一些搜索等都
可以使用异步刷新.
有时候,访问的页面一刷新,整个页面都是空白,这是怎样的体验?或许异步刷新是个不错的选择?