什麼是AJAX?

理論文章 JavaScript AJAX

Created At : 2019-04-24 13:00

Views 👀 :

同步
非同步
1. Example4 - Callback function

AJAX = Asynchronous JavaScript And XML

關於AJAX的小筆記，讓不懂同步與非同步的人透過一些小例子可以快速的了解什麼是同步與非同步

同步

Example1

var count = 10000000;
while(count--) {
  // TODO Something
}
console.log('執行到這應該很久了');

Example2

假設有個同步function sendRequest()

var result = sendRequest('https://api.twitch.tv/kraken/games/top?client_id=xxx');
console.log(result); // 等很久才被執行到

Example3

假設有個非同步function sendRequest()

var result = sendRequest('https://api.twitch.tv/kraken/games/top?client_id=xxx');
// 上一行發送出去後立刻執行這一行，於是result = null
console.log(result); // Response 還沒回來

非同步

Example4 - Callback function

去餐廳點餐後不用在門口等待，直接進去找地方坐，老闆做完菜直接送到我桌上

sendRequest('https://api.food.com/order?table_id=xxx, food_id=xxx', giveMeFood);

// Callback function
function giveMeFood (food) {
  console.log(food);
}

// or Closure Callback function
sendRequest('https://api.food.com/order?table_id=xxx', food_id=xxx, function (food) {
  console.log(food);
});