Ajax——概述、原理、js實現Ajax、jq實現Ajax

Ajax概述

跳轉到目錄
ASynchronous JavaScript And XML — 異步的JavaScript和XML;
Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。可以提高提升用戶的體驗

同步和異步的區別:jQuery動畫
跳轉到目錄

同步: 客戶端必須等待服務器端的響應。在等待的期間客戶端不能做其他操作。
異步: 客戶端不需要等待服務器端的響應。在服務器處理請求的過程中，客戶端可以進行其他的操作。

Ajax原理

跳轉到目錄
頁面發起請求，會將請求發送給瀏覽器內核中的Ajax引擎，Ajax引擎會提交請求到客戶端，在這段時間裏，客戶端可以任意進行任意操作，直到服務器端將數據返回給 Ajax引擎後，會觸發你設置的事件，從而執行自定義的js邏輯代碼完成某種頁面功能。

原生JavaScript實現AJAX程序

跳轉到目錄
步驟:

創建ajax的核心引擎對象, XMLHttpRequest對象
建立連接open: 請求方式, 請求地址
發送請求send
接受並處理來自服務器的響應結果

<script>
        // 原生的操作
        function req() {
            //1. 創建ajax的核心引擎對象, XMLHttpRequest對象
            var xhr = new XMLHttpRequest();

            if (!xhr){
                // 兼容ie 5 6 7
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2. 提前告知這個對象,後續操作(回調函數)
            /*
            * 什麼是回調函數: 回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，
            *   用於對該事件或條件進行響應。
            * */
            xhr.onreadystatechange = function () {
                //當這個對象狀態發生改變的時候,觸發一次函數
                /**
                 * 僞代碼
                 * public class XMLHttpRequest{
                 *     private int readystate;
                 *     public XMLHttpRequest(){
                 *         // 剛創建出來,狀態爲0
                 *         readystate=0;
                 *     }
                 *
                 *     public void open(method, url){
                 *         // TODO
                 *     }
                 * }
                 *
                 *  0: 創建出來
                 *  1: 調用open
                 *  2: 調用send
                 *  3: 從服務器接受到數據
                 *  4: 接收完數據
                 */

                // 在這裏做一些操作:比如 校驗成功,校驗錯誤等
                if (xhr.readyState == 4){
                    // 操作 獲取服務器端返回的數據
                    var data = xhr.responseText;
                    // alert(data);
                    document.getElementById("content").innerHTML = data;
                }
            };

            //3. 告知這個對象: 請求方式, 請求地址
            /*
               參數：
                   1. 請求方式：GET、POST
                       * get方式，請求參數在URL後邊拼接。send方法爲空參
                       * post方式，請求參數在send方法中定義
                   2. 請求的URL：
                   3. 同步或異步請求：true（異步）或 false（同步）
            */
            xhr.open("get", "http://localhost:8080/ajax/hello?username=zygui", true);
            //4. 調用發送方法
            xhr.send();
        }
    </script>

什麼是回調函數: 回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的, 用於對該事件或條件進行響應。

jQuery實現Ajax

跳轉到目錄
方式一: get和post請求

$.get(url, params, fn, formatType);
$.post(url, params, fn, formatType);

參數:

url: 請求的服務器地址
params: 提交參數; 比如: username=zygui&pwd=123

fn: 回調函數

/*
	data: 服務器返回的數據
	statusStr: 200-->success狀態碼(沒用,可以不寫這個參數) 
	xhr: 可以自己通過xhr對象.responseText來取服務器返回的數據
*/
function(data, statusStr, xhr){
	// 在這裏拿到服務器返回的數據,處理邏輯
}

formatType: 響應結果類型

    <script>
        function req() {
            $.post("http://localhost:8080/ajax/hello", "username=coderzygui",function (data) {
                $("#content").html(data);
            });
        }
    </script>

方式二: ajax()函數實現Ajax

$.ajax({鍵值對});
$.ajax方法是get和post的底層實現方法，該方法使用更靈活，參數更豐富，並可以設置異步或同步。上層方法簡單易用，代碼量較少。底層方法靈活性更強，方法簽名更多，代碼量比較多。

鍵值對:

url : “ajaxServlet” // 請求路徑
type : “POST” // 請求方式
async : true //同步或者異步
data: “username=jack&age=23” //請求參數
data:{“username”:“jack”,“age”:23},
dataType : “text” //設置接受到的響應數據的格式
success : function (data) {
alert(data);
} //響應成功後的回調函數
error : function () {
alert(“出錯啦…”)
} //表示如果請求響應出現錯誤，會執行的回調函數

<script>
      function req() {
          $.ajax({
              url: "http://localhost:8080/ajax/hello",
              data: "username=gzy",
              type: "get",
              success: function (data) {
                  alert(data);
              },
              error: function () {
                  alert("出錯了...");
              }
          })
      }
</script>

Demo

跳轉到目錄

jsp界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Ajax小Demo</title>

	<script src="js/jquery.js"></script>

    <script type="text/javascript">
        function checkName(obj) {
            // 獲取當前輸入框數據
            var username = $(obj).val();
            // 發請求
            $.ajax({
                url: "http://localhost:8080/ajaxdemo/checkNameServlet",
                data: "username="+username,
                type: "get",
                // 服務器將響應的數據,傳遞給data, 上面的鍵值對data爲拼接在url後面的參數
                success: function (data) {
                    // 服務器返回1,認爲存在:顯示綠字; 返回0,認爲不存在,返回紅字;
                    //alert(data);
                    if ("1" == data){
                        $("#username_msg").html("該用戶名不可用").css("color", "red");
                    } else {
                        $("#username_msg").html("該用戶名可用").css("color", "green");
                    }
                }
            })
        }
    </script>
</head>
<body>
<form method="post" action="#">
    <table>
        <tr>
            <td>用戶名:</td>
            <td><input type="text" name="username" onblur="checkName(this)"></td>
            <td><span id="username_msg"></span></td>
        </tr>
        <tr>
            <td>密碼:</td>
            <td><input type="text" name="password"></td>
            <td></td>
        </tr>
        <tr>
            <td colspan='3'><input type="submit" id="sub"></td>
        </tr>
    </table>
</form>
</body>

</html>

Servlet

@WebServlet("/checkNameServlet")
public class CheckNameServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");

        // 接收username
        String username = request.getParameter("username");

        // 調用service, 查看是否存在
        UserService service = new UserService();
        int count = service.count(username);

        // 返回1或0
        if (count > 0){
            response.getWriter().print("1");
        } else {
            response.getWriter().print("0");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

Service

public class UserService {
    /**
     * 傳入username,查詢數據庫中username的個數
     * @param username
     * @return
     */
    public int count(String username) {
        return new UserDao().count(username);
    }
}

public class UserDao {
    /**
     * 傳入username,查詢數據庫中username的個數
     * @param username
     * @return
     */
    public int count(String username) {
        // 創建sql
        QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());

        // 編寫sql
        String sql = "SELECT COUNT(*) FROM contact WHERE name = ?";

        // 執行sql語句
        try {
            // 返回爲Object類型,實際底層返回多少個,是一個Long類型
            Object obj = qr.query(sql, new ScalarHandler(), username);
            int i = ((Long) obj).intValue();
            return i;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return 0;
    }

    @Test
    public void testCount(){
        int i = count("桂朝陽");
        if (i == 1){
            System.out.println("查詢成功!");
        } else {
            System.out.println("查詢失敗!");
        }
    }
}

White Camel

發佈了166 篇原創文章 · 獲贊 84 · 訪問量 13萬+

私信關注

Ajax——概述、原理、js實現Ajax、jq實現Ajax

目錄

Ajax概述

Ajax原理

原生JavaScript實現AJAX程序

jQuery實現Ajax

Demo

SpringBoot——SpringBoot配置文件、yaml語法、JSR303校驗、多環境切換Profile

枚舉類的理解

Spring Java Config——@PropertySource和@Valuen、自動裝配等

Session、Cookie和Token的主要區別

學習《戀上數據結構與算法》目錄索引(持續更新中)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結