Ajax

最新推荐文章于 2022-11-10 20:20:46 发布

Reverse train.

最新推荐文章于 2022-11-10 20:20:46 发布

阅读量67

点赞数

分类专栏：基础知识

本文链接：https://blog.csdn.net/xylyaya/article/details/104263040

版权

基础知识专栏收录该内容

32 篇文章 0 订阅

订阅专栏

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

异步提交，局部刷新。

1.同步交互

客户端发出一个请求后，需等待服务器响应结束后才能发出第二个请求。

2.异步交互

客户端发出一个请求后，无需等待服务器响应结束就可以发出第二个请求。
浏览器页面没有刷新，只是刷新页面中局部位置，性能更高，使用更广。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script type="text/javascript">
        var xhr;
        function checkName() {
            //获取文本值
            var value = document.getElementById("uname").value;
            
            //非空判断
            if(value==""||value==null){
                document.getElementById("span_name").innerHTML="× 用户名不能为空"
            }else {
                //创建XMLHttpRequset对象
                if(window.ActiveXObject){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }else {
                    xhr = new XMLHttpRequest();
                }
                
                //与服务器建立连接
                xhr.open("get","servlet/AjaxServlet?uname="+value,true);

                //执行回调函数
                xhr.onreadystatechange=process;

                //发送数据
                xhr.send(null);
            }
        }
        //进行数值接收
        function process() {
            //就绪状态
            if(xhr.readyState==4){
                //状态码
                if(xhr.status==200){
                    var text = xhr.responseText;
                    document.getElementById("span_name").innerHTML=text;
                }
            }
        }
    </script>
</head>
<body>
<form>
    <p>
        用户名：<input type="text" id="uname" name="uname" placeholder="请输入用户名" onblur="checkName()"/><span id="span_name"></span>
    </p>
    <p>
        密码：<input type="password" name="pwd" placeholder="请输入密码" />
    </p>
    <p>
        <input type="submit" value="注册" />
    </p>
</form>
</body>
</html>

@WebServlet(urlPatterns = "/servlet/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //浏览器编码格式
        resp.setContentType("text/html;charset=utf-8");
        //接收数据
        String uname = req.getParameter("uname");
        
        boolean flag=false;
        if(uname.equals("gakki")){
            flag=true;
        }

        PrintWriter out = resp.getWriter();
        if(flag){
           out.println("用户名已存在");
        }else {
            out.println("用户名可用");
        }
    }
}