AJAX

AJAX用户名有效性验证案例

Ajax的⼯作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

在这里插入图片描述

index.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户名有效性验证</title>
</head>
<script type="text/javascript">
    function test() {
        //发送异步请求
        //1.创建XMLHttpRequest对象
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //非IE
            xmlhttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.打开链接
        var uname = document.getElementById("uname").value;
        xmlhttp.open("get","/testuname?username="+uname,true);
        //3.指定回调函数
        xmlhttp.onreadystatechange = function () {
            //3.1 判断状态
            if (xmlhttp.readyState == 4) {
                //3.2 接收返回的数据
                var responseText = xmlhttp.responseText;
                document.getElementById("rs").innerText = responseText;
            }
        }
        //4.发送数据
        xmlhttp.send();
    }

</script>

<body>
<h1>index.jsp</h1>

username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
</body>
</html>

TestServlet.java


import javax.servlet.servletexception;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/testuname")
public class TestServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException {
         //1.接收参数
        String username = req.getParameter("username");
        resp.setContentType("text/html;charset=utf-8");//防止乱码
        PrintWriter writer = resp.getWriter();
		
		//没有连接数据库 ~
        if("admin".equals(username)){
            writer.println("账户已被注册");
        }else{
            writer.println("账户可用");
        }
    }
}

在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页⾯。
提升站点的性能，这是通过减少从服务器下载的数据量⽽实现的。例如，在Amazon的购物车页⾯，当更新篮子中的⼀项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之⼀。
消除了每次用户输⼊时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出⼀个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

AJAX用户名有效性验证案例

相关推荐