非同期通信を行うとURLを変更することなく他のURLを呼び出して通信し、結果を表示することが出来ます。
XMLHttpRequestを使った非同期通信GET
<input type="button" id="btn_XMLHttpRequest" value="XMLHttpRequestを使った非同期通信"> <div id="info"></div> <script> window.addEventListener("load",function(){ //XMLHttpRequestを使った非同期通信 document.getElementById("btn_XMLHttpRequest").addEventListener("click", async function () { let xhr=new XMLHttpRequest(); xhr.onload=function(e){ //readyState:4(通信完了) status:200(リクエスト成功) if(xhr.readyState==4 && xhr.status==200){ // レスポンスで返ってきたデータをjson形式で取り出す let json = JSON.parse(xhr.response); document.getElementById("info").innerHTML= "XMLHttpRequest使用:"+xhr.response+"<br>json[\"a\"]="+json["a"]; } } xhr.open("GET","./js_ajax.php?a=GET(XMLHttpRequest)",true); xhr.responseType="text"; xhr.send(); }); }); </script>
fetchを使った非同期通信GET(IE不可)
<input type="button" id="btn_fetch" value="fetchを使った非同期通信(IE不可)"> <div id="info_fetch"></div> <script> window.addEventListener("load",function(){ //fetchを使った非同期通信(IE不可) document.getElementById("btn_fetch").addEventListener("click", async function () { // URLを格納します。fetchを使うと外部との連携ができるようにになります。 const res = await fetch("./js_ajax.php?a=GET(fetch)"); if(res.status==200){ console.log(res); // レスポンスで返ってきたデータをtext形式で取り出す場合 //let text= await res.text(); //document.getElementById("info_fetch").innerHTML=text; // レスポンスで返ってきたデータをjson形式で取り出す let json = await res.json(); document.getElementById("info_fetch").innerHTML= "fetch使用:"+JSON.stringify(json)+"<br>json[\"a\"]="+json["a"]; } }); }); </script>
fetchを使った非同期通信POST(IE不可)
<input type="button" id="btn_fetch_post" value="fetchを使った非同期通信(IE不可)"> <div id="info_fetch_post"></div> <script> window.addEventListener("load",function(){ //fetchを使ったPost非同期通信(IE不可) document.getElementById("btn_fetch_post").addEventListener("click", async function () { // URLを格納します。fetchを使うと外部との連携ができるようにになります。 var data="a=Post(fetch)"; const res = await fetch( "./js_ajax.php", { method: 'POST', mode: 'cors', cache: 'no-cache', credentials: 'same-origin', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, redirect: 'follow', referrerPolicy: 'no-referrer', body: data } ); if(res.status==200){ // レスポンスで返ってきたデータをtext形式で取り出す場合 //let text= await res.text(); //document.getElementById("info_fetch_post").innerHTML=text; // レスポンスで返ってきたデータをjson形式で取り出す let json=await res.json() document.getElementById("info_fetch_post").innerHTML= "fetch使用(POST):"+JSON.stringify(json)+"
json[\"a\"]="+json["a"]; } }); }); </script>