看了就會用的ajax

初學愛好者發表於2020-09-30

1、什麼是Ajax？

AJAX = Asynchronous JavaScript and XML (非同步的 JavaScript 和 XML)，是指一種建立互動式、快速動態網頁應用的網頁開發技術，無需重新載入整個網頁的情況下，能夠更新區域性網頁的技術。瞭解Ajax歷史

Ajax 不是一種新的程式語言，而是一種應用於建立更好更快以及互動性更強的Web應用程式的技術

Ajax的核心是XMLHttpRequest物件（xhr）。XHR為向伺服器傳送請求和解析伺服器響應提供了介面，能夠以非同步方式從伺服器獲取新資料。什麼是XMLHttpRequest？

2、Ajax示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽造AJAX</title>
</head>
<body>
	
	<div>
		<p>請輸入要載入的地址：</p>
		<p>
			<input type="text" id="url" value="https://www.baidu.com" />
			<input type="button" value="提交" onclick="loadPage()" />
		</p>
	</div>
	
	<div>
		<h3>
			載入位置：
		</h3>
		<iframe style="width: 75%; height: 500px" id="iframePosition">
		
		</iframe>
	</div>

<script type="text/javascript">
	function loadPage() {
		var targetURL = document.getElementById('url').value;
		console.log(targetURL);
		document.getElementById('iframePosition').src = targetURL;
	}
</script>
</body>
</html>

  • 訪問結果

    image.png

3、jQuery Ajax本質就是XMLHttpRequest，對它進行了封裝，方便呼叫！

1、jQuery.get(...)
	所有引數：
       url: 待載入頁面的URL地址
      data: 待傳送 Key/value引數
   success: 載入成功時的回撥函式
  dataType: 返回內容格式, xml,json,script,text,html
             
2、jQuery.post(...)
	所有引數：
       url: 待載入頁面的URL地址
      data: 待傳送 Key/value引數
   success: 載入成功時的回撥函式
  dataType: 返回內容格式, xml,json,script,text,html

3、jQuery.ajax(...)
    部分引數：
       url: 請求地址
      type: 請求方式，GET,POST(1.9.0之後用method)
   headers: 請求頭 
      data: 要傳送的資料
contentType: 即將傳送資訊至伺服器的內容編碼型別
     async: 是否非同步
    timout: 設定請求超時時間（毫秒）
beforeSend: 傳送請求前執行的函式（全域性）
  complete: 完成之後執行的回撥函式（全域性）
   success: 成功之後執行的回撥函式（全域性）
     error: 失敗之後執行的回撥函式（全域性）
   accepts: 通過請求頭髮送給伺服器，告訴伺服器當前客戶端可接受的資料型別  
  dataType: 將伺服器端返回的資料轉換成指定型別            
  	 "xml": 將伺服器端返回的內容轉換成xml格式
    "text": 將伺服器端返回的內容轉成普通文字格式
    "html": 將伺服器端返回的內容轉成普通文字格式
  "script": 嘗試將返回值當作JavaScript去執行，然後再將伺服器端返回的內容轉成普通文字格式
    "json": 將伺服器端返回的內容轉換成相應的JavaScript物件

4、返回Json字串例項：

  • 4.1 返回List集合

    • 4.1.1 在 WebContent下新建一個ajax.jsp檔案

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX請求資料</title>
</head>
<body>
	<input type="button" id="btn" value="獲取資料" />
	<table width="40%" align="center">
		<thead>
			<tr>
				<td>姓名</td>
				<td>年齡</td>
			</tr>
		</thead>
		<tbody id="content">
		</tbody>
	</table>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script type="text/javascript">
	$("#btn").click(function () {
		$.ajax({
			url: "ajax",
			type: "get",
			dataType:"json",
			success: function(data) {
				//console.log(data);
				
				/* 將返回的資料載入到tbody中 */
				var dataHtml = "";
				// 遍歷 data中的值，然後拼接成 html進行顯示
				for (var i=0; i<data.length; i++) {
					dataHtml += "<tr>" + 
								"<td>" + data[i].username + "</td>" +
								"<td>" + data[i].age + "</td>"
								+ "</tr>"
				}
				// 獲取 tbody的 ID，將資料新增到 tbody中
				$("#content").html(dataHtml);
			}
		});
	});
	
