資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究解釋 AJAX 中回撥函式的作用
AJAX（非同步 JavaScript 和 XML）不是一種程式語言，而是一種建立更具互動性的 Web 應用程式的技術。與傳統的 Web 應用程式不同，傳統的 Web 應用程式在與伺服器互動時會將我們重定向到一個新頁面，而AJAX則在不通知使用者請求已發出情況下將資料載入到螢幕上。
優勢
動態顯示內容，無需重新載入 HTML 頁面。
與使用者互動速度更快。
更新頁面中的資料，無需重定向使用者。
在與伺服器通訊在後臺進行時，使用者可以繼續使用網站。
回撥函式是什麼意思？
回撥函式是指作為引數傳遞給另一個函式並在內部呼叫以執行所需任務的函式。
在AJAX中，一旦對伺服器的請求完成，就會呼叫回撥函式。響應和 AJAX 呼叫的狀態會傳遞到此函式內部。回撥函式使用獲得的響應執行所需的操作。因此，它在 AJAX 中非常重要，因為它完全是關於處理請求的資料。
使用回撥函式有兩種方法
匿名回撥函式
命名回撥函式
匿名回撥函式
步驟 1：建立 XMLHttpRequest
XMLHttpRequest 是 javascript 的內建物件，透過它可以將資料傳輸到伺服器和從伺服器傳輸資料。因此，請求被髮送到伺服器，並且接收響應。
步驟 2：使用 open() 方法
XMLHttpRequest 的一種方法用於向伺服器建立請求。
語法
open(method, url, async, user, password)
此處，async、user 和 password 屬性是可選的。
method – GET、POST、PUT、DELETE 用於 HTTP URL。
url – 需要傳送請求的統一資源定位符
async – 指示請求是否非同步傳送。預設值為“true”。
user、password – 如果涉及身份驗證，則需要提及使用者名稱或使用者名稱和密碼。預設值為“null”。
async = “true” 非同步處理請求，即它不會凍結使用者，直到伺服器收到響應。
async = “false” 表示同步處理請求。
步驟 3：使用 send() 方法
這也是 XMLHttpRequest 的一種方法，用於傳送請求。如果請求是非同步的（open() 的 async 屬性為 true），則在成功傳送請求後返回此請求。
如果是同步的，則該方法在從伺服器收到響應之前不會返回；使用者應保持空閒狀態。
步驟 4：使用 onreadystatechange 屬性
為了管理響應，我們使用名為 onreadystatechange 的 XMLHttpRequest 屬性。
步驟 5：呼叫回撥函式
現在透過將 onreadystatechange 附加為匿名函式來呼叫回撥函式。現在透過在此函式內部編寫所有程式碼來對接收到的資料執行所需的操作。
注意
Onreadystatechange 屬性定義了在就緒狀態（XMLHttpRequest 的狀態）更改時要執行的函式。
就緒狀態值-
0 - 請求未初始化
1 - 伺服器連線已建立
2 - 請求已接收
3 - 正在處理請求
4 - 請求已完成，響應已準備就緒
HTTP 狀態值-
200 - 確定
403 - 禁止
404 - 未找到，等等。
示例 1
讓我們來看一個簡單的示例，其中我們根據按鈕點選在 HTML 頁面上顯示一些內容。請求使用 AJAX 傳送到伺服器。當 readyState 變為 4 時，我們顯示按鈕的點選次數。
callbackdemo.html
<html>
<body>
<h2> Anonymous callback function </h2>
<button id = "btn" onclick = "callback_fn()"> Click Here </button>
<div id = "info" style = "width: 200px; border: 1px solid black; padding: 1%"> </div>
<script>
var count = 0;
var string;
let info = document.getElementById('info')
function callback_fn() {
info.innerHTML = 'AJAX Call <br /><br />'
//AJAX Call
let http = new XMLHttpRequest();
http.onreadystatechange = function () {
if(this.readyState == 4){
count++;
string = count.toString();
info.innerHTML += 'Button clicked '+string+' time <br/>';
}
}
info.innerHTML += 'Started here! <br /><br />'
http.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true)
http.onload = function () {
info.innerHTML += '<br />AJAX Call Completed!'
}
http.send()
}
</script>
</body>
</html>
注意- 我們還可以新增事件偵聽器，以便透過單擊 HTML 的按鈕或其他元素來發送請求。
命名回撥函式
步驟 1- 使用名稱定義回撥函式
步驟 2- 建立 XMLHttpRequest
步驟 3- 使用 open() 方法
步驟 4- 使用 send() 方法
步驟 5- 使用 XMLHttpRequest 的 onreadystatechange 屬性
步驟 6- 呼叫回撥函式
透過將其附加到 onreadystatechange 屬性來呼叫命名回撥函式。
首先，使用適當的名稱定義回撥函式，幷包含處理從伺服器接收到的響應的程式碼。
示例 2
這是一個使用命名回撥函式在 HTML 頁面上顯示來自 JSON 檔案的資料的簡單示例。使用 AJAX 傳送請求以獲取檔案中的資料。
當在 html 頁面上單擊按鈕時，會呼叫 click_fn( )，它在傳送請求後會呼叫回撥函式。此處，回撥函式的名稱為“named_callback”。
callbackdemo.html
<html> <head> <script type = "text/javascript" src = "script.js”> </script> </head> <body> <h2> Named Callback Function in AJAX </h2> <button id = "btn" onclick = "click_fn()"> Click Here </button> <br> <br> <br> <h3 id = "info"></h3> </body> </html>
script.js
var btn = document.getElementById("btn");
function named_callback() {
if (this.readyState == 4 && this.status == 200) {
var txt = "";
var data = JSON.parse(this.responseText);
for(i=0;i<data.length;i++){
var x=i+1;
txt += "<u>"+"Details of person "+x.toString()+"</u>"+"<br>";
var age=(data[i].Age);
txt += "<p>" +data[i].Name + " age is " + age + ", loves to play "+data[i].Sport+".</p>" ;
}
document.getElementById("info").innerHTML = txt;
}
}
function click_fn() {
var http = new XMLHttpRequest();
http.open("GET", "details.json");
http.send();
http.onreadystatechange = named_callback;
}
details.json
[
{"Name":"Sreya", "Age":"21", "Sport":"Badminton"},
{"Name":"Suresh", "Age":"23", "Sport":"Cricket"}
]
2K+ 次檢視
