2021-03-29

AJAX-JQuery实现方式

1.AJAX基本概念

ASynchronous Javascript And XML 异步的JavaScript和XML
异步和同步：客户端和服务器端相互通信的基础上
- 异步：客户端必须等待服务器端的响应。在等待期间客户端不能做其他操作
- 同步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网站的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

2.实现方式

2.1原生的JS实现方式

html中script实现步骤

创建XMLHttpRequest对象，用于在后台和服务器交换数据

建立连接

发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input type="text"><!--当发送异步请求时客户端输入框可以正常输入，同步请求时要等到服务器处理完才可以操作输入框-->
<span id="myDiv">hxxxx</span>

<script>
    //定义方法

    function fun() {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        /*建立连接
        *  参数：
        *       1.请求方式：GET、POST
        *           get请求参数在URL后面拼接，send方法为空参
        *           post方式请求参数在send方法中定义
        *                   xmlhttp.send("username=hxx&id=1");
        *       2.请求的URL
        *       3.同步或异步请求：true（异步） false（同步）
        * */
        xmlhttp.open("GET","ajaxServlet?username=hxx",true);
        //发送请求
        xmlhttp.send();
        //响应

        xmlhttp.onreadystatechange=function()
        {
            //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerText=xmlhttp.responseText;
                alert(xmlhttp.responseText)
            }
        }
    }
</script>
</body>
</html>

服务器资源ajaxServlet接收参数

@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收参数
        String username = request.getParameter("username");
        //假设处理时间5秒，观察客户端的输入框是否可以输入数据:异步可以、同步不可以
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //打印参数
        System.out.println(username);
        //响应
        response.getWriter().write("hello:"+username);
    }

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

2.2Jquery实现方式

$.ajax()
- 语法：$.ajax(url,[settings]) ，一般情况下写成 $.ajax({键值对})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JqueryAjax</title>
    <script src="js/jquery-3.5.1.min.js"> </script>
    <script>
        function fun() {
            //使用$.ajax()发送异步请求
            $.ajax(
                {
                    url: "ajaxServlet", //请求路径
                    type: "POST", //请求方式
                    data:{ "username":"hxx","age":"20"},//传递的数据
                    success:function (Data) {//响应成功后的回调函数，Data是服务器的响应数据
                        alert(Data);
                    },
                    error:function () {
                        alert("出错啦");//表示如果请求响应出现错误，会执行此回调函数
                    },
                    data_type:"text"//表示接收到的响应数据的格式
                }
            );
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input type="text"><!--当发送异步请求时客户端输入框可以正常输入，同步请求时要等到服务器处理完才可以操作输入框-->
</body>
</html>

$.get()

语法：$.get(url,[data],[callback],[type]) 请求路径、请求参数、回调函数、响应结果的类型

<script>
    //定义方法
    function fun() {
       $.get("ajaxServlet",{"username":"hxx","age":"20"},function (data) {
           alert(data);
       },"text");
    }
</script>

$.post()

<script>
    //定义方法
    function fun() {
       $.get("ajaxServlet",{"username":"hxx","age":"20"},function (data) {
           alert(data);
       },"text");
    }
</script>