AJax

一、概念
AJax的全称为ASynchronous JavaScript And XML(异步的JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。	
二、实现
1、原生的JS实现方式
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>原生js实现ajax</title>
        <script>
            //原生js实现ajax
            function fun() {
                //1. 获取核心对象
                var xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                //2.建立链接
                xhttp.open("GET", "ajaxServlet?username=tom", true);

                //3. 发送请求
                xhttp.send();

                //4. 获取服务器的响应结果
                //当xhttp对象的readystate(响应状态码)发生改变时,出发onreadystatechange事件,调用指定的函数
                xhttp.onreadystatechange = function() {
                    //判断xhttp的readystate是否为4( 请求已完成且响应已就绪),然后再判断status(服务器的响应状态)是否为200(服务器响应成功)
                    if (this.readyState == 4 && this.status == 200) {
                        //获取服务器的响应结果
                        let responseText = xhttp.responseText;
                        window.alert(responseText)
                    }
                };
            }
        </script>
    </head>
    <body>
        <input type="button" value="发送ajax请求" onclick="fun();">
        <input type="text" value="">
    </body>
</html>
2、JQeury实现方式 --> $.ajax()
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery实现ajax</title>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script>
            function fun() {
                $.ajax({
                    type:"POST",
                    url:"ajaxServlet1",
                    data:{"username":"tom"},   //请求参数
                    /**
                     *  指定从服务器返回的数据的数据格式必须为JSON格式(说白了就是客户端告诉服务器:服务器,你返
                     *  回给我(客户端)的数据的数据格式,必须是JSON形式的,不然我(客户端)在解析时会出错)
                     */
                    dataType:"JSON",
                    success:function (data) {   //请求响应成功后的回调函数
                        window.alert(data);
                    },
                    error:function () {     //请求响应失败后的回调函数
                        window.alert("请求响应失败")
                    }
                })
            }
        </script>
    </head>
    <body>
        <input type="button" value="发送ajax请求" onclick="fun();">
        <input type="text" value="">
    </body>
</html>
3、JQeury实现方式 --> $.get()
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery实现ajax</title>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script>
            function fun() {
                $.get("ajaxServlet",{"username":"tom"},function (data) {
                   window.alert(data);
                },"json");
            }
        </script>
    </head>

    <body>
        <input type="button" value="发送ajax请求" onclick="fun();">
        <input type="text" value="">
    </body>
</html>
4、JQeury实现方式 --> $.post()
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery实现ajax</title>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script>
            function fun() {
                $.post("ajaxServlet",{"username":"tom"},function (data) {
                   window.alert(data);
                },"JSON");
            }
        </script>
    </head>

    <body>
        <input type="button" value="发送ajax请求" onclick="fun();">
        <input type="text" value="">
    </body>
</html>

你可能感兴趣的:(AJax)