Ajax Example with XML

by Ryan Morris

HTML

<ul id="messages"></ul>
<button id="go">Load Messages</button>

JavaScript

var fakeServerResponse = "<messages><message>Hello</message><message>Cool</message></messages>";

document.getElementById("go").addEventListener("click", function (e) {
    console.log("loading messages");

    var req = new XMLHttpRequest();

    req.addEventListener("load", function (e) {
        if (req.status == 200) {
            var data = req.responseXML;
            var messages = data.getElementsByTagName("message");
            var list = document.getElementById("messages");

            for (var i = 0; i < messages.length; ++i) {
                var item = document.createElement("li");
                item.innerText = messages[i].innerHTML;
                list.appendChild(item);
            }
        }
    });

    var postData = new FormData();
    postData.append("xml", fakeServerResponse);

    req.open("POST", "/echo/xml/");
    req.send(postData);

});