10. 解释 AJAX 的工作原理（XMLHttpRequest）

在前两篇解释Event Loop的文章:
7. 解释 Event Loop ( 上 ) --- Call Stack
8. 解释 Event Loop ( 下 ) --- Task Queue ( Callback Queue )
只有解释同步与非同步的概念，并没有应用实际的例子。

所以今天的文章，会以 XMLHttpRequest 作为实际应用的例子！

AJAX

定义

AJAX 原文是 Asynchronous JavaScript and XML，意为 非同步的JavaScript和XML。

AJAX 的原理是在Client与Server间多设置一层AJAX引擎,使Client和Server能进行非同步的资料传送。 AJAX引擎自己会处理一些数据验证和处理，并不会将所有请求(request)转交给Server，只有确定需要读取新数据时，才由AJAX引擎像Server递交新的需求。

（如果对API或Client/Server不熟悉的人，可以参考这篇文章:API是什麽？认识 Web API、HTTP 和 JSON 资料交换格式｜ALPHA Camp Blog）

AJAX 并非一门特定的技术，而是指称在Client(客户端)和Server(服务器)进行资料交换时，会使用到的多个既有技术，包含JavaScript、XMLHTTPRequest、DOM...等。AJAX引擎会监听回应(respond)，然後从server获得数据，再用JavaScript来操作DOM而更新页面，因此能做到非同步的资料传递。

• Asynchronous：非同步，指运行程序码的方式。
• JavaScript：指运行的程序语言。
• XML：AJAX可以传送并接收多种格式的资讯，XML则是其中一种资料格式，也包括 JSON、HTML或文字档案。

举例来说，假设我们想要看现在的气温，以GOOGLE的页面为例：

我们知道气温随时都有变化，但每当气温有变化时，
只有气温的数字会改变，这个网页不会全部开始重跑。

不必重新载入整个页面，就能对服务器发送请求、获得资料。

因此能 增加效率和提升使用者体验 ，这就是AJAX应用最大的优点与特色。

AJAX 可以使用 XMLHttpRequest 物件来与服务器进行通讯，今天我们先以 XMLHttpRequest 为例:

XMLHttpRequest

XMLHttpRequest 虽然名字是 XML 与 HTTP 等，但能接收的资料并不限於 XML 类型。

假设今天要制作一个能够显示当下气温的范例:

（用codepen完成的结果截图）

气温资料的API来自中央气象局开放资料平台API，API网站可以依照自己的需求填入资料，产生URL。

获得网址後，可以用网址打开一个新页面查找自己需要的资料:

（因为我有用整理JSON的应用程序扩充，选取资料的位置可以直接参考图片红框）

!! 因为政府开放资料平台是要申办帐号才能获得授权码的，
如果有人要复制范例使用的话，记得把程序码里的"授权码"中文字样改掉。

附上【JavaScript】的完整程序码：
(注解都写在程序码里。)

  const section = document.querySelector('section');

  // 获得URL; 请记得将授权码字样替换掉!
  var requestURL = 'https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-D0047-063?Authorization=授权码&limit=1&offset=7&format=JSON&elementName=T';

  // 建立XMLHttpRequest物件
  var request = new XMLHttpRequest();

  //request.open() 初始化一个请求，使用GET方法
  request.open('GET', requestURL); 
  
  //定义回应内容的资料类型（response type）
  request.responseType = 'json'; 
  
  //送出请求，因为request method为GET，所以参数为空
  request.send(); 

  // onload是一种XMLHttpRequest的属性，这里是处理load事件
  request.onload = function() {
     //将回应资料的内容存入变数
      var temperatureData = request.response;
      showWeather(temperatureData);
  }

  function showWeather(jsonObj) { 
      // JSON的资料位置
      var jsonT = jsonObj['records']['locations'][0]['location'][0]['weatherElement'][0]['time'][0]['elementValue'][0]['value'];
      const temperature = document.createElement('h1');
      temperature.textContent = "地点: 台北市， 现在气温: " + jsonT + ' °C ';
      section.appendChild(temperature);
  } 

【如内文有误还请不吝指教>< 谢谢阅览至此的各位:D】

参考资料:

• Ajax - Web 开发者指引 | MDN
• JavaScript 中的同步与非同步（上）：先成为 callback 大师吧！
• 什麽是 Ajax？ 搞懂非同步请求 (Asynchronous request)概念

-----正文结束-----