ajax异步请求简单实现

最新推荐文章于 2023-04-26 13:44:28 发布

Jerome.Liao

最新推荐文章于 2023-04-26 13:44:28 发布

阅读量309

点赞数

分类专栏： java ajax

本文链接：https://blog.csdn.net/weixin_42420792/article/details/105186990

版权

java 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

一、ajax基础

1.1、ajax的概念

AJAX:Asynchronous JavaScript and XML 异步的 JavaScript 和 XML；本质是JavaScript语言中一种技术，它包含了html,css,JavaScript,xml,json等。
AJAX 是一种用于创建快速动态网页的技术。

1.2、AJAX的作用

实现与用户交互；
实现页面局部刷新；
节省带宽,从而提高请求效率。

1.3、AJAX的工作原理图

在这里插入图片描述

二、Controller注解方式

注意，@Controller + @ResponseBody 相当于 @RestController，返回值不走视图解析器。
1、Controller

 /**
     * 验证用户是否存在
     * @param userName
     * @return
     */
//    @GetMapping("CheckUserName")
    @PostMapping("CheckUserName")
    @ResponseBody
    public String CheckUserName(@RequestParam String userName){
        Users users =  usersService.queryByUsername(userName);

        if(users != null){
            return "exists";
        }else{
            return "not exist";
        }
    }

2、register.jsp中的JavaScript

<script>
        function checkUser() {
            var userName = document.getElementById("userName").value.trim();
            var ajax1;
            //  1.创建XMLHttpRequest对象
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                ajax1 = new XMLHttpRequest();
            }else {
                // IE6, IE5 浏览器执行代码
                ajax1 = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //  2.  设置onreadystatechange事件的回调
            ajax1.onreadystatechange = function () {
                if(ajax1.readyState == 4 && ajax1.status == 200){
                    if(ajax1.responseText == "exists"){
                        document.getElementById("msg").innerText = "该用户名已存在，请重命名";
                        document.getElementById("msg").style.color="red";
                    }else{
                        document.getElementById("msg").innerText = "该用户名可以使用";
                        document.getElementById("msg").style.color="green";
                    }
                }
            }
            //  3.open();
            //  4.  send()发送请求
            // ajax1.open("GET", "CheckUserName?userName=" + userName, true);
            // ajax1.send();
            ajax1.open("POST", "CheckUserName", true);

            ajax1.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            ajax1.send("userName=" + userName);
        }
    </script>

3、register.jsp中的html

<input type="text" placeholder="账号(用户名)" name="userName" id="userName" onblur="checkUser()" required=""><span id="msg"></span>

三、传统servlet方式

1、servlet

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.util.Arrays;
import java.util.List;

@WebServlet(name = "CheckUserServlet", urlPatterns = "/CheckUserServlet")
public class CheckUserServlet extends HttpServlet {
    List<String> users = Arrays.asList("suwukong", "zhubajie", "tangtang", "shaseng");

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        if(users.contains(username)){
            response.getWriter().write("exists");
        }else{
            response.getWriter().write("not exist");
        }
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

2、register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index ajax</title>
</head>
<body>
<h1>this is ajax index page.</h1>

<input type="button" value="ajax发送get请求" onclick="sendGetAjax()">
<input type="button" value="ajax发送post请求" onclick="sendPostAjax()">
<script>
    function sendGetAjax() {

        var ajax1;

        //  1.创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            ajax1 = new XMLHttpRequest();
        }else {
            // IE6, IE5 浏览器执行代码
            ajax1 = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //  2.  设置onreadystatechange的回调函数
        ajax1.onreadystatechange=function(){
            //console.log(ajax1.readyState)

            /**
             *  innerText直接将文本内容显示，不解析各种html标签
             *  innerHTML将文本内容进行显示，带有标签的部分会自动解析
              */

            if(ajax1.readyState == 4 && ajax1.status == 200){
                //document.getElementById("imgs").innerHTML= ajax1.responseText;
                alert(ajax1.responseText)
            }
        }

        //  3. open()打开连接
        ajax1.open("GET", "AjaxServlet?username=zhangsan&password=888888", true);

        //  4. 发送请求
        ajax1.send();

        //alert(ajax1);
    }

    function sendPostAjax() {
        var ajax1;

        //  1.创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            ajax1= new XMLHttpRequest();
        }else {
            // IE6, IE5 浏览器执行代码
            ajax1= new ActiveXObject("Microsoft.XMLHTTP");
        }

        //  2.  设置onreadystatechange的回调函数
        ajax1.onreadystatechange=function(){
            //console.log(ajax1.readyState)

            /**
             *  innerText直接将文本内容显示，不解析各种html标签
             *  innerHTML将文本内容进行显示，带有标签的部分会自动解析
             */

            if(ajax1.readyState == 4 && ajax1.status == 200){
                //document.getElementById("imgs").innerHTML= ajax1.responseText;
                alert(ajax1.responseText)
            }
        }

        //  3. open()打开连接
        ajax1.open("POST", "AjaxServlet", true);
        ajax1.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //  4. 发送请求
        ajax1.send("username=zhangsan&password=123456");
        //alert(ajax1);
    }
</script>
</body>
</html>

Jerome.Liao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax异步请求简单实现

一、Controller注解方式注意，@Controller + @ResponseBody 相当于 @RestController，返回值不走视图解析器。1、Controller /** * 验证用户是否存在 * @param userName * @return */// @GetMapping("CheckUserName") ...
复制链接

扫一扫