In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > xml handling > properties > responseText (XMLHttpRequest)

responseText property (XMLHttpRequest)

Browser support:

Returns the body of the server's response as a string.

When the response body is an XML formatted text, the responseXML property can also be used. It builds an XMLDocument object from the response.

Syntax:

object.responseText;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

String that represents the response body.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the responseText property:

Code

ajax.js

response.txt

<head>
    <script type="text/javascript" src="ajax.js"></script>
    
    <script type="text/javascript">
        var httpRequest = null;

        function SendRequest () {
            if (!httpRequest) {
                httpRequest = CreateHTTPRequestObject ();   // defined in ajax.js
            }
            if (httpRequest) {          
                    // The requested file must be in the same domain that the page is served from.
                var url = "response.txt";
                httpRequest.open ("GET", url, true);    // async
                httpRequest.onreadystatechange = OnStateChange;
                httpRequest.send (null);
            }
        }

        function OnStateChange () {
            if (httpRequest.readyState==4) {
                if (IsRequestSuccessful (httpRequest)) {    // defined in ajax.js
                    alert (httpRequest.responseText);
                }
                else {
                    alert ("Operation failed.");
                }
            }
        }

    </script>
</head>
<body>
    <button onclick="SendRequest ()">Test responseText property</button>
</body>


function CreateHTTPRequestObject () {
        // although IE supports the XMLHttpRequest object, but it does not work on local files.
    var forceActiveX = (window.ActiveXObject && location.protocol === "file:");
    if (window.XMLHttpRequest && !forceActiveX) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
    alert ("Your browser doesn't support XML handling!");
    return null;
}

function CreateMSXMLDocumentObject () {
    if (typeof (ActiveXObject) != "undefined") {
        var progIDs = [
                        "Msxml2.DOMDocument.6.0", 
                        "Msxml2.DOMDocument.5.0", 
                        "Msxml2.DOMDocument.4.0", 
                        "Msxml2.DOMDocument.3.0", 
                        "MSXML2.DOMDocument", 
                        "MSXML.DOMDocument"
                      ];
        for (var i = 0; i < progIDs.length; i++) {
            try { 
                return new ActiveXObject(progIDs[i]); 
            } catch(e) {};
        }
    }
    return null;
}

function CreateXMLDocumentObject (rootName) {
    if (!rootName) {
        rootName = "";
    }
    var xmlDoc = CreateMSXMLDocumentObject ();
    if (xmlDoc) {
        if (rootName) {
            var rootNode = xmlDoc.createElement (rootName);
            xmlDoc.appendChild (rootNode);
        }
    }
    else {
        if (document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument ("", rootName, null);
        }
    }
    
    return xmlDoc;
}

function ParseHTTPResponse (httpRequest) {
    var xmlDoc = httpRequest.responseXML;

            // if responseXML is not valid, try to create the XML document from the responseText property
    if (!xmlDoc || !xmlDoc.documentElement) {
        if (window.DOMParser) {
            var parser = new DOMParser();
            try {
                xmlDoc = parser.parseFromString (httpRequest.responseText, "text/xml");
            } catch (e) {
                alert ("XML parsing error");
                return null;
            };
        }
        else {
            xmlDoc = CreateMSXMLDocumentObject ();
            if (!xmlDoc) {
                return null;
            }
            xmlDoc.loadXML (httpRequest.responseText);

        }
    }

            // if there was an error while parsing the XML document
    var errorMsg = null;
    if (xmlDoc.parseError && xmlDoc.parseError.errorCode != 0) {
        errorMsg = "XML Parsing Error: " + xmlDoc.parseError.reason
                  + " at line " + xmlDoc.parseError.line
                  + " at position " + xmlDoc.parseError.linepos;
    }
    else {
        if (xmlDoc.documentElement) {
            if (xmlDoc.documentElement.nodeName == "parsererror") {
                errorMsg = xmlDoc.documentElement.childNodes[0].nodeValue;
            }
        }
    }
    if (errorMsg) {
        alert (errorMsg);
        return null;
    }

        // ok, the XML document is valid
    return xmlDoc;
}

    // returns whether the HTTP request was successful
function IsRequestSuccessful (httpRequest) {
        // IE: sometimes 1223 instead of 204
    var success = (httpRequest.status == 0 || 
        (httpRequest.status >= 200 && httpRequest.status < 300) || 
        httpRequest.status == 304 || httpRequest.status == 1223);
    
    return success;
}

