非同期通信を行うと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を使ったGet非同期通信(IE不可)
document.getElementById("btn_fetch").addEventListener("click", async function () {
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 () {
var data="a=Post(fetch)"; //送信するデータ
const res = await fetch(
"./js_ajax.php",
{
method: 'POST',
//mode: 'no-cors', //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) + "<br>json[\"a\"]=" + json["a"];
}
});
});
</script>
fetchを使った非同期通信application/jsonのPOST(IE不可)
<input type="button" id="btn_fetch_json_post" value="fetchを使った非同期通信(IE不可)">
<div id="info_fetch_json_post"></div>
<script>
window.addEventListener("load",function(){
//fetchを使ったjsonのPost非同期通信(IE不可)
document.getElementById("btn_fetch_json_post").addEventListener("click", async function () {
var data={"a":"json Post(fetch)"}; //送信するデータ
const res = await fetch(
"./js_ajax.php",
{
method: 'POST',
//mode: 'no-cors',
//cache: 'no-cache',
//credentials: 'same-origin',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
//redirect: 'follow',
//referrerPolicy: 'no-referrer',
body: JSON.stringify(data)
}
);
if(res.status==200){
// レスポンスで返ってきたデータをtext形式で取り出す場合
//let text= await res.text();
//document.getElementById("info_fetch_json_post").innerHTML=text;
// レスポンスで返ってきたデータをjson形式で取り出す
let json=await res.json()
document.getElementById("info_fetch_json_post").innerHTML=
"fetch使用(json_POST)：" + JSON.stringify(json) + "<br>json[\"a\"]=" + json["a"];
}
});
});
</script>