JAVA Web07——Ajax

qiao39gs發表於2020-10-23

Ajax

非同步重新整理：如果網頁中某一個地方需要修改，非同步重新整理可以使：只重新整理該需要修改的地方，而頁面中其他地方保持不變。

例如：百度搜尋框，視訊的點贊

1.實現

js：XMLHttpRequest物件

XMLHttpRequest物件的方法：

open(方法名（提交方式get|post），伺服器地址，true)：與服務端建立連線
send()：
- get：send(null)
- post：send(引數值)
setRequestHeader(header,value)：
- get：不需要設定此方法
- post：需要設定：
  - a：如果請求元素中包含了檔案上傳：
    setRequestHeader("Content-Type","multipart/form-data")
  - b：不包含檔案上傳
    setRequestHeader("Content-Type","application/x-www-form-urlencoded")

XMLHttpRequest物件的屬性：

readyState：請求狀態
readyState表示 XMLHttpreRequest物件傳送的HTP請求狀態，共有五種狀態，只有狀態為4代表請求完畢

HTTP請求狀態
狀態值	簡介
0	表示XMLHttpRequest物件沒有初始化
1	表示XMLHttpRequest物件開始傳送請求：已經執行了open()方法並完成了相關資源的準備
2	表示XMLHttpRequest物件已將請求傳送完畢：已經執行了send()方法來傳送請求，但是還沒有收到響應
3	表示XMLHttpRequest物件開始讀取相應資訊：已經接收到HTTP響應的頭部資訊，但是還沒有將相應體接收完畢
4	表示XMLHttpRequest物件將響應資訊全部讀取完畢

status：響應狀態
status表示HTTP響應中的狀態碼，只有狀態碼為200時才表示響應成功；否則，說明HTTP響應不正常

HTTP響應狀態碼
狀態碼	含義
200	伺服器正常響應
400	無法找到請求的資源
403	沒有訪問許可權
404	訪問的資源不存在
500	伺服器內部錯誤，很可能是伺服器程式碼有錯

onreadystatechange：回撥函式
responseText：相應格式為String
responseXML：相應格式為XML

2.例子-原生ajax

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function registerPost(){
		var mobile = document.getElementById("mobile").value
		//通過ajax非同步方式請求服務端
		xmlHttpRequest = new XMLHttpRequest();
		xmlHttpRequest.open("post","MobileServlet",true);
		
		//設定xmlHttpRequest物件的回撥函式
		xmlHttpRequest.onreadystatechange = callBack;
		
		//設定post方式的頭資訊
		xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttpRequest.send("mobile="+mobile);//k=v
	}
	
	function registerGet(){
		var mobile = document.getElementById("mobile").value
		alert(mobile)
		//通過ajax非同步方式請求服務端
		xmlHttpRequest = new XMLHttpRequest();
		xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
		
		//設定xmlHttpRequest物件的回撥函式
		xmlHttpRequest.onreadystatechange = callBack;
		
		//設定post方式的頭資訊，get不需要
		//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttpRequest.send(null);//k=v
	}
	
	//定義回撥函式（接收服務端的返回值）
	function callBack(){
		if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
			//接收服務端返回的資料
			var data = xmlHttpRequest.responseText;//服務端返回值為String格式
			if(data=="true"){
				alert("此號碼已存在");
			}else{
				alert("註冊成功！");
			}
		}else{
			
		}
	}
</script>
</head>
<body>
	電話：<input type="text" name="mobile" id="mobile"><br>
	<input type="button" onclick="registerGet()" value="註冊">
</body>
</html>

MobileServlet.java

package com.stx.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MobileServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		String mobile = request.getParameter("mobile"); 
		
		PrintWriter out = response.getWriter();
		//假設此時資料庫中只有一個號碼：12345123456
		System.out.println(request.getParameter("mobile"));
		if("12345123456".equals(mobile)) {
			out.write("true");	//servlet以輸出流的方式將資訊返回給客戶端
		}else {
			out.write("false");
		}
		out.close();
	}

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

}

3.例子-JQuery（推薦）

①ajax,get,post

$.ajax({
url:伺服器地址,
請求方式:get|post,
data:請求資料,
success:function(result,testStatus){

  },
error:function(xhr,errorMessage,e){

  }
});

$ajax.get(
伺服器地址,
請求資料,
function(result){

},
預期返回值型別(string/xml/text)
);

$.post(
伺服器地址,
請求資料,
function(result){

},
預期返回值型別(string/xml/text)
);

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
	function register(){
		var $mobile = $('#mobile').val();
		
		/*
		$.ajax({
		    url:"MobileServlet",
		    data:"mobile="+$mobile,
		    success:function(result,testStatus){
		    	if(result=="true"){
					alert("此號碼已存在");
				}else{
					alert("註冊成功！");
				}
		    },
		    error:function(xhr,errorMessage,e){
				alert("系統異常！");
		    }
		});
		*/
		
		/*
		$.post(
		    "MobileServlet",	
		    "mobile="+$mobile,
		    function(result){
				if(result=="true"){
					alert("此號碼已存在");
				}else{
					alert("註冊成功！");
				}
		    },
		    "text"
		);
		*/
		
		$.get(
		    "MobileServlet",	
		    "mobile="+$mobile,
		    function(result){
				if(result=="true"){
					alert("此號碼已存在");
				}else{
					alert("註冊成功！");
				}
		    }
		);
		
	}
</script>
</head>
<body>
	電話：<input type="text" name="mobile" id="mobile"><br>
	<input type="button" onclick="register()" value="註冊">
</body>
</html>

②load

$(xxx).load(
伺服器地址,
請求資料
);

將伺服器的返回值直接載入到$(xxx)所選擇的元素中

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
	function register(){
		$("#tip").load(
		    "MobileServlet",	
		    "mobile="+$mobile
		);
		
	}
</script>
</head>
<body>
	電話：<input type="text" name="mobile" id="mobile"><br>
	<input type="button" onclick="register()" value="註冊">
	<span id="tip"></span>
</body>
</html>

修改MobileServlet：

if("12345123456".equals(mobile)) {
	//out.write("true");	//servlet以輸出流的方式將資訊返回給客戶端
	out.write("註冊失敗，號碼已存在");
}else {
	//out.write("false");
	out.write("註冊成功");
}

③getJSON()

$.getJSON(
伺服器地址,
JSON格式的請求資料,
function(result){

}
);

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
	function register(){
		var $mobile = $('#mobile').val();
		
		$.getJSON(
		    "MobileServlet",	
		    {"mobile":$mobile},
		    function(result){
				if(result.msg=="true"){
					alert("此號碼已存在");
				}else{
					alert("註冊成功！");
				}
		    }
		);
	}
</script>
</head>
<body>
	電話：<input type="text" name="mobile" id="mobile"><br>
	<input type="button" onclick="register()" value="註冊">
	<span id="tip"></span>
</body>
</html>