Data from the server in plain text format.

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example and the next one use AJAX to submit a form without reloading the page. The two examples are similar, but the first one uses synchronous while the second one uses asynchronous data transfer. In synchronous mode, the send method of the XMLHttpRequest object waits for a reply, so the user cannot interact with the browser until the response has completed. In asynchronous mode, the send method does not wait for a reply but instead returns immediately, so it allows you to perform other operations while a time-consuming task is being performed in the background.

Code

ajax_form.js

<head>
    <script type="text/javascript" src="ajax_form.js"></script>
    <style>
        .error {
            display: none;
            color: #a00000;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">     
        function HideAllErrorFields () {
            for (var i = 1; i <= 4; i++) {
                var field = document.getElementById ("error" + i);
                field.style.display = "none";
            }
        }

        function ShowErrorFields (idsStr) {
            var ids = idsStr.split (",");
            for (var i = 0; i < ids.length; i++) {
                var field = document.getElementById ("error" + ids[i]);
                if (field) {
                    field.style.display = "block";
                }
            }
        }

        function AjaxSend (form, url, method) {
                // hide all error fields
            HideAllErrorFields ();
            
                // get message data
            var data = GetMessageBody (form);   // defined in ajax_form.js

                // send the request
            var httpRequest = CreateRequestObj ();  // defined in ajax_form.js
                // try..catch is required if working offline
            try {
                httpRequest.open (method, url, false);  // synchron
                httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                httpRequest.send (data);
            }
            catch (e) {
                alert ("Cannot connect to the server!");
                return;
            }

                // handle the response
            if (IsRequestSuccessful (httpRequest)) {    // defined in ajax_form.js
                if (httpRequest.responseText === "ok") {    // registration is successful
                    alert ("Thank you for registering");
                    /*
                        // if redirection is required
                    location.href = "/index.php";
                    */
                }
                else {  // some fields are invalid
                    ShowErrorFields (httpRequest.responseText);
                }
            }
            else {
                alert ("An error occurred while registering. Please try it again.");
            }
        }
    </script>
</head>
<body>
    This is a sample registration form.
    The username must be between 2 and 20 characters, the password must be between 6 and 20 characters.
    A user named Dottoro is already registered.
    <br />
    Try to register both valid and invalid values!
    <br /><br />
    <form onsubmit="AjaxSend (this, 'register.php', 'post'); return false;">
        User Name: <input type="text" name="userName" />
        <div class="error" id="error1">Must be between 2 and 20 characters.</div>
        <div class="error" id="error2">A user already exists with the same name.</div>
        <br /><br />
        Password: <input type="password" name="password" />
        <div class="error" id="error3">Must be between 6 and 20 characters.</div>
        <br /><br />
        Repeat Password: <input type="password" name="repassword" />
        <div class="error" id="error4">Must be the same as the password.</div>
        <br /><br />
        <input type="submit" value="Register" />
    </form>
</body>


function CreateRequestObj () {
        // although IE supports the XMLHttpRequest object, but it does not work on local files.
    var forceActiveX = (window.ActiveXObject && location.protocol === "file:");
    if (window.XMLHttpRequest && !forceActiveX) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
}

    // create HTTP request body form form data
function GetMessageBody (form) {
    var data = "";
    for (var i = 0; i < form.elements.length; i++) {
        var elem = form.elements[i];
        if (elem.name) {
            var nodeName = elem.nodeName.toLowerCase ();
            var type = elem.type ? elem.type.toLowerCase () : "";

                // if an input:checked or input:radio is not checked, skip it
            if (nodeName === "input" && (type === "checkbox" || type === "radio")) {
                if (!elem.checked) {
                    continue;
                }
            }

            var param = "";
                // select element is special, if no value is specified the text must be sent
            if (nodeName === "select") {
                for (var j = 0; j < elem.options.length; j++) {
                    var option = elem.options[j];
                    if (option.selected) {
                        var valueAttr = option.getAttributeNode ("value");
                        var value = (valueAttr && valueAttr.specified) ? option.value : option.text;
                        if (param != "") {
                            param += "&";
                        }
                        param += encodeURIComponent (elem.name) + "=" + encodeURIComponent (value);
                    }
                }
            }
            else {
                param = encodeURIComponent (elem.name) + "=" + encodeURIComponent (elem.value);
            }

            if (data != "") {
                data += "&";
            }
            data += param;                  
        }
    }
    return data;
}

    // returns whether the HTTP request was successful
function IsRequestSuccessful (httpRequest) {
        // IE: sometimes 1223 instead of 204
    var success = (httpRequest.status == 0 || 
        (httpRequest.status >= 200 && httpRequest.status < 300) || 
        httpRequest.status == 304 || httpRequest.status == 1223);
    
    return success;
}

<?php

define("ERR_INVALID_USERNAME", "1");
define("ERR_EXISTING_USERNAME", "2");
define("ERR_INVALID_PASSWORD", "3");
define("ERR_DIFFERENT_PASSWORDS", "4");

$errors = array ();

if (isset ($_POST["userName"])) {
    $username = $_POST["userName"];
    $len = strlen ($username);
    if ($len < 2 || $len > 20) {
        array_push ($errors, ERR_INVALID_USERNAME);
    }
    else {
            // check the name of registered users
        if (strcasecmp ($username, "Dottoro") == 0) {
            array_push ($errors, ERR_EXISTING_USERNAME);
        }
    }
}
else {
    array_push ($errors, ERR_INVALID_USERNAME);
}

if (isset ($_POST["password"])) {
    $password = $_POST["password"];
    $len = strlen ($password);
    if ($len < 6 || $len > 20) {
        array_push ($errors, ERR_INVALID_PASSWORD);
    }
    else {
        if (!isset ($_POST["repassword"]) || strcmp ($password, $_POST["repassword"]) != 0) {
            array_push ($errors, ERR_DIFFERENT_PASSWORDS);
        }
    }
}
else {
    array_push ($errors, ERR_INVALID_PASSWORD);
}

$response = "";
if (sizeof ($errors) > 0) {
    $response = implode (",", $errors);
}
else {
        // some db operations, save username and password ...
    
    $response = "ok";
}

echo ($response);
?>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example is similar to the previous one, but it uses asynchronous data transfer and displays blinking text while waiting for the server response (the register_delay.php script waits two seconds before responding).

Code

ajax_form.js

register_delay.php

<head>
    <script type="text/javascript" src="ajax_form.js"></script>
    <style>
        .error {
            display: none;
            color: #a00000;
            font-weight: bold;
        }
        #progress {
            visibility: hidden;
            color: #00a000;
        }
    </style>
    <script type="text/javascript">     
        function HideAllErrorFields () {
            for (var i = 1; i <= 4; i++) {
                var field = document.getElementById ("error" + i);
                field.style.display = "none";
            }
        }

        function ShowErrorFields (idsStr) {
            var ids = idsStr.split (",");
            for (var i = 0; i < ids.length; i++) {
                var field = document.getElementById ("error" + ids[i]);
                if (field) {
                    field.style.display = "block";
                }
            }
        }

        var registering = false;
        
        function OnReadyStateChanged (httpRequest, form) {
            if (httpRequest.readyState == 0 || httpRequest.readyState == 4) {
                
                registering = false;
                StopAnim ();
                
                    // prevent memory leaks
                httpRequest.onreadystatechange = null;
                
                if (IsRequestSuccessful (httpRequest)) {    // defined in ajax_form.js
                    if (httpRequest.responseText === "ok") {    // registration is successful
                        alert ("Thank you for registering");
                        /*
                            // if redirection is required
                        location.href = "/index.php";
                        */
                    }
                    else {  // some fields are invalid
                        ShowErrorFields (httpRequest.responseText);
                    }
                }
                else {
                    alert ("An error occurred while registering. Please try it again.");
                }
            }
        }

        function AjaxSend (form, url, method) {
                // avoid resend data while registering
            if (registering) {
                return;
            }
                // hide all error fields
            HideAllErrorFields ();
            
                // get message data
            var data = GetMessageBody (form);   // defined in ajax_form.js

                // send the request
            var httpRequest = CreateRequestObj ();  // defined in ajax_form.js
                // try..catch is required if working offline
            try {
                httpRequest.open (method, url, true);   // asynchron
                httpRequest.onreadystatechange = function () {OnReadyStateChanged (httpRequest, form)};
                httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                httpRequest.send (data);
            }
            catch (e) {
                alert ("Cannot connect to the server!");
                return;
            }

            registering = true;
            StartAnim ();
        }

            // blinking text
        var animTimerId = 0;
        function StartAnim () {
            var progress = document.getElementById ("progress");
            progress.style.visibility = "visible";
            animTimerId = setInterval (RegAnim, 100);
        }
        function RegAnim () {
            var progress = document.getElementById ("progress");
            progress.style.visibility = (progress.style.visibility == "visible") ? "hidden" : "visible";
        }
        function StopAnim () {
            var progress = document.getElementById ("progress");
            progress.style.visibility = "hidden";
            clearInterval (animTimerId);
        }

    </script>
