<bdo id="4g88a"><xmp id="4g88a">
  • <legend id="4g88a"><code id="4g88a"></code></legend>

    前后端分離之Ajax入門

    前后端分離之Ajax入門

    一、概念

    Ajax(Asynchronous Javascript And XML),即是異步的JavaScript和XML,Ajax其實就是瀏覽器與服務器之間的一種異步通信方式。它可以異步地向服務器發送請求,在等待響應的過程中,不會阻塞當前頁面,在這種情況下,瀏覽器可以做自己的事情。直到成功獲取響應后,瀏覽器才開始處理響應數據。

    1. 傳統傳統的Web應用模式和 ajax方式的比較:

      傳統的web應用:請求提交的時候,提交的是整個表單,服務端返回的時候,也是返回整個頁面(刷新)
      ajax方式:提交請求的時候只把某些數據提交(可以不用表單),服務端也只返回特定的數據

    2. Ajax 應用的特點
      • 不刷新整個頁面,在頁面內與服務端通迅
      • 使用異步方式和服務端通迅
      • 大部分交互都在頁面內完成
    3. Ajax 技術組成

      XMLHttpRequest:用于與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL,發送和獲取數據。這允許網頁在不影響用戶操作的情況下,更新頁面的局部內容,所有的現代瀏覽器都支持這個對象。

      javascript:一種腳本編程語言,它可以在網頁上實現復雜的功能,網頁展現的不再是簡單的靜態信息,而是實時的內容更新。

      HTML:超文本標記語言,是一種用來結構化 Web 網頁及其內容的標記語言。

      json(曾經使用XML):將結構化數據表示為 JavaScript 對象的標準格式,是一種輕量級數據交換格式,而XML較為復雜

    二、XMLHttpRequest 實現ajax

    1. 準備好服務端程序(tomcat)

      @WebServlet("/UserServlet")
      	public class UserServlet extends HttpServlet {
      	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      		response.setContentType("text/html;charset=UTF-8");//設置結果集
      		response.getWriter().print("這是服務端的數據:"+LocalDateTime.now());//向瀏覽器發送數據
      	}	
      }
      
    2. 客戶端程序

      步驟:

      • 創建 XMLHttpRequest對象, 直接new就可以
      • 要指定回調函數
      • 調用它的open方法,指明提交方式,提交地址,及數據
      • 調用它的send方法,發送請求
      • 在回調函數中進行相應的處理
      <script src="js/jquery-1.8.0.js"></script>
      <script>
          var xmlhttp;
          function test(){		
              //創建 XMLHttpRequest對象
              xmlhttp = new XMLHttpRequest();
      
              //要指定回調函數
              xmlhttp.onreadystatechange=mystatechange;
      
              //調用open方法
              xmlhttp.open("get","UserServlet",null);
      
              //調用send
              xmlhttp.send(null);	
          }
      
          function mystatechange(){
              //alert(xmlhttp.readyState);	   
              if(xmlhttp.readyState==4){
                  if(xmlhttp.status==200){
                      // alert(xmlhttp.responseText);
                      document.getElementById("lbl_msg").innerHTML=xmlhttp.responseText;
              	}
          	}
          }
      
      </script>
      <body>
          <button onclick="test()">測試</button>
      	<label id="lbl_msg"></label>
      </body>
      
      
    3. readyState狀態碼
      0 --> UNSENT

      -- XMLHttpRequest 代理已被創建,但尚未調用 open() 方法。
      1 --> OPENED

      -- open() 方法已經被觸發。在這個狀態中,可以通過 setRequestHeader() 方法來設置請求的頭部,可以調用 send() 方法來發起請求。
      2 --> HEADERS_RECEIVED

      -- send() 方法已經被調用,并且頭部和狀態已經可獲得。
      3 --> LOADING

      -- 響應體部分正在被接收。如果 responseType 屬性是“text”或空字符串,responseText 將會在載入的過程中擁有部分響應數據。
      4 --> DONE

      -- 請求操作已經完成。這意味著數據傳輸已經徹底完成或失敗。

    三、使用jQuery實現ajax

    四種實現方式:

    • load()方法
    • $.get()方法
    • $.post()方法
    • $.ajax()方法 - 常用
    1. load():請求方式由是否傳遞參數決定。即傳遞參數,為GET方式;不傳遞參數,為POST方式。

      <script src="js/jquery-1.8.0.js"></script>
      <script>
          //load(url,data,callback)
          /*
              url:異步請求的地址
              data:異步請求的數據
              如果省略請求數據的話,當前的請求方式為GET
              如果發送請求數據的話,當前的請求方式為POST
              callback - 異步請求成功后的回調函數
          */
          $(function(){
              function mystatechange(){
                  alert('異步請求成功')
              }
      
              function test(){
                  $('button').load('UserServlet',mystatechange())
              }
      	})
      
      </script>
      
      <body>
          <button onclick="test()">測試</button>
      </body>
      
      
    2. $.get():使用get方式向服務器端發送異步請求

      
      <script src="js/jquery-1.8.0.js"></script>
      
      <script>
          //get(url,data,callback,type)
          /*
              url:異步請求的地址
              data:異步請求的數據
              callback:異步請求成功后的回調函數
              type:設置服務器滿響應結果的格式;值為xml、html、script、json、text和default
          */
          $(function(){
              $("button").click(function(){
                  $.get("UserServlet",{userName:"admin",password:"123"}, function(data){
                  	alert('異步請求成功');
                  });  	
              });  	   
          });	
      </script>
      
      <body>
          <button>測試</button>
      </body>
      
      
    3. $.post():使用POST方式向服務器端發送異步請求

      <script src="js/jquery-1.8.0.js"></script>
      
      <script>
              //post(url,data,callback,type)
              /*
                  url:異步請求的地址
                  data:異步請求的數據
                  callback:異步請求成功后的回調函數
                  type:設置服務器滿響應結果的格式;值為xml、html、script、json、text和default
              */	
          $(function(){
              $("button").click(function(){
                  $.post("UserServlet",{userName:"admin",password:"123"}, function(data){
                  	alert('異步請求成功');
                  });  	
              });  	   
          });	
      </script>
      
      <body>
          <button>測試</button>
      </body>
      
    4. $.ajax():是jQuery中最為底層的Ajax方法

      <script>
          $(function(){
              $("button").click(function(){
               	$.ajax({
                       type:"post",
                       url:"UserServlet",
                       data:{userName:"admin",password:"123"},
                       success: function(data){
                           alert('異步請求成功');
                       }
               	});  	
              });   
      	});
      </script>
      <body>
          <button>測試</button>
      </body>
      

    四、$.ajax([options]) 詳解

    $(function(){
        $("button").click(function(){
            $.ajax({
                type:"post",   //請求的提交方式,可以是post和get, 大小寫不敏感
                url:"UserServlet",  //請求的地址
                data:{userName:"admin",password:"123"},  //提交的數據,前面的key可以用雙引號引起來也可以不引
                success: function(data){   //回調函數,data 代表服務端返回的數據,data這個名字不是固定的,叫什么都可以
                	alert(data);
                }
            });
        });
    });
    

    注:當以post方式提交請求的時候,放在url后面的參數,是可以用的

    比如下面的表單:

    <form action="UserServlet?flag=add"  method="post">
        <input name="userName">
        <input name="password">
        <submit >
    </form>
    

    請求提交以后,服務端能收到 flag, userName,password

    但當請求以get的方式提交的時候,放在url后面的參數會被表單中其他的數據覆蓋

    $.ajax() 其他參數:

    • async
    • cache
    • dataType //服務端傳回來的數據,是什么類型, 取值有 text,html, js,xml,josn, jsonp
    • contentType //發給服務端的數據,是什么格式
    • 回調函數
    1. async 是否啟用異步,默認是true

      $(function(){
          $("button").click(function(){
              alert("a");
      
              $.ajax({
                  type:"post",
                  url:"UserServlet",
                  data:{userName:"admin",password:"123"},
                  success: function(data){
                  	alert("b");
                  }
              });
      
              alert("c");
          });
      });
      /*
      	以上代碼的執行順序有可能是a, b, c;也有可能是a, c, b
      	原因:默認情況下,async的取值是true,即使用異步的方式提交
      	想要同步執行,需要設置:async : false
      */
      
    2. cache 是否緩存

      默認值:true,當dataType為script時,默認為false,設置為false將不會從瀏覽器緩存中加載請求信息

      當cache 為true時,瀏覽器會優先從緩存中取數據,若緩存中存在則直接取出,若不存在會向服務端發送請求。

      優點:從緩存中取數據,減少了服務器端的壓力

      缺點:無法實時更新。如需要獲得請求服務器的次數時,客戶端完成獲取次數,服務器段完成更新次數,會從緩存中直接取數據,不會請求服務器執行增加次數操作

    3. dataType 服務端傳回來的數據,是什么類型

      如:

      • xml:返回XML文檔。
      • html:返回純文本HTML信息;包含的script標簽會在插入DOM時執行。
      • script:返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下),所有post請求都將轉為get請求。
      • json:返回JSON數據。
      • jsonp:JSONP格式。使用SONP形式調用函數時,例如myurl?callback=?,JQuery將自動替換后一個“?”為正確的函數名,以執行回調函數。
      • text:返回純文本字符串。
    4. contentType 發給服務端的數據,是什么格式

      默認值:application/x-www-form-urlencoded。這種格式的特點:name/value 成為一組,每組之間用 & 聯接,而 name與value 則是使用 = 連接。如:url?name=zhangsan&password=123

      注:這種形式是沒有辦法將復雜的 JSON 組織成鍵值對形式。

    5. 回調函數

      • success 成功以后調用

      • error 出錯的時候調用

      • complete 不管成功,失敗,都調用

        $(function(){
            $("button").click(function(){
                $.ajax({
                    type:"post",
                    url:"UserServlet?flag=visit",
                    success:function(data){
                    	alert("success調用了");
                    },
                    error:function(e){
                    	alert("error 調用了"+e);
                    },
                    complete:function(){
                    	alert("complete 調用了");
                    }
        		/*
                    總結
                        success 在服務端正確返回的情況下調用
                        complete 總要調用
                        error 在出錯的時候會調用
                            (1) 客戶端請求寫錯了,會引起error的調用
                            (2) 服務端出錯了,也會引起error的調用
        		*/
                });
            });
        });
        <body>
        	<button>測試</button>
        </body
        

    五、ajax的status狀態碼

    • 1**:信息響應類,表示接收到請求并且繼續處理
    • 2**:處理成功響應類,表示動作被成功接收、理解和接受
    • 3**:重定向響應類,為了完成指定的動作,必須接受進一步處理
    • 4**:客戶端錯誤,客戶請求包含語法錯誤或者是不能正確執行
    • 5**:服務端錯誤,服務器不能正確執行一個正確的請求

    常見的狀態碼:

    100——客戶必須繼續發出請求
    101——客戶要求服務器根據請求轉換HTTP協議版本
    200——交易成功
    201——提示知道新文件的URL
    202——接受和處理、但處理未完成
    203——返回信息不確定或不完整
    204——請求收到,但返回信息為空
    300——請求的資源可在多處得到
    301——刪除請求數據
    302——在其他地址發現了請求數據
    303——建議客戶訪問其他URL或訪問方式
    400——錯誤請求,如語法錯誤
    401——請求授權失敗
    402——保留有效ChargeTo頭響應
    403——請求不允許
    404——沒有發現文件、查詢或URl
    405——用戶在Request-Line字段定義的方法不允許
    500——服務器產生內部錯誤
    501——服務器不支持請求的函數
    502——服務器暫時不可用,有時是為了防止發生系統過載
    503——服務器過載或暫停維修
    505——服務器不支持或拒絕支請求頭中指定的HTTP版本

    posted @ 2024-03-14 17:21  kangbuji  閱讀(332)  評論(0編輯  收藏  舉報
    免费视频精品一区二区_日韩一区二区三区精品_aaa在线观看免费完整版_世界一级真人片
    <bdo id="4g88a"><xmp id="4g88a">
  • <legend id="4g88a"><code id="4g88a"></code></legend>