??? ?? ???? JavaScript ??? ?? ? ??? ?? ?? ??

??? ?? ???? JavaScript? ????? ??? ? ?? ??? ?? ? ?? ?? ??? ??? ??? ?? ???? ????. ? ????? ??? ?? ? ???? ??? ?? ? ?? ??? ?? ???????.

1. XMLHttpRequest ??? ???? ??? ?? ???
XMLHttpRequest ??? HTTP ??? ??? ?? JavaScript? ?? ?????. ??? ??? ??? ? ? ??? ?? ??? ??? ?? ??? ????? ? ????. ??? XMLHttpRequest ??? ???? GET ??? ??? ??? ????.

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 處理返回的數(shù)據(jù)
  }
};
xhr.send();

? ????? ?? XMLHttpRequest ??? ?? ?? open ???? ???? ?? ???? URL? ???? ?? ?? ?????. ?????? ?? ??? ??? ????? true ?? ?????. ???? onreadystatechange ??? ???? ???? ??? ?? ??? ???????. ??? ReadyState? 4?? ?? ??? 200?? ??? ??? ???, ??? ???? responseText ??? ?? ?? ? ??? ?????. ????, JSON.parse ???? ?? ??? ???? JavaScript ??? ???? ?? ??? ??? ? ????.

2. ??? ??? Fetch API ??
XMLHttpRequest ?? ??? ?? ????? ??? ??? ???? ?? ??? Fetch API? ?????. Fetch API? ?? ???? ??? ??? ???? Promise ? ?? ??? ??? ?????. ??? Fetch API? ???? GET ??? ??? ????.

fetch("http://example.com/api/data")
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("請求失敗");
    }
  })
  .then(function(data) {
    // 處理返回的數(shù)據(jù)
  })
  .catch(function(error) {
    // 處理異常
  });

? ????? ???? ???? ???? ??? URL? ?????. fetch ???? Promise ??? ????, ?? ?? ? ???? ???? then ???? ?? ??? ? ????. then ?????? ?? ??? ?? ??? 200?? ?????. ???? response.json ???? ???? ??? ???? JavaScript ??? ?????. ???? then ????? ??? ???? ??? ??? ? ????. ??? ???? ??? ????, ?? catch ???? ??? ? ????.

3. ??? ?? ??
??? ???? ??? ???? ??? ? ??? ???? ??? ???? ? ?? ? ?? ??? ????.

1. ??? ??? ??
   ??? ???? ??? ???? ??? ? ?? ?????. ??? ??? ??????. ??? ???? ??? ? ??? ???? ???? HTML ?? ?? ??? ???? ??? ? ????. ?:

var name = "John";
var age = 30;
var html = `<div>Name: ${name}</div><div>Age: ${age}</div>`;

2. ??? ?? ??
   ??? ??? ES6? ??? ??? ?? ?? ???? ??? ? ???? ???? ?? ????? this ?? ??? ? ????. ??? ???? ??? ? ??? ??? ???? ??? ?? ? ??? ??? ? ????. ?:

var users = [{ name: "John", age: 30 }, { name: "Mary", age: 25 }];
var names = users.map(user => user.name);

3. ?? ??? ?? ?? ???? ???.
   ?? ??? ?? ?? ???? ??? ?? ????? ??????. ???? ??? ??? ? Promise ?? async/await? ???? ?? ??? ?? ?? ???? ?? ??? ? ????. ?:

fetch("http://example.com/api/data")
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("請求失敗");
    }
  })
  .then(function(data) {
    return data.filter(user => user.age > 18);
  })
  .then(function(filteredData) {
    // 處理過濾后的數(shù)據(jù)
  })
  .catch(function(error) {
    // 處理異常
  });

? ????? ?? ?? ??? ???? ?? ?? then ???? ?? ???? ????? ?????.

4. ??
????? ????? JavaScript ??? ??? ??? ??? ???? ?????. XMLHttpRequest ??? Fetch API? ???? ??? ?? ??? ?? ??? ???? ?? ???? ??? ??? ??? ???? ? ????. ?? ?? ??? ????? ?? ? ??? ?? ? ??? ??? ??? ??? ????.

? ??? ??? ?? ??? JavaScript ??? ?? ? ??? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!