Ajax的初步學習

一、什么是 Ajax？

Ajax (Asynchronous JavaScript and XML) 是一種無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。

主要特性：

異步性 (Asynchronous):?可以在不阻塞用戶界面的情況下與服務器進行通信。
局部更新 (Partial Updates):?只更新網頁的一部分，而不是整個頁面，提高了用戶體驗。
基于標準：?Ajax 不是一種新技術，而是幾種現有技術的組合，包括JavaScript, XML, HTML, CSS。

二、Ajax 的核心對象：XMLHttpRequest

XMLHttpRequest?(XHR) 對象是 Ajax 的核心。它允許瀏覽器在后臺與服務器進行通信。

三、基本語法和步驟 (XMLHttpRequest)

1.創建 XMLHttpRequest 對象：

let xhr;if (window.XMLHttpRequest) {  // 現代瀏覽器xhr = new XMLHttpRequest();
} else {  // IE6, IE5xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2.配置請求 (open 方法)：

xhr.open(method, url, async, username, password);

method: HTTP 請求方法 (GET, POST, PUT, DELETE 等)。通常使用 GET 或 POST。
url: 服務器端腳本的 URL。
async: (可選) 布爾值，指示請求是否異步執行。默認為?true（異步）。
username: (可選) 用于身份驗證的用戶名。
password: (可選) 用于身份驗證的密碼。

xhr.open('GET', 'data.txt', true); // 異步 GET 請求
xhr.open('POST', 'submit.php', true); // 異步 POST 請求

3.設置請求頭 (可選)：

xhr.setRequestHeader(header, value);

header: 請求頭的名稱。
value: 請求頭的值。

重要：?對于?POST?請求，通常需要設置?Content-Type?請求頭。

示例：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 常用于 POST
xhr.setRequestHeader('Content-Type', 'application/json'); //  POST 發送 JSON 數據

?4.發送請求 (send 方法)：

xhr.send(body); // body 是要發送的數據

body: (可選) 要發送到服務器的數據。

對于?GET?請求，通常?body?為?null。數據應該附加到 URL 上（例如：url?param1=value1&param2=value2）。
對于?POST?請求，body?可以是：
- null?(如果沒有數據要發送)
- URL 編碼的字符串 (例如：param1=value1&param2=value2)
- JSON 字符串 (需要設置?Content-Type?為?application/json)
- FormData?對象?

xhr.send();  // GET 請求，沒有數據
xhr.send('name=John&age=30'); // POST 請求，URL 編碼的數據
xhr.send(JSON.stringify({name: "John", age: 30}));  // POST 請求，JSON 數據

5.處理服務器響應：

使用?onreadystatechange?事件監聽?xhr.readyState?的變化。

xhr.onreadystatechange = function() {if (xhr.readyState === 4) {  // 請求完成if (xhr.status === 200) { // 請求成功// 處理響應數據let responseText = xhr.responseText; // 字符串形式的響應數據let responseXML = xhr.responseXML;  // 如果服務器返回 XML，可以作為 XML 文檔訪問// 根據你的需求更新頁面等console.log("Response: " + responseText);} else {// 處理錯誤console.error("請求失敗，狀態碼：" + xhr.status);}}
};

xhr.readyState: 表示請求的狀態。
- 0: 請求未初始化
- 1: 服務器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應已就緒
xhr.status: HTTP 狀態碼。
- 200: "OK" (成功)
- 404: "Not Found" (未找到)
- 500: "Internal Server Error" (服務器內部錯誤) 等等。

四、示例

?1.完整的 GET 請求例子?

<!DOCTYPE html>
<html>
<head>
<title>簡單的 Ajax GET 請求</title>
</head>
<body><button onclick="loadData()">加載數據</button>
<div id="result"></div><script>
function loadData() {let xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {document.getElementById("result").innerHTML = xhr.responseText;} else {document.getElementById("result").innerHTML = "Error: " + xhr.status;}}};xhr.open("GET", "data.txt", true);xhr.send();
}
</script></body>
</html>

?創建一個名為data.txt的文件，內容例如：Hello, Ajax! This is data loaded from the server.

?2.完整的 POST 請求例子

<!DOCTYPE html>
<html>
<head>
<title>簡單的 Ajax GET 請求</title>
</head>
<body><button onclick="loadData()">加載數據</button>
<div id="result"></div><script>
function loadData() {let xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {document.getElementById("result").innerHTML = xhr.responseText;} else {document.getElementById("result").innerHTML = "Error: " + xhr.status;}}};xhr.open("GET", "data.txt", true);xhr.send();
}
</script></body>
</html>

創建一個名為submit.php的PHP文件（或者其他服務器端語言的文件），例如：

<?php$name = $_POST["name"];echo "你好, " . htmlspecialchars($name) . "!"; // 使用 htmlspecialchars 防止 XSS 攻擊
?>

五、使用 FormData 上傳文件

FormData?對象提供了一種表示表單數據的鍵/值對的簡單方式，也可以用于上傳文件。

<!DOCTYPE html>
<html>
<head>
<title>Ajax 上傳文件</title>
</head>
<body><input type="file" id="fileInput"><br><br>
<button onclick="uploadFile()">上傳文件</button>
<div id="result"></div><script>
function uploadFile() {let xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {document.getElementById("result").innerHTML = xhr.responseText;} else {document.getElementById("result").innerHTML = "Error: " + xhr.status;}}};const fileInput = document.getElementById("fileInput");const file = fileInput.files[0];const formData = new FormData();formData.append("file", file); // 添加文件到 FormDataxhr.open("POST", "upload.php", true);xhr.send(formData); // 不需要手動設置 Content-Type，瀏覽器會自動設置
}
</script></body>
</html>

創建一個名為upload.php的PHP文件（或者其他服務器端語言的文件），例如：

<?php
if (isset($_FILES["file"])) {$file = $_FILES["file"];// 安全起見，你應該進行各種檢查，例如文件類型、大小等// 示例：$allowed_types = array("image/jpeg", "image/png", "application/pdf");if (!in_array($file["type"], $allowed_types)) {echo "Error: Invalid file type.";exit;}$upload_dir = "uploads/"; // 確保該目錄存在，并且有寫入權限$filename = basename($file["name"]); // 獲取文件名$target_path = $upload_dir . $filename;if (move_uploaded_file($file["tmp_name"], $target_path)) {echo "文件上傳成功！文件名： " . htmlspecialchars($filename);} else {echo "文件上傳失敗。";}} else {echo "沒有文件上傳。";
}
?>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/87700.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/87700.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/87700.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！