plainなJavaScriptで書くAjax

cssでアニメーションを作るようになると、jQueryの出番がないサイトも多くなってきます。

個人的にはjQueryなしではセレクタ指定の仕方よりも、plain（素の）JavaScriptでAjaxどう書くんだ？となるので、まとめておきたい。

まずはjQueryでどう書いているか。

JavaScript（jQueryあり）

var ajaxUrl = '';
$.ajax({
 cache: 'false',
 dataType: 'text',
 url: ajaxUrl,
 success: function(data) {
   alert('success');
 },
 error: function() {
   alert('error');
 },
 complete: function() {
   alert('complete');
 }
});

そしてjQueryなしで書く場合は？

JavaScript（jQueryなし）

var ajaxData = new XMLHttpRequest();
/* url */
var ajaxUrl = '';
var ajaxParameter = '';
ajaxData.open('GET', ajaxUrl + ajaxParameter, true);
/* dataType */
ajaxData.responseType = 'document';
/* cache */
ajaxData.setRequestHeader('Pragma', 'no-cache');
ajaxData.setRequestHeader('Cache-Control', 'no-cache');
ajaxData.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');

ajaxData.send(null);
ajaxData.onreadystatechange = function() {
 if (ajaxData.readyState === 4 && ajaxData.status == 200) {
   alert('success');
 } else {
   alert('error');
 }
}
ajaxData.onload = function() {
 alert('complete');
}

jQueryと比較してみると分かりやすいかなと思います。対応する箇所にアラートとコメントいれてます。

AjaxがPOSTの時は？

こうなります。openとsendを入れ替えてください。

JavaScript

ajaxData.open('POST', ajaxUrl, true);
ajaxData.send(ajaxParameter);

responseTypeの種類

例にもいれてるdocument以外はそのままですね。指定忘れてるとtextになる。

・document：htmlまたはXML形式
・json：json形式
・text：text形式（指定なしdefault）

ajaxもキャッシュとタイプ指定すれば読み込んでくれるので難しくないですね。