Ajax快速入門

AJAX

1.概念

1. 概念： ASynchronous JavaScript And XML 異步的JavaScript 和 XML
2. 異步和同步：用戶端和伺服器端互相通信的基礎上

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

Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。 [1]

通過在背景與伺服器進行少量資料交換，Ajax 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 Ajax）如果需要更新内容，必須重載整個網頁頁面。

2.為什麼需要使用ajax

ajax主要是實作頁面和web伺服器之間資料的異步傳輸。

簡單來說，不采用ajax的頁面，當使用者在頁面發起請求時，就要進行整個頁面的重新整理，重新整理快慢取決于伺服器的處理快慢。在這個過程中使用者必須得等待，不能進行其他操作。也就是同步的方式。用戶端和服務端傳遞了很多不需要的資料。效率低，使用者體驗差。

a、采用ajax的頁面，可以實作頁面的局部更新，而不是整個頁面的更新；b、并且發起請求後，使用者還可以進行頁面上的其他操作。這就是異步的方式。c、用戶端和服務端間隻傳遞需要的資料，效率高，使用者體驗性好。d、并且Ajax引擎在用戶端運作，承擔了一部分本來由伺服器承擔的工作，進而減少了大使用者量下的伺服器負載。

提升使用者的體驗

3. 實作方式：

1. 原生的JS實作方式（了解）

//1.建立核心對象
		            var xmlhttp;
		            if (window.XMLHttpRequest)
		            {// code for IE7+, Firefox, Chrome, Opera, Safari
		                xmlhttp=new XMLHttpRequest();
		            }
		            else
		            {// code for IE6, IE5
		                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		            }
		
		            //2. 建立連接配接
		            /*
		                參數：
		                    1. 請求方式：GET、POST
		                        * get方式，請求參數在URL後邊拼接。send方法為空參
		                        * post方式，請求參數在send方法中定義
		                    2. 請求的URL：
		                    3. 同步或異步請求：true（異步）或 false（同步）
		
		             */
		            xmlhttp.open("GET","ajaxServlet?username=tom",true);
		
		            //3.發送請求
					
		            xmlhttp.send();
					
		
		            //4.接受并處理來自伺服器的響應結果
		            //擷取方式 ：xmlhttp.responseText
		            //什麼時候擷取？當伺服器響應成功後再擷取
		
		            //當xmlhttp對象的就緒狀态改變時，觸發事件onreadystatechange。
		            xmlhttp.onreadystatechange=function()
		            {
		                //判斷readyState就緒狀态是否為4，判斷status響應狀态碼是否為200
		                if (xmlhttp.readyState==4 && xmlhttp.status==200)
		                {
		                   //擷取伺服器的響應結果
		                    var responseText = xmlhttp.responseText;
		                    alert(responseText);
		                }
		            }
           

package com.qf.ajax;

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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1,擷取請求參數
        String username = request.getParameter("username");

        //處理的10秒
//        try {
//            Thread.sleep(10000);
//        } catch (InterruptedException e) {
//            e.printStackTrace();
//        }

        //2,處理請求
        System.out.println("username:"+username);

        //3,響應
        response.getWriter().write("hello,"+username);

    }

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

           

2. JQeury實作方式

1. $.ajax()

• 文法：$.ajax({鍵值對});

//使用$.ajax()發送異步請求
		            $.ajax({
		                url:"ajaxServlet" , // 請求路徑
		                type:"POST" , //請求方式
		                //data: "username=jack&age=23",//請求參數
		                data:{"username":"jack","age":23},
/*
						
可用值:

"xml": 傳回 XML 文檔，可用 jQuery 處理。
"html": 傳回純文字 HTML 資訊；包含的 script 标簽會在插入 dom 時執行。
"script": 傳回純文字 JavaScript 代碼。不會自動緩存結果。除非設定了 "cache" 參數。注意：在遠端請求時(不在同一個域下)，所有 POST 請求都将轉為 GET 請求。（因為将使用 DOM 的 script标簽來加載）
"json": 傳回 JSON 資料 。
"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 将自動替換 ? 為正确的函數名，以執行回調函數。
"text": 傳回純文字字元串
						*/
                        dataType:"text"//設定接受到的響應資料的格式
		                success:function (data) {
		                    alert(data);
		                },//響應成功後的回調函數
		                error:function () {
		                    alert("出錯啦...")
		                },//表示如果請求響應出現錯誤，會執行的回調函數

		                
		            });
           

2. $.get()：發送get請求

• 文法：$.get(url, [data], [callback], [type])
• 參數：
• url：請求路徑
• data：請求參數
• callback：回調函數

• type：響應結果的類型,可選。規定預期的伺服器響應的資料類型。

  預設執行智能判斷（xml、json、script 或 html）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            //2,jquery第二種送出方式
          $.get(
              "ajaxServlet",
              {username:"woniu"},
              function(data){
                  alert(data);
              }
          );
        }
    </script>
</head>
<body>

<button onclick="fun();">發送異步請求</button><br/>
<input type="text" />



</body>
</html>
           

3. $.post()：發送post請求

• 文法：$.post(url, [data], [callback], [type])
• 參數：
• url：請求路徑
• data：請求參數
• callback：回調函數

• type：響應結果的類型,可選。規定預期的伺服器響應的資料類型。

  預設執行智能判斷（xml、json、script 或 html）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            //2,jquery第二種送出方式
          $.post(
              "ajaxServlet",
              {username:"woniu"},
              function(data){
                  alert(data);
              }
          );
        }
    </script>
</head>
<body>

<button onclick="fun();">發送異步請求</button><br/>
<input type="text" />



</body>
</html>