原本應該是來弄一點JQuery關於HTTP request的範例的，不過意外發現一個新傢伙Fetch API，所以今天就來談談Ajax和XMLHttpRequest、JQuery.post、Fetch API的關係吧！

AJAX

全名是Asynchronous JavaScript and XML(非同步的JavaScript與XML技術），換句話說這不是瀏覽器自己發出的請求，而是由Javascript於瀏覽器內執行時發出的請求。瀏覽器會請求的資源除了HTML、CSS、JS以外，還有圖片、音樂、影片等資源，此外XML也是一個可擴展的資料定義格式，是常見的資料交換格式之一，不過近來有點被JSON取代的趨勢。附帶議題，之前提過SGML也和XML有關，HTML某些程度上也與XML一樣，還有基於XML的XHTML。

HTML、XML、XHTML

HTML、XML、XHTML三者還蠻相似的，但是文件定義有些不同，最新的HTML 5 只需要在一開始宣告<！doctype html>即可，不同版本會有不同宣告方式。XML同樣也可以只定CSS(stylesheet樣式表)。不過在HTML裡有多個單標籤元素，也就是不成對的標籤，譬如：<br/>、<input/>等等。這些標籤在HTML並未要求於結尾加上/，所以可以寫成<br>、<input>，但是XML和XHTML有強制要求。雖然瀏覽器大多都還可能看得懂，不過HTML在這樣的標籤元素加上斜線結尾我認爲是比較好的風格。

XMLHttpRequest

AJax一開始的範例用法就是使用XMLHttpRequest。下面是抄自維基的範例程式：

// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
//   when XMLHttpRequest is predefined
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < aVersions.length; i++) {
        try {
            xmlHttp = new ActiveXObject(aVersions[i]);
            break;
        } catch (e) {}
    }
}

JQuery ajax

最爲一個封裝許多高階用法的JQuery也提供了相關的用法，在JQuery官網就有段範例：

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( result ) {
    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
  }
});

上面用法還可以使用type這個key，加上HTTP的方法，也就是GET、POST之類的，或是提供了$.post()、$.get()的方式。更多可以參考官方對於JQuery.get()和JQuery.post()的用法

Fetch API

Fetch API這東西是我在看MDN關於XMLHttpRequest時翻到的。從Can I Use的簡述說明中，有簡化用法並取代XMLHttpReques的意思。是個新東西，不過主流瀏覽器資源度也已經不錯了。

來看一下一個簡單的用法吧：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

恩...如果要在加一些瀏覽器支不支援的判斷...好像和XMLHttpRequest差不多？不過fetch這個字本身蠻有意義蠻好記得。