【SpringMVC笔记】Ajax 入门（jQuery.ajax）

╰半橙微兮° 2023-02-17 15:53 28阅读 0赞

### Ajax ###

*  Ajax 简介
 *  伪造 Ajax（iframe标签）
 *  jQuery.ajax
 *   *  使用 jQuery.ajax 案例
     *  Ajax 执行流程
 *  Ajax 异步加载数据案例
 *  Ajax 验证用户名密码
 *  获取 百度 接口案例

# Ajax 简介 #

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

*  AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
 *  Ajax 不是新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
 *  传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
 *  使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

# 伪造 Ajax（iframe标签） #

我们可以使用前端的 `<iframe>` 标签来伪造一个ajax的样子。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ajax</title>
        <script type="text/javascript"> function go() { var url = document.getElementById("url").value; document.getElementById("iframePosition").src=url; } </script>
    </head>
    <body>
    
    <div>
        <p>请输入要加载的网址:<span id="currentTime"></span> </p>
        <p>
            <input id="url" type="text" value="https://www.baidu.com/">
            <input type="button" value="提交" onclick="go()">
        </p>
    </div>
    
    <div>
        <h3>加载页面位置:</h3>
        <iframe id="iframePosition" style="width: 70%" height="500px"></iframe>
    </div>
    
    </body>
    </html>

利用AJAX可以做：

*  注册时，输入用户名自动检测用户是否已经存在。
 *  登陆时，提示用户名密码错误
 *  删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除
 *  …等等

# jQuery.ajax #

有兴趣可以了解 JS原生 `XMLHttpRequest`，我们直接学习 **JQuery** 提供的 Ajax。

Ajax 的核心是 `XMLHttpRequest` 对象 (XHR)，

*  XHR 为向服务器发送请求和解析服务器响应提供了接口，能够以异步方式从服务器获取新数据。

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，可以使用 `HTTP Get` 和 `HTTP Post` 从远程服务器上请求文本、HTML、XML 或 JSON，同时能够把这些外部数据直接载入网页的被选元素中。

jQuery Ajax 本质就是 `XMLHttpRequest`，对他进行了封装，方便调用。

jQuery.ajax(...)
          部分参数：
                url：请求地址
                type：请求方式，GET、POST（1.9.0之后用method）
            headers：请求头
                data：要发送的数据
        contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
              async：是否异步
            timeout：设置请求超时时间（毫秒）
          beforeSend：发送请求前执行的函数(全局)
            complete：完成之后执行的回调函数(全局)
            success：成功之后执行的回调函数(全局)
              error：失败之后执行的回调函数(全局)
            accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
            dataType：将服务器端返回的数据转换成指定类型
              "xml": 将服务器端返回的内容转换成xml格式
              "text": 将服务器端返回的内容转换成普通文本格式
              "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
            "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
              "json": 将服务器端返回的内容转换成相应的JavaScript对象
            "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

## 使用 jQuery.ajax 案例 ##

常规配置 `web.xml` 和 `applicationContext.xml`：

`web.xml`：

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0">
    
        <servlet>
            <servlet-name>springmvc</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:applicationContext.xml</param-value>
            </init-param>
            <load-on-startup>1</load-on-startup>
        </servlet>
        <servlet-mapping>
            <servlet-name>springmvc</servlet-name>
            <url-pattern>/</url-pattern>
        </servlet-mapping>
    
        <filter>
            <filter-name>encoding</filter-name>
            <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>encoding</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
        
    </web-app>

`applicationContext.xml`：记得加 **静态资源过滤** 和 **注解驱动配置**。

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    
        
        <context:component-scan base-package="com.yusael.controller"/>
        
        <mvc:default-servlet-handler/>
        
        <mvc:annotation-driven/>
    
        
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
            
            <property name="prefix" value="/WEB-INF/jsp/" />
            
            <property name="suffix" value=".jsp" />
        </bean>
    
    </beans>

