趣旨
タイトルの通りですが、最低限の説明しかいれてません。とりあえずこう書いておけばできるというメモ的なものですので、例えば onreadystatechange イベントの説明などは記載していません。
phpからデータを取得する事を前提として、XML、JSON それぞれの形式で 脱jQueryのAjaxを実現する最低限の記述を掲載しています。
なんらかのきっかけでこのページにたどり着いた方は、とりあえず以下の3ファイルを作成して試してください。
書いておいたほうが良いエラーフローなど、見落としているところはあると思いますので、判明次第補足していこうと考えています。
コード
index.html
<html jang="jp">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./ajax.js"></script>
</head>
<body>
<div><span id="no_0">A</span> : <span id="name_0">なまえ1</span>／<span id="word_0">囲碁</span></div>
<div><span id="no_1">B</span> : <span id="name_1">名前２</span>／<span id="word_1">将棋</span></div>
<form>
<button type="button" onClick="getXML();">XMLで取得</button>
<button type="button" onClick="getJSON();">JSONで取得</button>
</form>
</body>
</html>
ajax.php
<?php
if (isset($_POST['format']))
{
if ($_POST['format'] == 'XML')
{
returnXML();
}
elseif ($_POST['format'] == 'JSON')
{
returnJSON();
}
}
if (isset($_GET['format']))
{
if ($_GET['format'] == 'XML')
{
returnXML();
}
elseif ($_GET['format'] == 'JSON')
{
returnJSON();
}
}
function returnXML()
{
// とりあえずベタ打ちで XML作成
$sXML = '<?xml version="1.0" encoding="UTF-8"?>';
$sXML .= '<datas>';
$sXML .= ' <data>';
$sXML .= ' <no>3</no>';
$sXML .= ' <name>長嶋茂雄</name>';
$sXML .= ' <word>野球</word>';
$sXML .= ' </data>';
$sXML .= ' <data>';
$sXML .= ' <no>10</no>';
$sXML .= ' <name>ペレ</name>';
$sXML .= ' <word>サッカー</word>';
$sXML .= ' </data>';
$sXML .= '</datas>';
// xmlであることを示す HTTPヘッダ
header('Content-Type: text/xml; charset="UTF-8"', true);
echo $sXML;
}
function returnJSON()
{
// とりあえずベタ打ちで JSONデータ（の元となる連想配列）を作成
$aJSON[0]=array('no'=>'1' , 'name'=>'NHK総合' , 'word'=>'NHK G');
$aJSON[1]=array('no'=>'2' , 'name'=>'NHK教育' , 'word'=>'Eテレ');
// jsonであることを示す HTTPヘッダ
header('Content-type: application/json; charset="UTF-8"');
echo json_encode($aJSON);
}
?>
ajax.js
// XMLでの取得
function getXML() {
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status == 200) {
//通信成功時の処理
let datas = xmlhttp.responseXML.documentElement;
let dataNo = datas.getElementsByTagName("no");
let dataName = datas.getElementsByTagName("name");
let dataWord = datas.getElementsByTagName("word");
let count = dataNo.length;
for (i = 0 ; i < count ; i++){
let no = document.getElementById("no_"+i);
let name = document.getElementById("name_"+i);
let word = document.getElementById("word_"+i);
no.innerHTML = dataNo[i].innerHTML;
name.innerHTML = dataName[i].innerHTML;
word.innerHTML = dataWord[i].innerHTML;
}
} else {
alert("ステータス :" + jsonhttp.status); //通信失敗時の処理
}
}
}
xmlhttp.onload = function() {
// console.log("XML Get"); //通信完了時の処理
}
xmlhttp.open("POST", "./ajax.php", true);
xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=UTF-8');
xmlhttp.send("format=XML");
}
// JSONでの取得
function getJSON() {
let jsonhttp = new XMLHttpRequest();
jsonhttp.onreadystatechange = function() {
if (jsonhttp.readyState === 4) {
if (jsonhttp.status == 200) {
//通信成功時の処理
let datas = JSON.parse(jsonhttp.responseText);
let count = datas.length;
for (i = 0 ; i < count ; i++){
let no = document.getElementById("no_"+i);
let name = document.getElementById("name_"+i);
let word = document.getElementById("word_"+i);
no.innerHTML = datas[i].no;
name.innerHTML = datas[i].name;
word.innerHTML = datas[i].word;
}
} else {
alert("ステータス :" + jsonhttp.status); //通信失敗時の処理
}
}
}
jsonhttp.onload = function() {
// console.log("JSON Get"); //通信完了時の処理
}
jsonhttp.open("POST", "./ajax.php", true);
jsonhttp.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=UTF-8');
jsonhttp.send("format=JSON");
}
上記コードでは POST での説明ですが、GETの場合は以下のようになり、setRequestHeader の記述は不要になります。
jsonhttp.open("GET", "ajax.php?format=JSON", true);
jsonhttp.send(null);
また、以下は不要です。（ここでハマりました）
// ↓↓↓ 不要です。↓↓↓
XMLHttpRequest.responseType = 'json';
// サンプルコードに合わせれば
// jsonhttp.responseType = 'json'; と書くことになりますが、不要です。
各メソッド等の説明については下記参考に譲ります。
参考
JavascriptのAjaxについての基本まとめ
https://qiita.com/katsunory/items/9bf9ee49ee5c08bf2b3d
まとめた動機
Ajax JSON と検索しても、ほとんどがjQueryを使う前提の説明ページというのが現状です。Ajaxは関係なく、JSONだけを扱う場合の説明などであれば jQuery を使わない説明も見つかるのですが、脱jQuery として、ひとまとめの資料が欲しかったのです。
もっとも、うちの会社ではXMLをまだ多く使ってるだけでなく、そもそもjQuery自体、まったく脱する気がなさげなので、実際ボクにとって、このまとめも必要になるかどうか……
jQueryは捨てなくて良いかもですが、せめて JSON にはしていきましょうよ、ご同僚。