// 1. 創(chuàng)建XMLHttpRequest對(duì)象
const xhr = new XMLHttpRequest();

// 2. 配置請(qǐng)求（請(qǐng)求方法、URL、是否異步）
// GET請(qǐng)求：若需傳參，可在URL后拼接（如"?id=1&name=test"）
xhr.open('GET', 'https://api.example.com/user/list', true);

// 3. 設(shè)置請(qǐng)求頭（可選，根據(jù)后端要求配置，如POST請(qǐng)求傳JSON需設(shè)置）
// 若為POST請(qǐng)求，需添加：xhr.setRequestHeader('Content-Type', 'application/json');

// 4. 監(jiān)聽請(qǐng)求狀態(tài)變化，處理響應(yīng)
xhr.onreadystatechange = function() {
  // readyState=4表示請(qǐng)求已完成，status=200表示響應(yīng)成功
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 解析后端返回的JSON數(shù)據(jù)（若返回非JSON則直接用xhr.responseText）
    const responseData = JSON.parse(xhr.responseText);
    console.log('請(qǐng)求成功，返回?cái)?shù)據(jù)：', responseData);
    // 后續(xù)業(yè)務(wù)邏輯：如渲染頁面數(shù)據(jù)
  } else if (xhr.readyState === 4) {
    // 請(qǐng)求完成但響應(yīng)失敗（如404、500錯(cuò)誤）
    console.error('請(qǐng)求失敗，狀態(tài)碼：', xhr.status);
  }
};

// 5. 發(fā)送請(qǐng)求（POST請(qǐng)求需傳參，如xhr.send(JSON.stringify({id: 1}))）
xhr.send();

// 6. 處理網(wǎng)絡(luò)錯(cuò)誤
xhr.onerror = function() {
  console.error('網(wǎng)絡(luò)錯(cuò)誤，請(qǐng)求無法發(fā)送');
};

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

