Ajax-初识+实例

1. Ajax

1.1 什么是Ajax

Ajax： 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，实现网页的异步更新。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

核心： Ajax的核心是 JavaScript 对象 XMLHttpRequest。通过XMLHttpRequest，可以让我们使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

AJAX 组合了：

• 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
• JavaScript 和 HTML DOM（显示或使用数据）

1.2 Ajax工作原理

图源：w3cschool

1.3 同步、异步请求

同步： 发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步： 发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

1.4 XMLHttpRequest

XMLHttpRequest：该对象用于同幕后服务器交换数据。

实例化XMLHttpRequest对象：

variable = new XMLHttpRequest();

1.5 Ajax应用场景

• 注册时，用户名查重。
• 搜索时，搜索引擎自动提示搜索关键字。

2. jQuery Ajax

jQuery Ajax的本质就是XMLHttpRequest ！

2.1 jQuery AJAX 方法

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post等。$.ajax() 返回其创建的 XMLHttpRequest 对象。

方法	描述
$.ajax()	执行异步 AJAX 请求

方法	描述
$.get()	使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.post()	使用 AJAX 的 HTTP POST 请求从服务器加载数据
load()	从服务器加载数据，并把返回的数据放置到指定的元素中

方法	描述
$.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript()	使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript

2.2 jQuery AJAX 参数

语法格式：jQuery.ajax({settings})

参数名	参数类型	描述
url	String	发送请求的地址
type	String	请求方式
headers	String	请求头
data	Object	要发送的数据
contentType	String	即将发送信息至服务器的内容编码类型，（默认: “application/x-www-form-urlencoded; charset=UTF-8”）
async	Boolean	是否异步（默认为true）
timeout	Int	设置请求超时时间（毫秒）
beforeSend	Function	发送请求前执行的函数（全局）
complete	Function	完成之后执行的回调函数（全局）
success	Function	成功之后执行的回调函数（全局）
error	Function	失败之后执行的回调函数（全局）
global	Boolean	是否触发全局 AJAX 事件。（默认为true）
dataType	String	将服务器端返回的数据转换成指定类型

dataType选项：

"xml"：返回 XML 文档，可用 jQuery 处理。
"html"：返回纯文本 HTML 信息；包含 script 元素。
"script"： 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json"：返回 JSON 数据 。
"jsonp"： JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

2.3 jQuery Ajax应用

实现功能：用户输入用户名，当输入框失去焦点时，实现异步刷新。

2.3.1 前期准备

1️⃣ Step1：给项目添加Web；

2️⃣ Step2：修改web.xml文件，配置DispatcherServlet映射；

3️⃣ Step3：修改web.xml文件，通过init-param初始化参数，并指定SpringMV-Servlet配置文件

4️⃣ Step4：修改web.xml文件，配置启动级别；

5️⃣ Step5：修改web.xml文件，配置CharacterEncodingFilter映射；

6️⃣ Step6：修改SpringMV-Servlet配置文件，配置context自动扫描、mvc注解支持、禁止加载静态资源；

7️⃣ Step7：修改SpringMV-Servlet配置文件，配置视图解析器InternalResourceViewResolver；

8️⃣ Step8：HandlerAdapter将视图逻辑名或模型传递给DispatcherServlet；

9️⃣ Step9： DispatcherServlet将ModelAndView传给ViewReslover视图解析器；

2.3.1 编写Controller

具体思路：

1️⃣ Step1：通过@RestController标注该类为Controller，不进入视图（相当于方法上用@ResponseBody）

2️⃣ Step2：配置映射地址为/Ajax；

3️⃣ Step3：修改web.xml文件，通过init-param初始化参数，并指定SpringMV-Servlet配置文件

@RestController
public class AjaxController {