</script>
</body>
</html>

    • 4.1.2 新建一個 User實體類

      public class User {

	private String username;
	private Integer age;
	
	public User() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	public User(String username, Integer age) {
		super();
		this.username = username;
		this.age = age;
	}

	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public Integer getAge() {
		return age;
	}
	public void setAge(Integer age) {
		this.age = age;
	}
	
	@Override
	public String toString() {
		return "User [username=" + username + ", age=" + age + "]";
	}
}

    • 4.1.3 在 Controller包中新建一個 AjaxController類

      @Controller
public class AjaxController {
	
	@GetMapping("/ajax")
	@ResponseBody
	public List<User> toAjax() {
		
		List<User> list = new ArrayList<User>();
		
		// 偽造使用者資料
		User user1 = new User("小明", 16);
		User user2 = new User("小紅", 17);
		User user3 = new User("小李", 18);
		// 將使用者資料新增到list集合中
		list.add(user1);
		list.add(user2);
		list.add(user3);
		
		return list;
	}
}

      @ResponseBody的作用其實是將java物件轉為json格式的資料

      注意：在使用此註解之後不會再走檢視處理器，而是直接將資料寫入到輸入流中，他的效果等同於通過response物件輸出指定格式的資料。

      @RequestBody與 @ResponseBody的區別

    • 4.1.4 訪問結果

      image.png

5、使用Ajax校驗使用者登入例項

  • 5.1 在AjaxController類中新增 login()方法

    @PostMapping(value = "/login", produces = "text/html;charset=UTF-8")
	@ResponseBody
	public String login(String username, String password) {
		String message = "";
		if (username != null) {
			if ("admin".equals(username)) {
				message = "OK";
			} else {
				message = "使用者名稱或密碼有誤！";
			}
		}
		if (password != null) {
			if ("123456".equals(password)) {
				message = "OK";
			} else {
				message = "使用者名稱或密碼有誤！";
			}
		}
		
		return message;
	}

  • 5.2 新建一個login.jsp頁面

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"
        +request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX校驗使用者登入</title>
</head>
<body>
	
	<form action="" method="post">
		使用者名稱：<input type="text" id="name" name="username" onblur="checkName()" />
		<span id="nameInfo">使用者名稱,4-20位字母或數字,非數字開頭</span>
		<br>
		密碼：<input type="password" id="pwd" name="password" onblur="checkPwd()" />
		<span id="pwdInfo"></span>
		<br>
		<input type="submit" value="登 錄" />
	</form>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script type="text/javascript">
	// 校驗使用者名稱
	function checkName() {
		$.post({
			url: "login",
			data: {"username": $("#name").val()},
			success: function(data) {
				if (data.toString() == "OK") { // 資訊校驗成功
					$("#nameInfo").css("color", "green");
				} else {
					$("#nameInfo").css("color", "red");
				}
				$("#nameInfo").html(data);
			}
		});
	}
	// 校驗密碼
	function checkPwd() {
		$.post({
			url: "login",
			data: {"password": $("#pwd").val()},
			success: function(data) {
				if (data.toString() == "OK") { // 資訊校驗成功
					$("#pwdInfo").css("color", "green");
				} else {
					$("#pwdInfo").css("color", "red");
				}
				$("#pwdInfo").html(data);
			}
		});
	}
</script>
</body>
</html>

  • 5.3 訪問結果

    • 校驗失敗

      image.png

    • 校驗成功

      image.png

總結：

  • Ajax三部曲

    1. 編寫對應處理的Controller，返回訊息或者字串或者json格式的資料；

    2. 編寫ajax請求

      1. url: Controller請求

      2. data: 鍵值對

      3. success: 回撥函式

    3. 給Ajax繫結事件，點選 .click，失去焦點onblur，鍵盤彈起 keyup，鍵盤按下 keydown

相關文章