$.ajax({
  url: 'https://api.example.com/user/add', // 請(qǐng)求URL
  type: 'POST', // 請(qǐng)求方法（GET/POST/PUT/DELETE等）
  contentType: 'application/json', // 發(fā)送數(shù)據(jù)的格式
  data: JSON.stringify({ // 發(fā)送給后端的數(shù)據(jù)
    name: '張三',
    age: 25
  }),
  dataType: 'json', // 預(yù)期后端返回的數(shù)據(jù)格式（自動(dòng)解析）
  success: function(response) { // 請(qǐng)求成功回調(diào)
    console.log('添加用戶成功：', response);
  },
  error: function(xhr, status, error) { // 請(qǐng)求失敗回調(diào)
    console.error('添加用戶失?。?, status, error);
  },
  complete: function() { // 請(qǐng)求完成（無論成功/失?。┗卣{(diào)
    console.log('請(qǐng)求結(jié)束');
  }
});

$.get();
	語法：
    $.get("請(qǐng)求地址"，"請(qǐng)求參數(shù)",function(形參){
        
    })；
$.post();
	語法：
    $.post("請(qǐng)求地址"，"請(qǐng)求參數(shù)",function(形參){
        
    })；

// GET請(qǐng)求：獲取用戶列表
$.get('https://api.example.com/user/list', { page: 1, size: 10 }, function(response) {
  console.log('用戶列表：', response);
}, 'json').fail(function(error) {
  console.error('獲取失?。?, error);
});

// POST請(qǐng)求：添加用戶
$.post('https://api.example.com/user/add', { name: '李四', age: 30 }, function(response) {
  console.log('添加成功：', response);
}, 'json').fail(function(error) {
  console.error('添加失敗：', error);
});

# npm安裝
npm install axios
# 或CDN引入
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

// 1. 基礎(chǔ)GET請(qǐng)求（帶參數(shù)）
axios.get('https://api.example.com/user/list', {
  params: { page: 1, size: 10 } // 自動(dòng)拼接為URL參數(shù)
})
.then(function(response) {
  console.log('請(qǐng)求成功：', response.data); // response.data直接是解析后的JSON
})
.catch(function(error) {
  // 統(tǒng)一處理錯(cuò)誤（包括網(wǎng)絡(luò)錯(cuò)誤、404、500等）
  if (error.response) {
    // 有響應(yīng)但狀態(tài)碼錯(cuò)誤
    console.error('響應(yīng)錯(cuò)誤，狀態(tài)碼：', error.response.status);
    console.error('錯(cuò)誤數(shù)據(jù)：', error.response.data);
  } else if (error.request) {
    // 無響應(yīng)（網(wǎng)絡(luò)錯(cuò)誤）
    console.error('網(wǎng)絡(luò)錯(cuò)誤，無響應(yīng)：', error.request);
  } else {
    // 請(qǐng)求配置錯(cuò)誤
    console.error('請(qǐng)求配置錯(cuò)誤：', error.message);
  }
});

// 2. 基礎(chǔ)POST請(qǐng)求（傳JSON數(shù)據(jù)）
axios.post('https://api.example.com/user/add', {
  name: '王五',
  age: 28
}, {
  headers: { 'Content-Type': 'application/json' } // 可選，默認(rèn)已支持JSON
})
.then(response => {
  console.log('添加成功：', response.data);
})
.catch(error => {
  console.error('添加失?。?, error);
});

// 3. 結(jié)合async/await（更簡潔的異步寫法）
async function getUserList() {
  try {
    const response = await axios.get('https://api.example.com/user/list', {
      params: { page: 1, size: 10 }
    });
    console.log('用戶列表：', response.data);
    return response.data;
  } catch (error) {
    console.error('獲取失?。?, error);
    throw error; // 拋出錯(cuò)誤供上層處理
  }
}
// 調(diào)用函數(shù)
getUserList();

// 4. 高級(jí)功能：請(qǐng)求攔截器（添加Token等）
axios.interceptors.request.use(
  config => {
    // 給所有請(qǐng)求添加Token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 1. 基礎(chǔ)GET請(qǐng)求
fetch('https://api.example.com/user/list?page=1&size=10')
.then(function(response) {
  // 注意：fetch僅在網(wǎng)絡(luò)錯(cuò)誤時(shí) reject，404、500等狀態(tài)碼仍會(huì) resolve
  if (!response.ok) {
    // 手動(dòng)處理HTTP錯(cuò)誤
    throw new Error(`請(qǐng)求失敗，狀態(tài)碼：${response.status}`);
  }
  // 解析響應(yīng)數(shù)據(jù)（支持json()、text()、blob()等）
  return response.json();
})
.then(function(data) {
  console.log('用戶列表：', data);
})
.catch(function(error) {
  console.error('請(qǐng)求錯(cuò)誤：', error.message);
});

// 2. 基礎(chǔ)POST請(qǐng)求（傳JSON數(shù)據(jù)）
fetch('https://api.example.com/user/add', {
  method: 'POST', // 請(qǐng)求方法
  headers: {
    'Content-Type': 'application/json' // 數(shù)據(jù)格式
  },
  body: JSON.stringify({ name: '趙六', age: 32 }), // 發(fā)送的數(shù)據(jù)（需轉(zhuǎn)為字符串）
  credentials: 'include' // 跨域時(shí)攜帶Cookie（可選）
})
.then(response => {
  if (!response.ok) {
    throw new Error(`狀態(tài)碼錯(cuò)誤：${response.status}`);
  }
  return response.json();
})
.then(data => {
  console.log('添加成功：', data);
})
.catch(error => {
  console.error('添加失敗：', error);
});

// 3. 結(jié)合async/await
async function addUser() {
  try {
    const response = await fetch('https://api.example.com/user/add', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: '孫七', age: 26 })
    });
    if (!response.ok) {
      throw new Error(`請(qǐng)求失?。?{response.status}`);
    }
    const data = await response.json();
    console.log('添加成功：', data);
    return data;
  } catch (error) {
    console.error('錯(cuò)誤：', error);
    throw error;
  }
}
// 調(diào)用函數(shù)
addUser();