Ajax request headers

[timb]

I know this has been requested before, but it doesn't look like it's in the "Official Feature Request List". :)

What I would like to see is the ability for Ext to support setting headers for Ajax requests. I know Jack has asked about more information about this in the past. I would like to make this as easy as possible, so I will give as much info as I can. :)

First of all, request headers are supported in all three libraries. However, each library is a bit different in how you set the headers. Here are links for the documentation:
YUI - initHeader: http://developer.yahoo.com/yui/docs/YAHOO.util.Connect.html#initHeader
prototype - requestHeaders: http://www.prototypejs.org/api/ajax/options
jQuery - beforeSend: http://docs.jquery.com/Ajax

It looks to me like the best place to add support for headers is under Ext.lib.Ajax (*-bridge.js files). Personally, I would like it if I could include everything in one call, so it would be nice if we could expand on the Ext.lib.Ajax.request function. Right now, it accepts the following parameters: method, uri, cb, data. Could this be changed so that it could *also* accept an options parameter instead? Here's an example of how you could call it:

this.transId = Ext.lib.Ajax.request({
method: 'POST',
url: 'myUrl',
callback: myCallback, //changed cb to callback to be consistent
data: myParams,
headers: [{
label: 'myHeaderLabel',
value: 'myHeaderValue'
}] //an array of header label/value pairs
});

By expanding the request method to allow an options parameter, it will allow the code to easily be updated for additional features in the future, and it will not break any existing code (as it would still accept method, uri, cb, data).

If you like this, the only question is what do you do with headers in the request so that it works with all three libraries. I can think of a couple of options. First, you could create a beforeRequest type of event, at which time you could set the headers (prototype and jQuery both have similar before send events, YUI doesn't, but you could simulate it). The other option is to set it up in the request object directly.

Here's an example for YUI (I have just coded it to work with options, but the code should also accept method, uri, cb, data):

request: function(options) {
if (typeof options === 'object') {
//code to handle options param. e.g. var hs = options.headers;
} else {
//code to handle method, uri, cb, data params
}

//Is Ext.each and Ext.apply available here?
Ext.each(hs, function(h) { //hs (headers) could be one header or an array of headers
if (h instanceof Array) {
YAHOO.util.Connect.initHeader.apply(YAHOO.util.Connect, h);
} else {
YAHOO.util.Connect.initHeader(h.label, h.value);
}
});

return CN.asyncRequest(method, uri, cb, data);
}

This would have to be done in formRequest as well.

For prototype it's even easier, as you just have to pass requestHeaders to the Ajax.request function. For jQuery, you just hook to the event and set the headers to the XMLHttpRequest object.

Once this is done, you'd probably want to update the Ext.data.Connection object (and anything else that calls Ext.lib.Ajax.request directly) to use the options param.

I hope that the information I have supplied is helpful and that this feature will be implemented. If you want, I could create an experimental bridge for all three libraries. If you would like me to do this, please give me some direction on how you would like it implemented.

FYI: I have offered to help add support for Ext in AjaxPro and Michael has accepted my offer. However, it would be much easier if Ext directly supports setting Ajax request headers.

[jack.slocum]

I have added it to the list. Thanks.

[timb]

Thanks Jack. :)