AJax

最新推荐文章于 2024-02-17 13:45:00 发布

黑熊扑通

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量115

点赞数

分类专栏： AJax 文章标签： AJax

本文链接：https://blog.csdn.net/qq_36025972/article/details/102319133

版权

AJax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、概念

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>

黑熊扑通

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJax

一、概念AJax的全称为ASynchronous JavaScript And XML（异步的JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。二、实现1、原生的JS实现方式<html lang="en"> <head> <meta charset="UTF-8"> ...
复制链接

扫一扫