Today, I delved into the world of Ajax. I took the time to practice and follow step-by-step instructions on how to use AJAX, but unfortunately, I encountered an issue. I couldn't pinpoint the problem as there were no warnings displayed in the console.log.
Within my root folder, there lies an example.xml file from which I attempted to retrieve data.
Here's a summary of my process. Any assistance would be greatly appreciated!
function settingXMLHttpRequest(){
var request = null;
if(window.XMLHttpRequest || window.ActiveXObject){
if(window.ActiveXobject){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
request = new ActiveXObject("Microsoft.XMLHTTP");
}
}else{
request = new XMLHttpRequest();
}
}else{
alert("The XMLHttpRequest object is not supported by your browser");
}
return request;
}
function sendRequest(callback){
var request = settingXMLHttpRequest();
request.onreadystatechange = function(){
if(request.readyStae == 4 && (request.status == 200 || request.status == 0)){
callback(request.responseBlob);
}
}
request.open("GET", "example.xml", true);
request.send(null);
}
function processData(data){
var node = data.getElementsByTagName("soft");
var unorderedList = document.createElement("ul");
var listItem, itemContent;
for(let i = 0; i < node.length; i++){
listItem = document.createElement("li");
itemContent = document.createTextNode(node[i].getAttribute("name"));
listItem.appendChild(itemContent);
unorderedList.appendChild(listItem);
}
document.getElementById("output").appendChild(unorderedList);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>ajax</title>
</head>
<body>
<p>
<button onclick="sendRequest(processData);">Display data</button>
</p>
<div id="output">
</div>
</body>
</html>