xhrGet

Null responseXML on xhrGet with handleAs xml

I am experiencing a similar problem what was posted here and am hoping I can pick up some guidance.

I am making an xhrGet http request to a service returning ATOM message XMLs of the type 'application/atom+xml'.

Currently I have a servlet running that serves to parse my URLs and return a well formed statically stored xml file containing an ATOM message. I am using FireFox 2 with Firebug as an aid on Windows XP.

When my file servlet running in my windows environment returns the ATOM xml the xhrGet call invokes my load function with the reponse data in well a well formed ATOM/XML format. This is good.

When my file servlet is running In an AIX/Unix environment, returning the same static xml files, the same bit of code returns with responseXML null but the responseText holds the response.

Firebug's console shows the well formed ATOM message was received and the xhr.responseText holds the string text. This leads me to believe that the reponse is received but just not handled as 'xml'.

It appears to me that in this case Dojo is failing to resolve and handle the response as XML. Below are my args.

var args = {
url: iUrl,
handleAs: 'xml',
load: readyHandlerMethod,
error: errorHandlerMethod,
timeout: 10000,
scDispHandler: displayHandlerMethod,
scDispHandlerArgs: displayHandlerArgs,
scXslPath: xslFile
};

Something to note, I have inserted some custom arguments so that the invoked load handlers can further invoke other functions and pass along context.

xhrGet calling error instead of load on IE6 when no error occurs

I am converting some clunky old pages to use dojo 1.1, and ran into a snag when doing cross browser testing. Everything is fine in Firefox, but fails in IE 6. The basic approach here is to invoke a php file on the server in response to user click, and have it return a JSON structure based on what it finds in the database. That JSON structure is then used to build a table in a div by DOM manipulation. Looks good, runs fast – but not in IE.

The interesting problem in IE is that the error function is called instead of the load function. If I examine the HTTP response, it is 200 and the response string is “OK” – as you would expect if no error occurred. But how then did that function get invoked, if there was no error? Why not the proper load function? The JSON looks correct, and seems properly interpreted in Firefox.

Here’s what it looks like:

dojo.xhrGet({
url: 'searchResultsJSON.php?' + paramString,
handleAs: "json",
load: function(response, ioArgs) {
if ( response.matches.length == 0 )
alert("No matching records found.");
else {

// do a bunch of DOM manipulation here
}
}
return response;
},
error: function(response, ioArgs) {
alert('Error when retrieving search results from the server: ' + ioArgs.url);
}
});

The JSON stuff is just raw JSON.

{ “matches”: [array full of stuff ] }

Does IE require something else, like headers, perhaps? I’m at a bit of a loss here in how to make this work in other browsers, so I’d appreciate any guidance as to why this isn’t sufficiently portable.

Dojo Example: xhrGet and xhrPost

Before I start covering more advanced topics, I'll focus the next few weeks on the basics of the Dojo Toolkit. As such, the first topic that needs to be discussed is the work-horse of any modern AJAX application: the asynchronous calls to a website. There are 2 functions of importance in Dojo: xhrGet and xhrPost. But enough talk, let me show the examples:

xhrGet

Description: The work-horse of the dojotoolkit, it allows you to send HTTP GET requests asynchronously.Use it anytime you need to grab information from the server asynchronously. The only exception is that you shouldn't use xhrGet for forms, use xhrPost!
Example: http://www.dojoforum.com/demo-0.9/xhr/xhrGet.html

<html>
<head>
        <title>Dojo xhrGet and xhrPost</title>
        <!-- Initialize Dojo -->
        <script src='/dojo-0.9/dojo/dojo.js' type='text/javascript'></script>
        <script type='text/javascript'>
        //<!--
        // Function that retrieves the remote HTML and puts it into
        // the <div>
with an id of 'html-content'.
        function getHtml () {
            dojo.xhrGet ({
                // Location of the HTML content we want to grab
                url: '/demo-0.9/xhr/content.html',
       
                // Called when the page loaded successfully
                load: function (data) {
                    dojo.byId('html-content').innerHTML = data;
                },
       
                // Called if there was an error (such as a 404 response)
                error: function (data) {
                    console.error('Error: ', data);
                }
            });
        }
       
        // Function that retrieves a JSON object and puts the information
        // into the <div> with an id of 'json-content'. Notice how we're defining
        // 'handleAs' to be of type 'json' now. That lets Dojo know that the data being
        // retrieved from the URL should be eval()-ed and converted to a javascript object.
        function getJson () {
            dojo.xhrGet ({
                url: '/demo-0.9/xhr/content.json',
                handleAs: 'json', // IMPORTANT: tells Dojo to automatically parse the HTTP response into a JSON object
                load: function (data) {
                     dojo.byId('json-content').innerHTML = data.content;
                },
                error: function (error) {
                    console.error('Error: ', error);
                }
            });
        }
        //-->
        </script>
</head>
<body>
        <div id='html-content'><a href='#' onClick='getHtml();'>Click me to get some HTML content</a></div>
        <div id='json-content'><a href='#' onClick='getJson();'>Click me to get some JSON content</a></div>
</body>
</html>


The above code should be self-explanatory for the most part, though I did slip in a small function call that might be unfamiliar to people that have never seen Dojo: dojo.byId(). There's not much magic in the function, it's simply a much shorter alias for document.getElementById().

xhrPost

Description: It submits a HTTP POST request asynchronously. Use xhrPost when you want to send form data to a website and the form doesn't contain any file-input fields. (use dojo.io.iframe.send() instead)
Example: http://www.dojoforum.com/demo-0.9/xhr/xhrPost.html

<html>
<head>
        <title>Dojo Example: xhrGet and xhrPost</title>
        <!-- Initialize Dojo -->
        <script src='/dojo-0.9/dojo/dojo.js' type='text/javascript'></script>
        <script type='text/javascript'>
        //<!--

        // The following function submits the data from the 'post-form' form
        // to a PHP script located at
        // 'http://www.dojoforum.com/demo-0.9/xhr/parse_form.php'
        // The PHP script simply outputs a string in the format of
        // 'Hello $name!', which is then put in the <div>
w/ the id
        // of 'response'.
        //
        // NOTE: As with xhrGet, you can also use handleAs to accept
        // JSON objects in your load() function.
        function submitForm() {
                dojo.xhrPost ({
                        // The page that parses the POST request
                        url: '/demo-0.9/xhr/parse_form.php',
               
                        // Name of the Form we want to submit
                        form: 'post-form',
               
                        // Loads this function if everything went ok
                        load: function (data) {
                                // Put the data into the appropriate <div>
                                dojo.byId('response').innerHTML = data;
                        },
                        // Call this function if an error happened
                        error: function (error) {
                                console.error ('Error: ', error);
                        }
            });
        }
        //-->
        </script>
</head>
<body>
        <div id='response'></div>
        <div>
                <form method='post' id='post-form'>
                        <input type='text' name='name' />
                        <a href='#' onClick='submitForm();'>Submit Form</a>
                </form>
        </div>
</body>
</html>

Most of the above code should look very familiar, as it's basically the same as xhrGet. In fact, xhrGet also supports the 'form' argument to its function call, but it's advised not to use it. If you want to see the source of the PHP file 'parse_form.php' then click here

I hope these brief examples have given you a glimpse into the most basic asynchronous XMLHttpRequest calls provided by the Dojo Toolkit. From here you should take a look at dojo.io.iframe.send(), dojox.io.xhrMultiPart() and for eye-candy dojox.widget.Loader.
Syndicate content

Back to top