ColdFusion and ExtJS - Ext.Ajax.request

Lately we have been working with the ExtJS 2.2 library on a large ColdFusion-based project, and I wanted to share some of the techniques we are using to implement AJAX-based functionality.

At its core, AJAX functionality is all about building a richer experience on the client, and that richer experience generally starts with refreshing data on the screen without refreshing the entire page from the server. With Ext, we are often accomplishing this task by sending a request via Ext.Ajax.request() and replacing div contents with HTML fragments returned from the server. Developers can use Ext to draw more compelling UI elements programmatically, but we have found that in many cases, simply using Ext as a transport for HTML fragments serves our needs just as well. 

Just as often, we combine the use of HTML fragments with returned JSON-encoded objects to build an interface that is both easy to construct from a developer/designer perspective and has the ability to handle complex data.

In this code sample, the Javascript function getAccountSummary() calls a like-named method on the server, which checks the user's session information and returns both a form filled out with the user's details and several JSON-encoded objects. In particular, the addresses object contains an array of addresses that the user can edit in the account form, using more JS magic.

     function getAccountSummary(divID){
        setCursor('wait');
        Ext.Ajax.request({
         
          url: '/services/IdentityProxy.cfc?wsdl&method=getAccountSummary',
          
          success: function(response,options){
              var main = document.getElementById("main");
              var ret = Ext.util.JSON.decode(response.responseText);
              user = ret.USER;
              userphone = ret.PHONE;
              userfax = ret.FAX;                           
            addresses = ret.ADDRESSES;
                     
            main.innerHTML=ret.body;       
            showDiv("cancelpwdEdit","hide");     
            showDiv("pwdconfirm","hide");     
            setCursor('default');

          },
          failure: function (response,options){
              alert(response.responseText);
              setCursor('default');
              },

           params:{returnFormat:'JSON'}
        });
               
    } 

As you can see in the function, the returned data is set into variables that are scoped to the browser, meaning they are accessible to other Javascript functions. The div called "main" is then populated with the account form using main.innerHTML = ret.body. 

This technique suffers from a potential security risk (doesn't everything?)- cross-site scripting attacks. There are ways to guard against XSS attacks, more on that another time.