</head>
<body>
    This is a sample registration form.
    The username must be between 2 and 20 characters, the password must be between 6 and 20 characters.
    A user named Dottoro is already registered.
    <br />
    Try to register both valid and invalid values!
    <br /><br />
    <form onsubmit="AjaxSend (this, 'register_delay.php', 'post'); return false;">
        User Name: <input type="text" name="userName" />
        <div class="error" id="error1">Must be between 2 and 20 characters.</div>
        <div class="error" id="error2">A user already exists with the same name.</div>
        <br /><br />
        Password: <input type="password" name="password" />
        <div class="error" id="error3">Must be between 6 and 20 characters.</div>
        <br /><br />
        Repeat Password: <input type="password" name="repassword" />
        <div class="error" id="error4">Must be the same as the password.</div>
        <br /><br />
        <input type="submit" value="Register" />
        <div id="progress">Registering</div>
    </form>
</body>


function CreateRequestObj () {
        // although IE supports the XMLHttpRequest object, but it does not work on local files.
    var forceActiveX = (window.ActiveXObject && location.protocol === "file:");
    if (window.XMLHttpRequest && !forceActiveX) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
}

    // create HTTP request body form form data
function GetMessageBody (form) {
    var data = "";
    for (var i = 0; i < form.elements.length; i++) {
        var elem = form.elements[i];
        if (elem.name) {
            var nodeName = elem.nodeName.toLowerCase ();
            var type = elem.type ? elem.type.toLowerCase () : "";

                // if an input:checked or input:radio is not checked, skip it
            if (nodeName === "input" && (type === "checkbox" || type === "radio")) {
                if (!elem.checked) {
                    continue;
                }
            }

            var param = "";
                // select element is special, if no value is specified the text must be sent
            if (nodeName === "select") {
                for (var j = 0; j < elem.options.length; j++) {
                    var option = elem.options[j];
                    if (option.selected) {
                        var valueAttr = option.getAttributeNode ("value");
                        var value = (valueAttr && valueAttr.specified) ? option.value : option.text;
                        if (param != "") {
                            param += "&";
                        }
                        param += encodeURIComponent (elem.name) + "=" + encodeURIComponent (value);
                    }
                }
            }
            else {
                param = encodeURIComponent (elem.name) + "=" + encodeURIComponent (elem.value);
            }

            if (data != "") {
                data += "&";
            }
            data += param;                  
        }
    }
    return data;
}

    // returns whether the HTTP request was successful
