資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學在 AJAX 中解釋 JSON？
JSON，即 JavaScript 物件表示法，是一種用於交換資料的簡單格式。它是一種人類可讀且機器可理解的格式。它基於 1999 年 12 月釋出的標準 ECMA-262 第三版的 JavaScript 程式語言的一部分。儘管使用了 C 家族語言（C、C++、Java、JavaScript、Perl、Python 等等）程式設計師可以識別的約定，但 JSON 是一種完全獨立於程式語言的文字格式。由於其特性和簡單性，JSON 是交換資料的最佳語言。
AJAX 是一種用於構建互動式 Web 應用程式的 Web 開發方法。網頁可以使用 AJAX 從伺服器請求資料，而無需重新載入頁面。JSON 格式是 AJAX 技術用來表示資料的格式之一。我們可以輕鬆地將任何資訊或資料轉換為 JSON 格式，這非常容易理解。
JSON 物件
在現代世界中，大多數開發者使用 JSON 而不是 XML 來交換伺服器的資料。在 AJAX 中，JSON 比 XML 有一些優勢。與 XML 相比，JSON 的程式碼更短，這使得資料傳輸更容易。JSON 也更容易被機器和人類理解。最後，JSON 可以輕鬆地表示字串、數字、布林值、陣列或 Null 值。
JavaScript 物件可以很容易地轉換為 JSON 併發送到伺服器。然後將在伺服器端處理 JSON 資料。使用 JSON 物件的 stringify() 和 parse() 方法，將 JavaScript 物件轉換為 JSON 字串，然後再轉換回 JavaScript 物件。
JSON.stringify() − 此函式將 JavaScript 物件轉換為 JSON 格式的字串。
JSON.parse() − 可以將 JSON 字串轉換為 JavaScript 物件。
XMLHttpRequest 的屬性和方法
AJAX 使用請求和響應模型，這意味著它可以向伺服器請求任何內容並接收返回的響應。我們有一個內建的 Javascript 物件叫做“XMLHttpRequest”，我們可以用它來發送響應和接收請求。以下是 XMLHttpRequest 的一些屬性和方法的描述：
new XMLHttpRequest − 這將建立一個新的物件，我們可以用它來提交請求和獲取響應。
open() − 此函式允許任何請求。它需要幾個引數，包括請求型別（GET 或 POST）、伺服器檔案位置等。
onload − XMLHttpRequest 物件的 onload 屬性指定在資料載入完成後呼叫的函式。
send() − send() 函式將請求傳送到伺服器。如果用於 POST 請求，它將字串作為引數。
status − 用於表示任何請求的狀態碼的 XMLHttpRequest 屬性是 status。
onreadystatechange − 此 XMLHttpRequest 屬性允許您指定一個函式，該函式將在就緒狀態更改時呼叫。XMLHttpRequest 物件還有一個名為 readystate 的屬性。
responseText − 此 XMLHttpRequest 屬性將響應的資料作為字串返回。
readystate − 這標識請求的當前狀態。它最多有 5 個可能的值，每個值都有其獨特的含義。0 表示請求尚未啟動。1 表示已成功連線到伺服器。2 表示已收到請求。3 表示正在處理請求。4 表示請求已完成。
使用 AJAX 傳送請求
以下是使用 AJAX 傳送請求的步驟：
建立一個新的 XMLHttpRequest 物件
指定您要請求的 URL
呼叫 open() 方法，傳入 HTTP 方法和 URL 作為引數
為 onreadystatechange 事件新增事件監聽器
呼叫 send() 方法，傳入要與請求一起傳送的任何資料
處理響應
示例 1 - 透過 AJAX 獲取 JSON 物件
在這個例子中，我們使用 AJAX 執行 HTTP 請求，並以 JSON 的形式獲取響應。我們使用 XMLHttpRequest 物件以及 open 和 onload 方法來執行 AJAX 呼叫。我們使用按鈕點選事件來執行 AJAX 呼叫並在網頁上顯示響應。
<html>
<body>
<h2> JSON and AJAX </h2>
<button onclick = "getJSON()">
Click on the button to get JSON data by AJAX call
</button>
<div id = "root" style = "border: 1px solid black; padding: 1%"> </div>
<script>
function getJSON() {
//AJAX Call
let http = new XMLHttpRequest()
http.open('GET', 'https://jsonplaceholder.typicode.com/posts/1')
http.onload = function () {
document.getElementById('root').innerHTML =
'JSON response: <br /><br />' + this.response
}
http.send()
}
</script>
</body>
</html>
示例 2：透過 AJAX 傳送 JSON 物件
在這個例子中，我們使用 AJAX 執行 HTTP 請求並將 JSON 資料傳送到伺服器。我們在 AJAX 呼叫中使用 POST 方法將資料傳送到伺服器。我們使用 XMLHttpRequest 物件以及 open 和 onload 方法。我們使用按鈕點選事件來執行 AJAX 呼叫，並在 JSON 資料成功傳送到伺服器時顯示一條訊息。
<html>
<body>
<h2> JSON and AJAX </h2>
<p id = "mypara" style = "border: 1px solid black"> JSON object: </p>
<button onclick = "postJSON()">
Click on the button to send JSON data by AJAX call
</button>
<div id = "root" style = "border: 1px solid black; padding: 1%"></div>
<script>
let JSON_OBJECT =
'{"name": "ABC", "class": 10, "roll": 12, "subject": "Computer"}'
//Showing JSON_OBJECT in the webpage
document.getElementById('mypara').innerHTML += '<br />' + JSON_OBJECT
function postJSON() {
//AJAX Call
let http = new XMLHttpRequest()
http.open('POST', 'https://jsonplaceholder.typicode.com/posts/')
http.onload = function () {
document.getElementById('root').innerHTML =
'JSON data send successfully!'
}
http.send(JSON_OBJECT)
}
</script>
</body>
</html>
在本教程中，我們學習了 AJAX 中的 JSON。我們學習了 JSON 物件、XMLHttpRequest 的屬性和方法以及使用 AJAX 傳送請求。
4K+ 次瀏覽
