Have you ever wanted to know if a request is coming from an Ajax call or from a standard GET/POST from the browser when using the ColdFusion 8 Ajax functionality?  I know I have, so I looked to implement a solution as I did with the Prototype library.  The easiest way is to utilize the request headers sent by the browser to the server, which you can modify with an Ajax call programmatically pretty easily.

So how do you modify the headers sent by ColdFusion 8 when using the built-in Ajax functionality?

Unfortunately, since CF 8 uses Ext 1.1 and not Ext 2, there is no global Ext.Ajax object to utilize to manipulate the Ajax request headers.  So, we have two options:

  1. alter the code within your cfajax.js file (within your CFIDE/scripts/ajax/package folder)
  2. Or, we can modify the sendMessage() method within the ColdFusion.Ajax JS Object.

I wanted to stay away from modifying the server-wide cfajax.js file, so I went with option 2.

But if you want to use option 1, just open the file in your favorite IDE or editor, and then add:

?View Code COLDFUSION
1

req.setRequestHeader('X-My-header','my value');

before the req.send() method.  You can see where I made the modified below on lines 147 and 152 of cfajax.js:

?View Code JAVASCRIPT
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

$L.info("ajax.sendmessage.get","http",[url]);
req.open(_20b,url,_20d);
req.setRequestHeader("X-Requested-With","ColdFusion");
req.send(null);
}else{
$L.info("ajax.sendmessage.post","http",[url,_20c]);
req.open(_20b,url,_20d);
req.setRequestHeader("X-Requested-With","ColdFusion");
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
if(_20c){
req.send(_20c);
}else{
req.send(null);
}
}

The second option is to manipulate the sendMessage() method after it has been loaded into the DOM:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

Ext.onReady(function(){
    ColdFusion.Ajax.sendMessage = function(url,_20b,_20c,_20d,_20e,_20f,_210){
        var $C = ColdFusion;
        var $A = $C.Ajax;
        var $L = $C.Log;
        var req=$A.createXMLHttpRequest();
        if(!_20b){
        _20b="GET";
        }
        if(_20d&&_20e){
        req.onreadystatechange=function(){
        $A.callback(req,_20e,_20f);
        };
        }
        if(_20c){
        _20c+="&_cf_nodebug=true&_cf_nocache=true";
        }else{
        _20c="_cf_nodebug=true&_cf_nocache=true";
        }
        if(window._cf_clientid){
        _20c+="&_cf_clientid="+_cf_clientid;
        }
        if(_20b=="GET"){
        if(_20c){
        _20c+="&_cf_rc="+($C.requestCounter++);
        if(url.indexOf("?")==-1){
        url+="?"+_20c;
        }else{
        url+="&"+_20c;
        }
        }
        $L.info("ajax.sendmessage.get","http",[url]);
        req.open(_20b,url,_20d);
        req.setRequestHeader("X-Requested-With","ColdFusion");
        req.send(null);
        }else{
        $L.info("ajax.sendmessage.post","http",[url,_20c]);
        req.open(_20b,url,_20d);
        req.setRequestHeader("X-Requested-With","ColdFusion");
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        if(_20c){
        req.send(_20c);
        }else{
        req.send(null);
        }
        }
        if(!_20d){
        while(req.readyState!=4){
        }
        if($A.isRequestError(req)){
        $C.handleError(null,"ajax.sendmessage.error","http",[req.status,req.statusText],req.status,req.statusText,_210);
        }else{
        return req;
        }
        }
    };
});

In the example above, I am setting the request headers to include a custom header ‘X-Requested-With’ and setting the value to ‘ColdFusion’.  I don’t think either solution is extremely elegant, but both will do the job.  The biggest problem to either approach will be when we decide to upgrade ColdFusion, which will most likely not use the same syntax for the sendMessage() method (when using option 2), or we will loose the changes we made to the cfajax.js file (if you choose option 1).

Now, every Ajax request sent using CF8 Ajax will contain this parameter in the request headers, so all I need to do is check if the parameter exists, and the value is ‘ColdFusion’, just as we expect if the request is indeed coming from JavaScript.  Here is what my isAjaxRequest() method looks like:

?View Code COLDFUSION
1
2
3
4
5
6
7
8
9

<cffunction name="isAjaxRequest" output="false" returntype="boolean" access="public">
    <cfset var headers = GetHttpRequestData().headers>
    <cfif structkeyexists(headers, "X-Requested-With")>
        <cfif headers['X-Requested-With'] eq 'ColdFusion'>
            <cfreturn true>
        </cfif>
    </cfif>
    <cfreturn false>
</cffunction>

Have suggestion on how to do this easier or using a better approach?  Leave a comment below.

This entry was posted on Friday, March 28th, 2008 at 4:19 pm.
Categories: AJAX, ColdFusion, ColdFusion 8, Ext, Javascript, Web2.0.

No Comments, Comment or Ping

Reply to “CF8 determining if request is Ajax”