View Full Version : An easy way of changing the AJAX header request header

5 May 2007, 8:42 AM
I've been searching the forums extensively while trying to find the perfect solution to change AJAX request headers. The good news is that it is easy to do (you just have to know the right parts of EXT ;) ) and that this will be build-in in the next release of EXT (I have no idea of when that's going to happen).

In you app you include this little code snippet:

Ext.data.Connection.prototype.request = Ext.data.Connection.prototype.request.createInterceptor(function(options){
options = options || {};
options.params = Ext.util.JSON.encode(options.params);
YAHOO.util.Connect.initHeader("Content-Type", "application/json; charset=utf-8");
The above code will change the headers of all AJAX calls to have Content-Type set to application/json; charset=utf-8 assuming you're using YUI as EXT foundation. It will also encode your parameters to JSON, which is important if you work with ASP.NET AJAX Extensions. If you're using YUI you can see here (http://developer.yahoo.com/yui/connection/)what else you can set. This is merely a demonstration of how to alter EXT settings application wide (or at least page wide).

timb have used a similar approach to make EXT talk to AJAXPro. (http://extjs.com/forum/showthread.php?t=5744)
Changing AJAX request headers will be implemented in EXT 1.1 (http://extjs.com/forum/showthread.php?t=4168)

Cheers and happy programming, Jon!

5 May 2007, 10:51 AM
Some of you might be wondering how to accomplish the same for the Ext.UpdateManager which doesn't use the Ext.data.Connection class. Well, it's just as easy just not exactly the same (I strongly advice you to download Firebug and look through the Ext class in the Dom tab - these are the classes you can intercept using this approach).

Ext.UpdateManager.prototype.update = Ext.UpdateManager.prototype.update.createInterceptor(function(url, params, callback, discardUrl){
url.params = Ext.util.JSON.encode(url.params);
YAHOO.util.Connect.initHeader("Content-Type", "application/json; charset=utf-8");
The above will JSON encode the parameters and set the Content-Type to application/json; charset=utf-8.

You could (should?) also use this method to create an universal failed handler to your app. In ASP.NET, if you have authentication enabled you will get a error as response, telling you that the user failed authentication, if the time window is expired. In that case you probably want to redirect the user to your login page. Other handlers might be error logging etc.

Happy coding!

5 May 2007, 11:27 AM
Hehe I've just found another base class to overwrite, the deepest one so far.

Ext.lib.Ajax.request = Ext.lib.Ajax.request.createInterceptor(function(formAction, url, connectionObject, params){
YAHOO.util.Connect.initHeader("Content-Type", "application/json; charset=utf-8");
Eventhough I have named the parameters the are not of much good to you, if you want to encode the params. This is because Ext.lib.Ajax is used in every AJAX request and that means (as you seen in the other 2 examples) that the params actually used will shift position (remember that to globaly encode the params from Ext.UpdateManager you had to find the params in the url argument).
But for settings on the underlaying framework it's perfect (and general error logging).

... Anyone interested in me making this an official tutorial?

10 May 2007, 4:04 AM
thank you for posting this information... though I am a little lost on how I implement this.... fairly new to javascript.

What I am doing right now is setting some echo parameters in each request and the server will reply back with in JSON format along with other data... My problem is having to customize each server side response with the echo data such as XML, etc. What I really want to do is set an 'echo' header on the request and the server will copy the header to the response.

var rows = feedEditorGrid.getSelectionModel().getSelections();
for (var i=0; i < rows.length; i++) {
var row = rows[i];
var params = {
'echoRequestKey': RandomNumber(),
params = Ext.urlEncode(params);
Ext.lib.Ajax.request('POST', urlFeedAdmin, deleteFeedCallback, params);


Can I add the echo parameter to the Interceptor?

Ext.lib.Ajax.request = Ext.lib.Ajax.request.createInterceptor(function(formAction, url, connectionObject, params, echo){
// YAHOO.util.Connect.setDefaultPostHeader(false);
YAHOO.util.Connect.initHeader("echo", echo);

I will experiment.. but just a little confused as to whether or not I understood what you wrote. Any help would be appreciated. Thanks

10 May 2007, 6:19 AM
Got it working... thanks for sharing your findings

11 May 2007, 11:48 AM
Good. I didn't see your post until now...

25 Sep 2007, 5:10 AM
Hi, wanted thank you for your post. It helped to solve my problem.

I had following problem:

I had ExtJs application that saves it data to serverside (Java servlet).

My HTML page (ExtJs app) had UTF-8 encoding.

I was submitting JSON data using this code:

function saveData() {
url : 'myServlet' ,
params : { action : 'save', json: getExportJSON()},
method: 'POST',
success: saveDataSuccess,
failure: saveDataFailure

where getExportJSON generates JSON from ExtJs app.

Problem was that if I use latvian characters like "ā" "ē" "

25 Sep 2007, 10:24 AM
These are great tips, thanks for sharing...

-Mike Kidder

26 Sep 2007, 12:33 AM
Why not just use Ext.Ajax as documented?



http://www.extjs.com/deploy/ext/docs/output/Ext.Ajax.html#request See headers option.

27 Sep 2007, 5:34 AM
This post is for EXT 1.0 that didn't have Ext.Ajax

30 Sep 2007, 5:28 PM
This post is for EXT 1.0 that didn't have Ext.Ajax

what is life w/out ext.ajax!?! :)

4 Oct 2007, 12:01 PM
I thought Ext 1.1.1 had overcome the problem but that is not the case. Here is what you can do

Ext.lib.Ajax.request = Ext.lib.Ajax.request.createInterceptor(function(method, uri, cb, data, options){
this.defaultPostHeader = "application/json; charset=utf-8;";

Cheers, Jon!