I've mostly worked with jQuery before and I'm new to YUI. I wish to set a custom header for each Ajax request using either IO or DataSource in YUI 3. I want the header to be inserted automatically for each request. In jQuery I could acplish this with $.ajaxPrefilter like so:

$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
    var value = 'blah';
    if (value) {
        jqXHR.setRequestHeader("My-Custom-Header", value);
    }
});

I found these pages in the online documentation for YUI 3 but I just don't "get it". How can I acplish this?

.html

.html

I've mostly worked with jQuery before and I'm new to YUI. I wish to set a custom header for each Ajax request using either IO or DataSource in YUI 3. I want the header to be inserted automatically for each request. In jQuery I could acplish this with $.ajaxPrefilter like so:

$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
    var value = 'blah';
    if (value) {
        jqXHR.setRequestHeader("My-Custom-Header", value);
    }
});

I found these pages in the online documentation for YUI 3 but I just don't "get it". How can I acplish this?

http://developer.yahoo./yui/3/examples/io/io-get.html

http://developer.yahoo./yui/3/api/io.html

• javascript
• ajax
• yui

3 Answers 3

Check out the "header" method in the io module: API docs

I haven't tested it, but you should be able to do something like this:

YUI().use('io', function(Y) {
    Y.io.header('X-My-Header', 'My Custom Value');

    Y.io(/*...*/); // Should have the X-My-Header HTTP header
});

Note that this will only apply to the current YUI instance. So if you have another YUI().use(/.../) statement, you'll need to set the header again.

If you need it to provide headers across instances, you should define your own module that wraps the Y.io functionality. Check out this gist to get a sense of what that entails.

I honestly don't think it is good idea to do it "JQuery style". Either way you need to provide configuration object, so few more characters doesn't make much difference.

But the worst part is that when someone else will see your code he will not have idea where the additional headers e from and he will probably waste hours of his life.

If you still want to have default headers somewhere, do it Javascript way like so:

Y.myDefaultIOCfg={"My-Custom-Header":value}
...
var cfg=Y.merge(Y.myDefaultIOCfg, {
    method: 'GET',
    data: 'foo=bar'
})
request = Y.io(uri, cfg)

This way you explicitly say that you are using some object as a pattern for the config object and additional header definition can be found there.

I don't know YUI syntax very well, but try this:

YUI().use("io-base", function(Y) {
  var cfg, request;

  cfg = {
    methos: 'GET',
    data: 'foo=bar',
    headers: {
      'My-Custom-Header': value
    }
  }

  request = Y.io(uri, cfg);
});