Ajax初次體驗

tags: `Ajax介紹`

Ajax是什麼

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

異步無刷新請求：

無須重新加載整個網頁的情況下，能夠更新部分網頁的技術，如下圖：

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

輸入新的資料後，網頁端發出xhr，此為異步的請求

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Ajax使用示範

jQuery是一個庫;js的大量函數(方法)

環境搭建

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>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </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.kuang.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.java



















@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public String test(){
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param=>" + name);
        if("狂神".equals(name)){
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }
}





























<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe測試體驗頁面無刷新</title>
    <script>
        function go(){
            //所有的值變量，提前獲取
            var url = document.getElementById("url").value;
            document.getElementById("iframe1").src=url;
        }
    </script>
</head>
<body>

<div>
    <p>請輸入地址：</p>
    <p>
        <input type="text" id="url" value="https://www.google.com/">
        <input type="button" value="提交" onclick="go()">
    </p>
</div>

<div>
  <iframe id="iframe1" style="width: 100%;height: 500px"></iframe>
</div>

</body>
</html>

index.jsp



























<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.4.js"></script>

<%--js是一個隨便的源--%>
    <script>
      function a(){
        $.post({
          url:"${pageContext.request.contextPath}/a1",
          data:{'name':$("#username").val()},
          success:function (data,status){
            console.log("data="+data);
            console.log("status="+status);
          }
        })
      }
    </script>
  </head>
  <body>
  <%--失去焦點的時候，發起一個請求(攜帶信息)到後台--%>
  用戶名：<input type="text" id="username" onblur="a()">
  </body>
</html>

當輸入設定好正確的答案，讓鼠標移開輸入框，出現：

輸入錯誤的答案，讓鼠標移開輸入框，出現：

可以看到當失去焦點時，瀏覽器立刻回傳xhr類型檔案

關係視圖

ajax 前後端分離

學習前置綱要

html+css略懂+js(超級熟練)

js:

函數：閉包()()
Dom
id,name,tag
create,remove
Bom
window
document

ES6:import require

Ajax初次體驗

tags: Ajax介紹