Ajax

Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术

增加B/S的体验性
B/S：未来的主流，并且会爆发式的持续增长；

产品链：H5+网页+客户端+手机端(Android，IOS)+小程序

伪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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪造Ajax</title>
</head>
<body>

<script type="application/javascript">
    window.onload = function f(){
        var myDate = new Date();
        document.getElementById("currentTime").innerText = myDate.getTime();
    }

    function loadPage(){
        var targetURL = document.getElementById("url").value;
        console.log(targetURL);
        document.getElementById("iframePosition").src = targetURL;
    }
</script>

<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input type="text" id="url" value="">
        <input type="button" value="提交" onclick="loadPage()">
    </p>
</div>

<button>
    <h3>
        加载页面的位置:
    </h3>
    <iframe style="width:1000px;height: 500px" id="iframePosition">

    </iframe>
</button>

</body>
</html>

通过这样一个html 可以实现一个伪Ajax

网页没有刷新 只需要提交不同的url 就可以显示页面

虚假的Ajax

演示

ajax需要导入jQuery

ajax基本参数：

  • url 待载入页面的URL地址

  • data 待发送key/value参数

  • success 载入成功时回调函数

  • dataType 返回内容格式 xml,json,scrpt,text,html

首先需要写一个AjaxController

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
package com.ceit.controller;

import com.ceit.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    //第一种方式，服务器返回一个字符串，直接使用response
    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse httpServletResponse) throws IOException {
        if("admin".equals(name)){
            httpServletResponse.getWriter().println("ture");
        }else{
            httpServletResponse.getWriter().println("false");
        }
    }
  }
}

再编写对应的前端界面ajax.jsp
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
<%--
  Created by IntelliJ IDEA.
  User: songf
  Date: 2021/3/9
  Time: 22:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
<%--    需要导入jQuery--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js"></script>
</head>
<body>

<script type="application/javascript">
    function a1(){
        //ajax默认是GET请求
        <%--$.ajax({--%>
        <%--    url:"${pageContext.request.contextPath}/ajax/a1",--%>
        <%--    data:{"name":$("#txtName").val()},--%>
        <%--    success:function (data,status) {--%>
        <%--        alert(data);--%>
        <%--        alert(status);--%>
        <%--    }--%>
        <%--});--%>

        // ajax post请求
        $.post({
            url:"${pageContext.request.contextPath}/ajax/a1",
            data:{"name":$("#txtName").val()},
            success:function (data,status) {
                alert(data);
                alert(status);
            }
        });

        //将文本框输入的值
        //发给服务器
        //接收服务器返回的数据
    }
</script>
<%--失去焦点产生事件--%>
用户名:
    <input type="text" id="txtName" onblur="a1()" />
</body>
</html>

运行结果
1
2
3
鼠标移上去 失去焦点后  产生事件 弹出false 紧跟着弹出success

输入admin 鼠标失去焦点后  产生事件  弹出ture 紧跟着弹出success

还可以实现一个表格的ajax更新
修改Controller

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
package com.ceit.controller;

import com.ceit.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    //第一种方式，服务器返回一个字符串，直接使用response
    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse httpServletResponse) throws IOException {
        if("admin".equals(name)){
            httpServletResponse.getWriter().println("ture");
        }else{
            httpServletResponse.getWriter().println("false");
        }
    }

    @RequestMapping("/a2")
    @ResponseBody
    public List<User> ajax2(){
        ArrayList<User> list = new ArrayList<User>();

        User user1 = new User("弔弔1",3,"男");
        User user2 = new User("弔弔2",3,"男");
        User user3 = new User("弔弔3",3,"男");
        User user4 = new User("弔弔4",3,"男");
        User user5 = new User("弔弔5",3,"男");

        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);
        list.add(user5);

        return list; //由于加了@ResponseBody 他会返回一个字符串
    }
}

对应的ajax2.jsp
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
<%--
  Created by IntelliJ IDEA.
  User: songf
  Date: 2021/3/9
  Time: 23:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <input type="button" id="btn" value="获取数据"/>
    <table width="80%" align="center">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tbody id="content">

        </tbody>
    </table>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
           $("#btn").click(function () {
               $.post("${pageContext.request.contextPath}/ajax/a2",function (data) {
                   console.log(data);
                   var html = ""
                   for(var i=0;i<data.length;i++){
                       html += "<tr>" +
                       "<td>"+data[i].name+"</td>"+
                       "<td>"+data[i].age+"</td>"+
                       "<td>"+data[i].sex+"</td>"+
                       "</tr>"
                   }
                   $("#content").html(html);
               })
           })
        });
    </script>
</body>
</html>

点击获取数据后，对应的地方会更新数据，这个地方由于是举例，没有使用数据库，所以修改的时候比较麻烦，如果连接数据库，数据库中对应的数据更新时，ajax2.jsp中对应的值也会跟着改变而不用刷新界面

还有常见的验证用户名和密码的操作
修改Controller

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
package com.ceit.controller;

import com.ceit.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    //第一种方式，服务器返回一个字符串，直接使用response
    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse httpServletResponse) throws IOException {
        if("admin".equals(name)){
            httpServletResponse.getWriter().println("ture");
        }else{
            httpServletResponse.getWriter().println("false");
        }
    }

    @RequestMapping("/a2")
    @ResponseBody
    public List<User> ajax2(){
        ArrayList<User> list = new ArrayList<User>();

        User user1 = new User("弔弔1",3,"男");
        User user2 = new User("弔弔2",3,"男");
        User user3 = new User("弔弔3",3,"男");
        User user4 = new User("弔弔4",3,"男");
        User user5 = new User("弔弔5",3,"男");

        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);
        list.add(user5);

        return list; //由于加了@ResponseBody 他会返回一个字符串
    }

    @RequestMapping("/a3")
    @ResponseBody
    public String ajax3(String name,String pwd){
        String msg = "";
        if(name!=null){
            if("admin".equals(name)){
                msg = "ok";
            }else{
                msg = "用户名有误";
            }
        }

        if(pwd!=null){
            if("123456".equals(pwd)){
                msg = "ok";
            }else{
                msg = "密码有误";
            }
        }
        return msg;
    }
}

对应的ajax3.jsp
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
<%--
  Created by IntelliJ IDEA.
  User: songf
  Date: 2021/3/10
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js"></script>

    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a3",
                data:{"name":$("#name").val()},
                success:function (data) {
                    if(data.toString()=="ok"){ //信息核对成功
                        $('#userInfo').css("color","green");
                    }else{
                        $('#userInfo').css("color","red");
                    }
                    $("#userInfo").html(data)
                }
            })
        }
        function a2() {
            $.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("#pwd").val()},function (data) {
                if(data.toString()=="ok"){ //信息核对成功
                    $('#pwdInfo').css("color","green");
                }else{
                    $('#pwdInfo').css("color","red");
                }
                $("#pwdInfo").html(data)
            })
        }
    </script>
</head>
<body>
<p>
    用户名:
    <input type="text" id="name" onblur="a1()" />
    <span id="userInfo"></span>

</p>
<p>
    密码:
    <input type="text" id="pwd" onblur="a2()" />
    <span id="pwdInfo" ></span>
</p>

</body>
</html>

输入账号不为admin时 会显示用户名错误 为admin时 页面不用刷新 会显示ok
密码同理

源码下载