<html>
<body>
<button onclick="fetchImage()">Fetch</button>
<button onclick="ajaxRequest()">Ajax</button>
<button onclick="ajaxRequest2()">Ajax2</button>
<script type="text/javascript">
"use strick";
const imgURL="https://images.pexels.com/photos/235767/pexels-photo-235767.jpeg?cs=srgb&dl=pexels-pixabay-235767.jpg&fm=jpg&w=640&h=427";
let fetchImage= async()=>{
var myImageResponse= await fetch(imgURL);
console.log("Image response:\n",myImageResponse.blob());
}
function ajaxRequest(){
function reqListener(){
console.log(this.response);
}
var xmlRequest=new XMLHttpRequest();
xmlRequest.addEventListener("load",reqListener.bind(xmlRequest));
xmlRequest.open("GET",imgURL);
xmlRequest.send();
}
function ajaxRequest2(){
var xmlRequest=new XMLHttpRequest();
xmlRequest.open("GET",imgURL);
xmlRequest.send();
xmlRequest.onload=function(e){
console.log(xmlRequest.response);
}
}
</script>
</body>
</html>
