AJAX快速入門

時間  2021-08-12
標籤 html java jquery ajax json 瀏覽器 服務器 異步 async ide 欄目 Ajax 简体版
原文   原文鏈接

01-AJAX快速入門-AJAX的介紹

  • AJAX(Asynchronous JavaScript And XML)：異步的 JavaScript 和 XML。html

  • 自己不是一種新技術，而是多個技術綜合。用於快速建立動態網頁的技術。java

  • 通常的網頁若是須要更新內容，必需從新加載個頁面。jquery

  • 而 AJAX 經過瀏覽器與服務器進行少許數據交換，就可使網頁實現異步更新。也就是在不從新加載整個頁 面的狀況下，對網頁的部份內容進行局部更新。ajax

02-AJAX快速入門-原生JS方式實現AJAX

  • 代碼實現json

    import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //設置請求和響應的亂碼
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.獲取請求參數
        String username = req.getParameter("username");

        //模擬服務器處理請求須要5秒鐘
        /*try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/

        //2.判斷姓名是否已註冊
        if("zhangsan".equals(username)) {
            resp.getWriter().write("<font color='red'>用戶名已註冊</font>");
        }else {
            resp.getWriter().write("<font color='green'>用戶名可用</font>");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

    html代碼瀏覽器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶註冊</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密碼：<input type="password" id="password">
        <br>
        <input type="submit" value="註冊">
    </form>
</body>
<script>
    //1.爲姓名綁定失去焦點事件
    document.getElementById("username").onblur = function() {
        //2.建立XMLHttpRequest核心對象
        let xmlHttp = new XMLHttpRequest();

        //3.打開連接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET","userServlet?username="+username,true);
        //xmlHttp.open("GET","userServlet?username="+username,false);

        //4.發送請求
        xmlHttp.send();

        //5.處理響應
        xmlHttp.onreadystatechange = function() {
            //判斷請求和響應是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //將響應的數據顯示到span標籤
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
    }
</script>
</html>

03-AJAX快速入門-原生JS實現AJAX的步驟詳解

  • 核心對象：XMLHttpRequest服務器

    ​ 用於在後臺與服務器交換數據。能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。異步

  • 打開連接：open(method,url,async)async

    ​ method：請求的類型 GET 或 POST。ide

    ​ url：請求資源的路徑。

    ​ async：true(異步) 或 false(同步)。

  • 發送請求：send(String params)

    ​ params：請求的參數(POST 專用)。

  • 處理響應：onreadystatechange

    ​ readyState：0-請求未初始化，1-服務器鏈接已創建，2-請求已接收，3-請求處理中，4-請求已完成，且響應已就緒。

    ​ status：200-響應已所有 OK。

  • 得到響應數據形式

    ​ responseText：得到字符串形式的響應數據。

    ​ responseXML：得到 XML 形式的響應數據。

04-AJAX快速入門-jQuery的GET方式實現AJAX

  • 核心語法：$.get(url,[data],[callback],[type]);

    • url：請求的資源路徑。
    • data：發送給服務器端的請求參數，格式能夠是key=value，也能夠是 js 對象。
    • callback：當請求成功後的回調函數，能夠在函數中編寫咱們的邏輯代碼。
    • type：預期的返回數據的類型，取值能夠是 xml, html, js, json, text等。

  • 代碼實現

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶註冊</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密碼：<input type="password" id="password">
        <br>
        <input type="submit" value="註冊">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.爲用戶名綁定失去焦點事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的GET方式實現AJAX
        $.get(
            //請求的資源路徑
            "userServlet",
            //請求參數
            "username=" + username,
            //回調函數
            function (data) {
                //將響應的數據顯示到span標籤
                $("#uSpan").html(data);
            },
            //響應數據形式
            "text"
        );
    });
</script>
</html>

05-AJAX快速入門-jQuery的POST方式實現AJAX

  • 核心語法：$.post(url,[data],[callback],[type]);

    • url：請求的資源路徑。
    • data：發送給服務器端的請求參數，格式能夠是key=value，也能夠是 js 對象。
    • callback：當請求成功後的回調函數，能夠在函數中編寫咱們的邏輯代碼。
    • type：預期的返回數據的類型，取值能夠是 xml, html, js, json, text等。

  • 代碼實現

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶註冊</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密碼：<input type="password" id="password">
        <br>
        <input type="submit" value="註冊">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.爲用戶名綁定失去焦點事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的POST方式實現AJAX
        $.post(
            //請求的資源路徑
            "userServlet",
            //請求參數
            "username=" + username,
            //回調函數
            function (data) {
                //將響應的數據顯示到span標籤
                $("#uSpan").html(data);
            },
            //響應數據形式
            "text"
        );
    });
</script>
</html>

06-AJAX快速入門-jQuery的通用方式實現AJAX

  • 核心語法：$.ajax({name:value,name:value,…});

    • url：請求的資源路徑。
    • async：是否異步請求，true-是，false-否 (默認是 true)。
    • data：發送到服務器的數據，能夠是鍵值對形式，也能夠是 js 對象形式。
    • type：請求方式，POST 或 GET (默認是 GET)。
    • dataType：預期的返回數據的類型，取值能夠是 xml, html, js, json, text等。
    • success：請求成功時調用的回調函數。
    • error：請求失敗時調用的回調函數。

  • 代碼實現

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶註冊</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密碼：<input type="password" id="password">
        <br>
        <input type="submit" value="註冊">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.爲用戶名綁定失去焦點事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的通用方式實現AJAX
        $.ajax({
            //請求資源路徑
            url:"userServletxxx",
            //是否異步
            async:true,
            //請求參數
            data:"username="+username,
            //請求方式
            type:"POST",
            //數據形式
            dataType:"text",
            //請求成功後調用的回調函數
            success:function (data) {
                //將響應的數據顯示到span標籤
                $("#uSpan").html(data);
            },
            //請求失敗後調用的回調函數
            error:function () {
                alert("操做失敗...");
            }
        });
    });
</script>
</html>

07-AJAX快速入門-AJAX快速入門的小結

  • **AJAX(Asynchronous JavaScript And XML)：**異步的 JavaScript 和 XML。
  • 經過瀏覽器與服務器進行少許數據交換，就可使網頁實現異步更新。也就是在不從新加載整個頁面的狀況下，對網頁的部 份內容進行局部更新。
  • 同步和異步
    • 同步：服務器端在處理過程當中，沒法進行其餘操做。
    • 異步：服務器端在處理過程當中，能夠進行其餘操做。
  • GET 方式實現：$.get();
  • POST 方式實現：$.post();
    • url：請求的資源路徑。
    • data：發送給服務器端的請求參數，格式能夠是key=value，也能夠是 js 對象。
    • callback：當請求成功後的回調函數，能夠在函數中編寫咱們的邏輯代碼。
    • type：預期的返回數據的類型，取值能夠是 xml, html, js, json, text等。
  • 通用方式實現：$.ajax();
    • url：請求的資源路徑。
    • async：是否異步請求，true-是，false-否 (默認是 true)。
    • data：發送到服務器的數據，能夠是鍵值對形式，也能夠是 js 對象形式。
    • type：請求方式，POST 或 GET (默認是 GET)。
    • dataType：預期的返回數據的類型，取值能夠是 xml, html, js, json, text等。
    • success：請求成功時調用的回調函數。
    • error：請求失敗時調用的回調函數。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程