    /**
     * 获取前台输入的用户名，根据比较结果响应
     * @param name 前台传值
     * @param response 响应消息体
     * @throws IOException
     */
    @RequestMapping("/Ajax")
    public void Ajax(String name, HttpServletResponse response) throws IOException {
        if(name.equals("admin")){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }
}

HttpServletResponse：
该接口继承自ServletResponse，实例化的HttpServletResponse对象来帮助servlet向客户端发送响应。

getWriter() ：

该方法所获取的字符输出流对象为 PrintWriter 类型。由于 PrintWriter 类型的对象可以直接输出字符文本内容，因此，要想输出内容全部为字符文本的网页文档，则需要使用 getWriter() 方法。

2.3.3 编写JSP

2.3.3.1 前端页面

<input type="text" id="UserName" οnblur="On()">

2.3.3.2 jQuery Ajax

说明：

• ${pageContext.request.contextPath}：绝对路径的方法，等价于<%=request.getContextPath()%>；
• data：前一个参数是要赋值的key，后一个参数具体的vlue值；
• $("#UserName")：根据ID获取页面标签。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    function On() {
        $.post({
            url: "${pageContext.request.contextPath}/Ajax",
            data: {"name": $("#UserName").val()},
            success: function (data) {
                alert(data);
            }
        })
    }
</script>

2.3.4 测试输出

2.4 jQuery Ajax 获取List

2.4.1 编写Controller

@RequestMapping("/AjaxList")
public List<User> AjaxList() {
    List<User> list = new ArrayList<>();
    list.add(new User(1, "张三", "123123"));
    list.add(new User(2, "张三", "123123"));
    list.add(new User(3, "张三", "123123"));
    return list;
}

2.4.2 编写JSP

jQuery说明：

1️⃣ Step1：通过click获取button的单击事件；

2️⃣ Step2：function (data) {...}，data为获取的Controller返回值；

3️⃣ Step3：定义context来存放每个对象的属性；

4️⃣ Step4：通过.html方法输出HTML文本。

<input type="button" id="btn" value="GetValue">
<table>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>密码</td>
    </tr>
    <tbody id="users">

    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            $.post(
                "${pageContext.request.contextPath}/AjaxList",
                function (data) {
                    var context = "";
                    for (var i = 0; i < data.length; i++) {
                        context += "<tr>" +
                            "<td>" + data[i].id + "</td>" +
                            "<td>" + data[i].name + "</td>" +
                            "<td>" + data[i].password + "</td>" +
                            "</tr>"
                    }
                    $("#users").html(context);
                });
        })
    })
</script>

2.4.3 测试输出

2.5 jQuery Ajax 登录验证

2.5.1 编写Controller

Controller说明：

1️⃣ Step1：判断参数是否为空；

2️⃣ Step2：参数若不为空则根据equals结果赋予不同的result结果；

3️⃣ Step3：返回该result结果。

@RequestMapping("/AjaxSign")
public String AjaxSign(String username, String password) {
    String result = "";
    if (username != null) {
        if (username.equals("admin")) {
            result = "OK";
        } else {
            result = "Username Error !";
        }
    }
    if (password != null) {
        if (password.equals("123123")) {
            result = "OK";
        } else {
            result = "Password Error !";
        }
    }
    return result;
}

2.5.2 编写JSP

jQuery说明：

1️⃣ Step1：为每个文本框配置失去焦点事件，并在jQuery中分别实现该事件；

2️⃣ Step2：以JSON格式向Controller传输数据（输入框内容）；

3️⃣ Step3：执行回调函数success；

4️⃣ Step4：根据Controller返回值来配置对应的css属性；

5️⃣ Step5：通过.html方法输出HTML文本。

<p>
    Username：<input type="text" id="Username" οnblur="On1()">
    <span id="UsernameContext"></span>
</p>
<p>
    Password：<input type="text" id="Password" οnblur="On2()">
    <span id="PasswordContext"></span>
</p>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    function On1(){
        $.post({
            url:"${pageContext.request.contextPath}/AjaxSign",
            data:{"username":$("#Username").val()},
            success:function (data){
                if(data.toString() === "OK"){
                    $("#UsernameContext").css("color","green");
                }else{
                    $("#UsernameContext").css("color","red");
                }
                $("#UsernameContext").html(data);
            }
        })
    }
    function On2(){
        $.post({
            url:"${pageContext.request.contextPath}/AjaxSign",
            data:{"password":$("#Password").val()},
            success:function (data){
                if(data.toString() === "OK"){
                    $("#PasswordContext").css("color","green");
                }else{
                    $("#PasswordContext").css("color","red");
                }
                $("#PasswordContext").html(data);
            }
        })
    }
</script>

2.5.3 测试输出

3. 写在最后

$.post({})中data里面写的其实就是JSON数据。

 

---

❤️ END ❤️