本文將通過一個實際案例，詳細介紹如何使用AJAX進行增刪改查操作，并解釋如何處理跨域請求。AJAX（Asynchronous JavaScript And XML）是一種在不重新加載整個頁面的情況下更新部分網頁內容的技術，可以極大地提高用戶的交互體驗。跨域請求是指在一個域名下的網頁請求訪問另一個域名下的資源，由于瀏覽器的同源策略限制，跨域請求被默認禁止。因此，我們需要采取一些措施來解決跨域問題。

假設我們的案例是一個簡單的學生信息管理系統。我們的目標是通過AJAX實現以下功能：

1. 增加學生信息：用戶在界面中填寫學生的姓名、年齡和性別等信息，點擊"保存"按鈕，通過AJAX將數據發送到服務器保存。

function addStudent() {
// 獲取用戶輸入的學生信息
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var gender = document.querySelector('input[name="gender"]:checked').value;
// 構造POST請求的數據
var data = {
name: name,
age: age,
gender: gender
};
// 發送AJAX請求
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.example.com/addStudent", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功
alert("添加學生成功！");
// 刷新學生列表
getStudentList();
}
};
xhr.send(JSON.stringify(data));
}

2. 刪除學生信息：用戶選中一個學生，點擊"刪除"按鈕，通過AJAX將學生的ID發送到服務器進行刪除操作。

function deleteStudent(id) {
// 發送AJAX請求
var xhr = new XMLHttpRequest();
xhr.open("DELETE", "http://api.example.com/deleteStudent/" + id, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功
alert("刪除學生成功！");
// 刷新學生列表
getStudentList();
}
};
xhr.send();
}

3. 修改學生信息：用戶選中一個學生，點擊"編輯"按鈕，通過AJAX獲取學生的詳細信息，將信息顯示在表單中供用戶修改，然后點擊"保存"按鈕，通過AJAX將修改后的數據發送到服務器進行更新操作。

function editStudent(id) {
// 發送AJAX請求，獲取學生信息
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/getStudent/" + id, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 獲取學生信息成功
var student = JSON.parse(xhr.responseText);
// 將學生信息填充到表單中
document.getElementById("name").value = student.name;
document.getElementById("age").value = student.age;
document.querySelector('input[name="gender"][value="' + student.gender + '"]').checked = true;
}
};
xhr.send();
}
function updateStudent(id) {
// 獲取用戶修改后的學生信息
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var gender = document.querySelector('input[name="gender"]:checked').value;
// 構造PUT請求的數據
var data = {
name: name,
age: age,
gender: gender
};
// 發送AJAX請求
var xhr = new XMLHttpRequest();
xhr.open("PUT", "http://api.example.com/updateStudent/" + id, true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功
alert("更新學生信息成功！");
// 刷新學生列表
getStudentList();
}
};
xhr.send(JSON.stringify(data));
}

在以上的代碼中，我們通過AJAX發送了POST、DELETE、GET和PUT請求，分別實現了增加、刪除、獲取和更新學生信息的功能。而在發送AJAX請求時，我們將目標服務器的地址作為URL傳遞給`xhr.open()`方法，然后調用`xhr.send()`方法發送請求。為了處理跨域請求，我們需要在服務器端設置相應的響應頭，允許跨域訪問。

這是一個簡單的AJAX增刪改查跨域案例，通過AJAX技術，我們可以實現與服務器的數據交互，而不需要重新加載整個頁面。通過以上示例，您可以更好地理解如何使用AJAX進行增刪改查操作，并解決跨域問題。希望本文對您有所幫助！