Ajax实现：原生JS和JQ的4种使用方式

本文最后更新于：2023年11月9日 晚上

Ajax的作用

Ajax 是一种在无需重新加载整个网页的情况下，能够更新网页部分内容的技术，实现页面和 web 服务器之间数据的异步传输。
相当于只刷新页面的一部分而并不刷新整个页面(局部刷新而并非全局刷新)。

冷知识：Ajax全称 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

这里将一个简单的Ajax案例：
获取input输入框中的值并将其以Ajax异步请求的方式请求请求后台，再由后台响应我们所需的数据放到div中(div中无内容)
从而实现请求与响应，显示数据，并且请求为异步请求(Ajax)不刷新整个页面(局部刷新)
方式呢就是这么个方式，具体使用根据开发中的应用场景(比如：评论，分页，搜索)

JS(javascript)方式编写Ajax：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
</head>
<body>
<center>
    <%--JS方式的Ajax--%>
    <div id="div"></div>
    <br/>
    输入：<input type="text" id="info">
    <input type="button" value="提交" onclick="ajax()">

</center>
</body>
<script type="text/javascript">

    var xmlHttpRequest;

    function ajax() {
        var info = document.getElementById("info").value;

/*注：在JS中，如果创建对象使用var变量接收，代表只在该函数(function)中生效(局部变量)，不使用var接收则代表全局(全局变量)
        在其他地方使用对象时前提是该函数(function)要提前执行(相当于赋值)*/
        /*1.建立XMLHttpRequest对象：通过ajax异步方式 请求服务端 */
        xmlHttpRequest = new XMLHttpRequest;

 /*2.与服务器端交互的基本信息：open(方法名(提交方式get|post),服务器地址,true((true（异步）或 false（同步）)) :与服务端建立连接*/
        // xmlHttpRequest.open("get","ajax/ajaxDemo1?info="+info,true);
        xmlHttpRequest.open("post", "ajax/ajaxDemo", true);

        /*3.设置头信息：setRequestHeader(header,value):
                get:不需要设置此方法
                post:需要设置：
                    a.如果请求元素中包含了 文件上传：setRequestHeader("Content-Type","multipart/form-data");
                    b.不包含了 文件上传：setRequestHeader("Content-Type","application/x-www-form-urlencoded")*/
        xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        /*4.传入参数：xmlHttpRequest.send()
                   get:	send(null)
                  post:	send(参数值)*/
        // xmlHttpRequest.send(null);
        xmlHttpRequest.send("info=" + info);
        /*注：什么是回调函数：例如有 a()，b()，c()三个方法，b()是a()的回调函数，如果b()执行完则应该执行a()，而不是c()*/
        /*5.注册回调函数(获取服务器响应数据)*/
        xmlHttpRequest.onreadystatechange = callBack;
    }

    function callBack() {
        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
            /*responseText：响应格式为String
               responseXML：相应格式为XML*/
            /*获取后端响应的信息(放到div中)*/
            var data = xmlHttpRequest.responseText;
            document.getElementById("div").innerHTML = data;
        }
    }

    /*笔记：xmlHttpRequest.readyState ：请求状态 只有4为完全成功
     　　0：请求未初始化(还没有调用 open())
     　　1：请求已经建立，但是还没有发送（还没有调用 send()）
     　　2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
     　　3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
     　　4：响应已完成；您可以获取并使用服务器的响应了。
        xmlHttpRequest.status：响应状态(相当于于http响应状态码，太多则不过多说明) 只有200为完全成功*/
</script>
</html>

JQ(jquery)方式使用Ajax：

看了上面JS的方式编写Ajax，写起来的确是有些繁琐
接下来使用jquery方式编写4种类似的Ajax，相比JS方式简便很多
$.ajax()方法中属性详解请参考： https://www.cnblogs.com/tylerdonet/p/3520862.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Jquery -Ajax</title>
</head>
<body>
<center>
    <%--JQ方式的ajax--%>
    <div id="div">ajax：</div>
    <br/>
    输入：<input type="text" id="info">
    <input type="button" value="提交" onclick="ajax()">

</center>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    function ajax() {
        //var info = document.getElementById("info").value;
        var info = $("#info").val();

        $.ajax({
            /* url：请求地址(可以带参数：url:    "ajax/ajaxDemo?info="+info,)*/
            url:    "ajax/ajaxDemo",
            /*async：默认设置为true，代表为异步请求   false则为同步请求*/
            async:  true,
            /*type：请求方式*/
            type:   "get",
            /*data：请求参数(和js的send方法区别：get和post都可以直接填入  请求参数   名称+值*/
            data:   "info=" + info,
            /*dataType：服务器响应类型(例如text(纯文本)、json(json数据)、xml(xml文档))*/
            dataType:   "text",
            /*success：请求成功后调用的回调函数(由服务器返回，并根据dataType参数进行处理后的数据)*/
            success: function (data) {
                $("#div").html(data);
            },
            /*error：请求失败时被调用的函数*/
            error: function () {
                $("#div").html("服务器响应失败!");
            }
        });


/*--------------------------------------------------------------------------------------------------------*/
        /*$.get()不写参数名，但必须按照参数的顺序进行配置*/
        $.get(
            /*请求地址*/
             "ajax/ajaxDemo",
            /*请求参数   名称+值*/
            "info=" + info,
            /*回调函数*/
            function (data){
                $("#div").html(data);
            },
            /*服务器响应类型*/
        "text"
        );


/*--------------------------------------------------------------------------------------------------------*/
        /*$.post()不写参数名，但必须按照参数的顺序进行配置*/
        $.post(
            /*请求地址*/
            "ajax/ajaxDemo",
           /*请求参数   名称+值*/
            "info=" + info,
            /*回调函数*/
            function (data){
                $("#div").html(data);
                if(data == null || data == ""){
                    alert("服务器响应为null");
                }
            },
            /*服务器响应类型*/
            "text"
        );


/*--------------------------------------------------------------------------------------------------------*/
        /*load:将服务端的返回值  直接加载到$(xxx)所选择的元素中 例如案例的div*/
        $("#div").load(
            /*请求地址*/
            "ajax/ajaxDemo",
            /*请求参数   名称+值*/
            "info="+info
        );
    }
</script>
</html>

本篇文章还缺少一个重要的知识点、也是和Ajax挂钩的，那就是JSON数据格式，本人也正在学习将JSON类型数据请求到后台再响应JSON数据格式给前台。到时候我会在发一篇文章介绍JSON或者到时候会修改本篇文章将JSON知识点补上。

爱你所爱，行你所行，听从你心，无问西东。
前端
#javascript #jquery
Ajax实现：原生JS和JQ的4种使用方式
http://example.com/2020/04/11/Ajax实现：原生JS和JQ的4种使用方式/
作者
阿波~
发布于
2020年4月11日
更新于
2023年11月9日
许可协议