编写一个 `AjaxController`：

@RestController
    public class AjaxController { 
    
        @RequestMapping("/ajax1")
        public void ajax1(String name, HttpServletResponse response) throws IOException { 
            if ("admin".equals(name)) { 
                response.getWriter().write("true");
            } else { 
                response.getWriter().write("false");
            }
        }
    }

编写 `index.jsp` 测试：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>Ajax测试</title>
        <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
        <script> function a1() { $.ajax({ url : "${pageContext.request.contextPath}/ajax1", data : { 'name' : $("#username").val()}, success : function(data, status) { alert(data); alert(status); }, error : function () { } }); } </script>
      </head>
      <body>
        <%--onblur：失去焦点触发事件--%>
        用户名: <input type="text" id="username" onblur="a1()">
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]

## Ajax 执行流程 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]

# Ajax 异步加载数据案例 #

首先写一个实体类 `User`：

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class User { 
        private String name;
        private int age;
        private String sex;
    }

在 Controller 中获取一个集合对象，展示到前端页面：

@RequestMapping("/ajax2")
    public List<User> ajax2() { 
        List<User> list = new ArrayList<>();
        list.add(new User("zhenyu", 21, "男"));
        list.add(new User("yusael", 99, "男"));
        list.add(new User("hahaha", 18, "女"));
        return list; // 由于@RestController注解, 将list转成json格式返回
    }

前端页面：`ajaxtest.jsp`

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ajax测试</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}/statics/js/jquery-3.4.1.min.js"></script>
    <script> $(function () { $("#btn").click(function () { $.post("${pageContext.request.contextPath}/ajax2", function (data) { console.log(data); var html = ""; for (let 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]

# Ajax 验证用户名密码 #

思考一下：我们平时登录时，输入框后面的实时提示是怎么做到的？

`Controller`：

@RequestMapping("/ajax3")
    public String ahax3(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;
    }

前端页面 `login.jsp`：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Login</title>
        <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
        <script> function a1() { $.post({ url : "${pageContext.request.contextPath}/ajax3", 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}/ajax3", { '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>

注：记得处理 JSON 乱码！  
`applicationContext.xml` 中加入以下代码：

<mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]

# 获取 百度 接口案例 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]

<!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>JSONP百度搜索</title>
        <style> #q{ width: 500px; height: 30px; border:1px solid #ddd; line-height: 30px; display: block; margin: 0 auto; padding: 0 10px; font-size: 14px; } #ul{ width: 520px; list-style: none; margin: 0 auto; padding: 0; border:1px solid #ddd; margin-top: -1px; display: none; } #ul li{ line-height: 30px; padding: 0 10px; } #ul li:hover{ background-color: #f60; color: #fff; } </style>
        <script> // 2.步骤二 // 定义demo函数 (分析接口、数据) function demo(data){ var Ul = document.getElementById('ul'); var html = ''; // 如果搜索数据存在 把内容添加进去 if (data.s.length) { // 隐藏掉的ul显示出来 Ul.style.display = 'block'; // 搜索到的数据循环追加到li里 for(var i = 0;i<data.s.length;i++){ html += '<li>'+data.s[i]+'</li>'; } // 循环的li写入ul Ul.innerHTML = html; } } // 1.步骤一 window.onload = function(){ // 获取输入框和ul var Q = document.getElementById('q'); var Ul = document.getElementById('ul'); // 事件鼠标抬起时候 Q.onkeyup = function(){ // 如果输入框不等于空 if (this.value != '') { // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ // 创建标签 var script = document.createElement('script'); //给定要跨域的地址 赋值给src //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址 script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo'; // 将组合好的带src的script标签追加到body里 document.body.appendChild(script); } } } </script>
    </head>
    
    <body>
    <input type="text" id="q" />
    <ul id="ul">
    
    </ul>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061423190750.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200614233752946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200615000523518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200615003237873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200615003254669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020061500345580.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70