javascript, how to get a value from XML

Question

I'm learning how to use javascript to call web method from ASMX service using XMLHttpRequest class. I've managed to write the following:

function GetDataService() {
            if (window.XMLHttpRequest) {
                xmlHTTP = new window.XMLHttpRequest;
            } else {
                alert("Wrong!");
            }

            xmlHTTP.open("POST", "http://localhost:45250/ServiceJava.asmx", true);
            xmlHTTP.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
            xmlHTTP.setRequestHeader("SOAPAction", "http://localhost:45250/ServiceJava.asmx/GetTimeString");

            strRequest = '<?xml version="1.0" encoding="utf-8"?>';
            strRequest = strRequest + '<soap:Envelope '
                + 'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" '
                + 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" '
                + 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
            strRequest = strRequest + '<soap:Body>';
            strRequest = strRequest + '<GetTimeString xmlns="http://localhost:45250/ServiceJava.asmx" />';
            strRequest = strRequest + '</soap:Body>';
            strRequest = strRequest + '</soap:Envelope>';

            //Different value for readystate
            //0--Uninitialized
            //1--Loading
            //2--loaded(but data not recieved)
            //3--Interactive--Some part of the data is recieved
            //4--Completed(all data recieved)
            xmlHTTP.onreadystatechange = function () {
                if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
                    var x = xmlHTTP.responseXML;
                    document.getElementById("time").textContent = x;                  
                }
            }
            xmlHTTP.send(strRequest);
        }

But it produces the code:

<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><soap:Body><GetTimeStringResponse xmlns="http://localhost:45250/ServiceJava.asmx"><GetTimeStringResult>14:31:28</GetTimeStringResult></GetTimeStringResponse></soap:Body></soap:Envelope>

Now I would like to get only the 14:31:28 . How can I do that? I've tried to find the answer but x doesn't seem to have method like getElementByTagName() or anything similiar.

Thanks!

Answer 1

Solution without using jQuery

var xmlStr = '<?xml version="1.0" encoding="utf-8"?><soap:Envelope ...';    
var xml = new window.DOMParser().parseFromString(xmlStr, "text/xml");   
var value = xml.getElementsByTagName("GetTimeStringResult")[0].innerHTML;

Answer 2

You can use for example the jQuery parseXML method.

var response = "<?xml version="1.0" encodi...";
var xml= $($.parseXML(response));
var value = xml.find("GetTimeStringResult").text();

However, if you choose to send the request with jQuery instead of vanilla javascript, you get the response already deserialized in the callback.

Answer 3

I recommend that you don't write the XMLHttpRequests by hand. Instead use jQuery.ajax():

$.ajax({
    url: "http://localhost:45250/ServiceJava.asmx/GetTimeString",
    type: "POST",
    data:  postData,
    success: function(data, textStatus, jqXhr) {
             var result = data.GetTimeStringResult;
    }
});

'postData' should be a JSON object in which you pass your parameters to your endpoint.