XmlHttpTutorial

Included in Nitobi Ajax Toolkit is a cross-browser XmlHttp interface. To use this, as with all the other components, set up your page with the Nitobi namespace:

Then, include the toolkit JavaScript file:

Then, create a new XHR instance:

function getText()
{
     // Create the XHR object
      var xhr = new nitobi.ajax.HttpRequest();

      // Set the responseType to TEXT (Important for non XML documents!!)
      xhr.responseType = "text";

      // Specify the datasource
      xhr.handler = "data.xml";

      // Subscribe to the getComplete event
      xhr.onGetComplete.subscribe(showText);

      // Get the data
      xhr.get();
}

Then, because we subscribed to a function called showText for our getComplete event, we can set that up to display the results. By including an argument in the getComplete function (here we've called it responseObj), we get access to the XHR object.

function showText(responseObj)
{
alert(responseObj.response);
}

Other properties of responseObj are:

params - A holding place for any arbitrary object you may want to pass from your original XHR request to the getComplete function - for the purposes of maintaining context. Optional.
response - The raw response text from the XHR request
status - The status code (200 = OK, 404 = File not found, etc)
statusText - Http Status text ("OK", ..)

If the request type is XML (default), then 'response' will hold the XML document. This can be serialized to text by using nitobi.xml.serialize. Eg:

function showXml(responseObj)
{
alert(nitobi.xml.serialize(responseObj.response));
}

View Printable Version

Comments:

Poster: xian (Thursday, June 07, 2007)

Nice feature to make sure that your requests are not cached.

xhr.cacheBust(url);

This will add "nitobi_cachebust=1181254301230" to the querystring where the number changes on each request forcing IE to make a fresh request.

Poster: citracyde (Monday, August 06, 2007)

I found this documentation lacking for users new to AJAX.  To receive data from a getHandler.php (similar to that found throughout the Nitobi samples) use a JavaScript function similar to below:

function openrecord(eventArgs) 

{

    var treeObject = eventArgs.source;

    var selectedNode = treeObject.getSelected()[0];

    var keyValue = selectedNode.getAttribute('uid');  

    var xhr = new nitobi.ajax.HttpRequest();

    xhr.handler = "recordgethandler.php?uid="+keyValue;

    xhr.async = true; // async is true by default

    xhr.responseType = "xml"; // by default the appropriate responseType will be used - ie XML if the data is valid XML otherwise "text".

		xhr.onGetComplete.subscribeOnce(function(evtArgs) {alert("In onGetComplete:
" + nitobi.xml.serialize(evtArgs.response))});

		xhr.completeCallback = function(evtArgs) {alert("In completeCallback:
" + nitobi.xml.serialize(evtArgs.response))};

		xhr.get();

Nitobi Product Knowledgebase

XmlHttpTutorial

Comments: