我的Ajax无法正常工作

I started to learn Ajax today. And I tried to do some practices by following step by step how to use AJAX but unfortunaly it's not working and I dont know where's the problem since I don't get any warning in console.log.

I have an example.xml in my root folder that i try to get data from.

Here's what I did. Thanks!

        function getXMLHttpRequest(){
    var xhr = null;
    
    if(window.XMLHttpRequest || window.ActiveXObject){
        if(window.ActiveXobject){
            try{
                xhr = new ActiveXobject("Msxml2.XMLHTTP");
            }catch(e){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }else{
            xhr = new XMLHttpRequest();
        }
    
    }else{
        alert("Votre navigateur ne supporte pas l'objet XMLHttpRequest");
    }
    
    return xhr;
}


function request(callback){

    var xhr = getXMLHttpRequest();
    
    xhr.onreadystatechange = function(){
        if(xhr.readyStae == 4 && (xhr.status == 200 || xhr.status == 0)){
            callback(xhr.responseXML);
        }
    }
    
    xhr.open("GET", "example.xml", true);
    xhr.send(null);    
}

    function readData(oData){
        var node = oData.getElementsByTagName("soft");
        var ul = document.createElement("ul");
        var li, content;
        
        for(let i = 0; i < node.length; i++){
        
            li = document.createElement("li");      
            content = document.createTextNode(node[i].getAttribute("name"));
            li.appendChild(content);
            ul.appendChild(li);
        }


        document.getElementById("output").appendChild(ul);
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
    <p>
        <button onclick="request(readData);">Afficher les données</button>
    </p>
    <div id="output">
        
    </div>
</body>
</html>

</div>

You have a typo in your code.

xhr.onreadystatechange = function(){
        if(xhr.readyStae == 4 && (xhr.status == 200 || xhr.status == 0)){
            callback(xhr.responseXML);
        }
}

It should be xhr.readyState == 4, not xhr.readyStae == 4.

xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)){
            callback(xhr.responseXML);
        }
}