原生Ajax实现异步通信

最新推荐文章于 2024-07-25 12:41:07 发布

LJ君

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量73

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/qq_45068048/article/details/109245179

版权

客户端：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="#" method="post">
    用户名： <input type="text" name="username" id="username" onblur="onChang()">
    <span id="spanUser"></span>
</form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/ajax/jquery/jquery-1.12.4.js"></script>
<%--<script src="jquery\jquery-1.12.4.js"></script>--%>
<script>
    var xml=null;
    function onChang() {
        var username=$("#username").val();
        if (username=="") {
            $("#spanUser").html("<font color='red'>用户名不可以为空</font>")
        }
        else
        {
            //js实现异步请求
            // 1、创建ajax异步请求的核心对象 xmlhttprequest
            xml=createXmlHttpRequest();
            // 2、设置请求参数
             xml.open("post","/java92web/checkServlet")// xml.open("get","/java92web/checkServlet?name="+username)
            xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 3、发送请求
            var data="name="+username;
            xml.send(data);
            // 4、设置回调函数事件
            xml.onreadystatechange=callback;
        }
    }
    function callback() {
        if (xml.readyState==4&&xml.status==200) {
            //获取服务器相应内容
            var data=xml.responseText;
            if (data=="ok") {
                $("#spanUser").html("<font color='red'>用户名已占用</font>")
            }else
            {
                $("#spanUser").html("<font color='green'>√</font>")
            }

        }
    }
    function createXmlHttpRequest() {
        if(window.XMLHttpRequest)
        {
            //标准浏览器
            return new XMLHttpRequest();
        }
        else {
            //低版本浏览器；
            return new ActiveXObject('Microsoft.XMLHTTP');
        }

    }
</script>
</html>

服务器代码：

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("/checkServlet")
public class checkServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String name=request.getParameter("name");
        if (name.equals("admin")) {
            out.print("ok");
        }
        else {
            out.print("filed");
        }
    }

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

LJ君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生Ajax实现异步通信

客户端：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title></head><body><form action="#" method="post"> 用户名： <input type="text" name="username" id="
复制链接

扫一扫