Examples of dojo.xhrGet() function for AJAX development

The dojo.xhrGet() function is used for AJAX development with Dojo. This function has been replaced with dojo/request/xhr since Dojo v1.8.

The examples below are for users of older versions of Dojo.

Example of dojo.xhrGet where the object's property handleAs is set to 'text'. This means data returned from the server is in text format.  What those values do is instruct it to try and hand the data to the asynchronous callback functions in that format.

The ajax example below retrieves the data in text format. The data returned by the server is a html markup (which could be from a jsp or jspf). This text data becomes the content of a new dojox.layout.ContentPane object 'newPane' (a div to display the data). This is placed inside another contentpane (div) 'cpWidget' thru the function dojo.place().

var cpWidget = dijit.byId("cpWidgetId");
dojo.xhrGet({
 url: "SampleURL?" + getSomeParam() + "&" + getMoreParams() + "&categoryId=" + categoryId  + "&batch=no",
 handleAs: "text",
 load: function(data) {
  var newPane = new dojox.layout.ContentPane({
   content:data,
  }); 
   
  dojo.place(newPane.domNode, cpWidget.domNode,'first');
 },
 error: function(error) {
  alert('There was an error when retrieving information.\n' + error);
 }
}); 

Another ajax example retrieving data in text format.

dojo.xhrGet({
 url: "SampleURL?" + getParams(),
 handleAs: "text",
 load: function(data) {
  document.getElementById("mainDiv").innerHTML = data;
 },
 error: function(error) {
  alert('There was an error when retrieving information.\n' + error);
 }
});

The ajax example below retrieves the data in json format. The json data is used to populate the Option elements of a dijit.form.FilteringSelect object.

function buildYearFilteringSelect() {
 //fetch the 'YEAR' options
 var yearFS = dijit.byId("year");
 yearFS.store.root.options.length = 0;
 var xhrArgs = {
         url: "AjaxGetYearJSONURL",
         handleAs: "json",
         preventCache: true,     
         content: {
                "retrieveType": "YEAR"
         },
         error: function (error) { 
      errorHandle(error); 
         },
         load: function (data) {
         if(data.items != null && data.items.length > 0){ 
          yearFS.store.root.options[0] = new Option("YEAR", "Year");      
          for(var i=1;i<data.items.length;i++){
              yearFS.store.root.options[yearFS.store.root.options.length] = 
               new Option(data.items[i].value, data.items[i].value);
            }
          yearFS.attr('value','Year');
   yearFS.attr('displayedValue','YEAR');
   //use dojo.connect to call the _startSearchAll() method when the _onConnect event is triggered on the filtering select widget
   //then call the select() and focus() methods to automatically open the filtering select's menu
      dojo.connect(yearFS, '_onConnect', function (val) {
      yearFS._startSearchAll();
      document.getElementById('year').select();     
   } 
   yearFS.focus();   
         }
         }
 };
 dojo.xhrGet(xhrArgs); 
}