发送异步请求：AJAX

最新推荐文章于 2022-04-29 22:35:59 发布

Dylan6868

最新推荐文章于 2022-04-29 22:35:59 发布

阅读量146

点赞数

文章标签： ajax java 前端

本文链接：https://blog.csdn.net/Dylan6868/article/details/123429226

版权

先引入jar包：javaee-api-7.0.jar

1java的servlet代码

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

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //指定编码方式
        response.setContentType("test/html;charset=utf-8");
        //1接收参数
        String username = request.getParameter("username");
        System.out.println(username);
        //输出到页面的方法
        PrintWriter writer = response.getWriter();
        if ("admin".equals(username)){
            //表示前端输入的用户名和数据库中的用户名重复，不可用
            writer.println("账户已被注册");
        }else {
            writer.println("账户可用");
        }
    }

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

get请求发送AJAX，get

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
</head>
<script type="text/javascript">
    function test() {
        //发送异步请求
        //1创建XMLHttpRequest对象
        var xmlHttp;
        if (window.XMLHttpRequest) {
            //非IE
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            //是IE浏览器
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
        //2打开连接
        var uname = document.getElementById("uname").value;
        //get请求发送AJAX
        xmlHttp.open("get",
        "${pageContext.request.contextPath}/testuname?username="+uname,true);
        /*这里的true表示我通过异步的方式发送请求*/

       
        //3指定回调函数
        xmlHttp.onreadystatechange = function () {
            //3.1判断状态
            if (xmlHttp.readyState == 4) {
                //3.2接收服务器返回的数据
                var responseTest = xmlHttp.responseText;
                document.getElementById("rs").innerText = responseTest;
            }
        }

        //4发送数据
        /*get发送数据的send方法*/
        xmlHttp.send();
    }
</script>
<body>
username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
<%--onblur:失去焦点事件，当文本框失去焦点后，会调用test()方法--%>
<%--span里面放的就是给用户的提示信息--%>


</body>
</html>

post方式发送AJAX

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
</head>
<script type="text/javascript">
    function test() {
        //发送异步请求
        //1创建XMLHttpRequest对象
        var xmlHttp;
        if (window.XMLHttpRequest) {
            //非IE
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            //是IE浏览器
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
        //2打开连接
        var uname = document.getElementById("uname").value;
        
        /*post请求发送AJAX*/
        xmlHttp.open("post", "${pageContext.request.contextPath}/testuname", true);
        /*注意get需要在请求中发送参数，post是在send方法里面发送数据*/

        //3指定回调函数
        xmlHttp.onreadystatechange = function () {
            //3.1判断状态
            if (xmlHttp.readyState == 4) {
                //3.2接收服务器返回的数据
                var responseTest = xmlHttp.responseText;
                document.getElementById("rs").innerText = responseTest;
            }
        }

        //4发送数据
        /* post发送数据的请求信息和send方法*/
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
        xmlHttp.send("username=" + uname);

    }
</script>
<body>
username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
<%--onblur:失去焦点事件，当文本框失去焦点后，会调用test()方法--%>
<%--span里面放的就是给用户的提示信息--%>


</body>
</html>

jquery实现AJAX

需要先导入jquery的js文件：jquery-1.8.0.min.js

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#uname").blur(function () {
            //1获得value值
            var uname = $(this).val();
            //2发送请求
            /*发送请求的第一种方法*/
            /*$.ajax({
                url:"${pageContext.request.contextPath}/testuname",
                data:"username="+uname,
                type:"post",
                dataType:"text",
                success:function (rs) {
                    $("#rs").html(rs);
                }
            });

            */
            /*发送请求的第2.1种方式 get请求，比第一种方法简单*/
           /* $.get("${pageContext.request.contextPath}/testuname","username="+uname,function (rs) {
                $("#rs").html(rs);
            })*/
            /*发送请求的第2.2种方式 post请求，比第一种方法简单*/
            $.post("${pageContext.request.contextPath}/testuname","username="+uname,function (rs) {
                $("#rs").html(rs);
            })
        })
    })
</script>
<body>
<h1>jquery_ajax.jsp</h1>
username:<input type="text" id="uname"><span id="rs"></span>
<%--要使用jquery就要添加js文件：jquery-1.8.0.min.js--%>

</body>
</html>

Dylan6868

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发送异步请求：AJAX

先引入jar包：javaee-api-7.0.jar1java的servlet代码@WebServlet("/testuname")public class TestServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
复制链接

扫一扫