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">

    <!-- 自動掃描包，讓指定包下的注解生效,由IOC容器統一管理 -->
    <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>

【SpringMVC筆記】Ajax 入門（jQuery.ajax）Ajax 簡介僞造 Ajax（iframe标簽）jQuery.ajaxAjax 異步加載資料案例Ajax 驗證使用者名密碼擷取百度接口案例

Ajax 執行流程

【SpringMVC筆記】Ajax 入門（jQuery.ajax）Ajax 簡介僞造 Ajax（iframe标簽）jQuery.ajaxAjax 異步加載資料案例Ajax 驗證使用者名密碼擷取百度接口案例

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>

【SpringMVC筆記】Ajax 入門（jQuery.ajax）Ajax 簡介僞造 Ajax（iframe标簽）jQuery.ajaxAjax 異步加載資料案例Ajax 驗證使用者名密碼擷取百度接口案例

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

中加入以下代碼：

<!--JSON亂碼問題配置-->
<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>

【SpringMVC筆記】Ajax 入門（jQuery.ajax）Ajax 簡介僞造 Ajax（iframe标簽）jQuery.ajaxAjax 異步加載資料案例Ajax 驗證使用者名密碼擷取百度接口案例

擷取百度接口案例

【SpringMVC筆記】Ajax 入門（jQuery.ajax）Ajax 簡介僞造 Ajax（iframe标簽）jQuery.ajaxAjax 異步加載資料案例Ajax 驗證使用者名密碼擷取百度接口案例

<!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>

【SpringMVC筆記】Ajax 入門（jQuery.ajax）Ajax 簡介僞造 Ajax（iframe标簽）jQuery.ajaxAjax 異步加載資料案例Ajax 驗證使用者名密碼擷取百度接口案例

Ajax

Ajax 簡介

僞造 Ajax（iframe标簽）

jQuery.ajax

使用 jQuery.ajax 案例

Ajax 執行流程

Ajax 異步加載資料案例

Ajax 驗證使用者名密碼

擷取百度接口案例

繼續閱讀

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

配置網頁内容通路

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

【SpringMVC筆記】Ajax 入門（jQuery.ajax）Ajax 簡介僞造 Ajax（iframe标簽）jQuery.ajaxAjax 異步加載資料案例Ajax 驗證使用者名密碼擷取 百度 接口案例

Ajax

Ajax 簡介

僞造 Ajax（iframe标簽）

jQuery.ajax

使用 jQuery.ajax 案例

Ajax 執行流程

Ajax 異步加載資料案例

Ajax 驗證使用者名密碼

擷取 百度 接口案例

繼續閱讀

【SpringMVC筆記】Ajax 入門（jQuery.ajax）Ajax 簡介僞造 Ajax（iframe标簽）jQuery.ajaxAjax 異步加載資料案例Ajax 驗證使用者名密碼擷取百度接口案例

擷取百度接口案例