jQuery入門（五）Ajax和json

努力--坚持發表於2024-08-06
jQueryJSON

一、Ajax 簡介
AJAX(Asynchronous JavaScript And XML)：非同步的 JavaScript 和 XML。 本身不是一種新技術，而是多個技術綜合。用於快速建立動態網頁的技術。 一般的網頁如果需要更新內容，必需重新載入個頁面。 而 AJAX 透過瀏覽器與伺服器進行少量資料交換，就可以使網頁實現非同步更新。也就是在不重新載入整個頁 面的情況下，對網頁的部分內容進行區域性更新。
同步和非同步的區別如下圖：



二、jQuery實現Ajax

1）JQuery的GET方式實現AJAX
核心語法：$.get(url,[data],[callback],[type]);
- url：請求的資源路徑。 - data：傳送給伺服器端的請求引數，格式可以是key=value，也可以是 js 物件。 - callback：當請求成功後的回撥函式，可以在函式中編寫我們的邏輯程式碼。 - type：預期的返回資料的型別，取值可以是 xml, html, js, json, text等
示例程式碼： 使用者註冊非同步get請求驗證使用者名稱 

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


2）JQuery的POST方式實現AJAX
**核心語法：**$.post(url,[data],[callback],[type]);
- url：請求的資源路徑。 - data：傳送給伺服器端的請求引數，格式可以是key=value，也可以是 js 物件。 - callback：當請求成功後的回撥函式，可以在函式中編寫我們的邏輯程式碼。 - type：預期的返回資料的型別，取值可以是 xml, html, js, json, text等。
示例程式碼：使用者註冊非同步post請求驗證使用者名稱 

<!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) {//回撥函式

                $("#uSpan").html(data); //將響應的資料顯示到span標籤

            },

            "text"//響應資料形式

        );

    });

</script>

</html>


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：請求失敗時呼叫的回撥函式。


示例程式碼：使用者註冊非同步Ajax post請求驗證使用者名稱 

<!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) { //請求成功後呼叫的回撥函式
                $("#uSpan").html(data);//將響應的資料顯示到span標籤
            },
            error:function () { //請求失敗後呼叫的回撥函式
                alert("操作失敗...");
            }
        });
   });
</script>
</html>


上述Ajax請求用到的servlet程式碼： 

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);
    }
}




三、JSON的簡介
1、JSON簡介
JSON(JavaScript Object Notation)：是一種輕量級的資料交換格式。它是基於 ECMAScript 規範的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料。 簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。易於人閱讀和編寫，同時也易於計算機解析和生成，並有效的 提升網路傳輸效率。

2、建立格式:
物件型別:語法
{name:value,name:value,...}

示例程式碼:

{"city":"北京","date":"2088-08-08","shidu":"22%","wendu":"10~23"}


陣列集合型別:語法
[{name:value,...},{name:value,...}]
混合型別:語法
{name:[{name:value,...},{name:value,...}]}


3、常用方法:
1）stringify（物件）作用：將指定物件轉換成json格式字串
2）parse（字串）作用：將指定json格式字串解析成物件
　　我們除了可以在 JavaScript 中來使用 JSON 以外，在 JAVA 中同樣也可以使用 JSON。 JSON 的轉換工具是透過 JAVA 封裝好的一些 JAR 工具包。 可以將 JAVA 物件或集合轉換成 JSON 格式的字串，也可以將 JSON 格式的字串轉成 JAVA 物件。

相關文章