function IsRequestSuccessful (httpRequest) {
        // IE: sometimes 1223 instead of 204
    var success = (httpRequest.status == 0 || 
        (httpRequest.status >= 200 && httpRequest.status < 300) || 
        httpRequest.status == 304 || httpRequest.status == 1223);
    
    return success;
}

<?php

define("ERR_INVALID_USERNAME", "1");
define("ERR_EXISTING_USERNAME", "2");
define("ERR_INVALID_PASSWORD", "3");
define("ERR_DIFFERENT_PASSWORDS", "4");

$errors = array ();

if (isset ($_POST["userName"])) {
    $username = $_POST["userName"];
    $len = strlen ($username);
    if ($len < 2 || $len > 20) {
        array_push ($errors, ERR_INVALID_USERNAME);
    }
    else {
            // check the name of registered users
        if (strcasecmp ($username, "Dottoro") == 0) {
            array_push ($errors, ERR_EXISTING_USERNAME);
        }
    }
}
else {
    array_push ($errors, ERR_INVALID_USERNAME);
}

if (isset ($_POST["password"])) {
    $password = $_POST["password"];
    $len = strlen ($password);
    if ($len < 6 || $len > 20) {
        array_push ($errors, ERR_INVALID_PASSWORD);
    }
    else {
        if (!isset ($_POST["repassword"]) || strcmp ($password, $_POST["repassword"]) != 0) {
            array_push ($errors, ERR_DIFFERENT_PASSWORDS);
        }
    }
}
else {
    array_push ($errors, ERR_INVALID_PASSWORD);
}

$response = "";
if (sizeof ($errors) > 0) {
    $response = implode (",", $errors);
}
else {
        // some db operations, save username and password ...
    
    $response = "ok";
}
    // 2 secs delay
sleep (2);

echo ($response);
?>