how do I add a parameter to an ajax call using jquery?

Question

I want to be able to call a URL be either a standard HTTP GET, or an AJAX call.

The server needs to handle the request slightly differently based on whether the request was an AJAX request or not.

Using jQuery, I want to automatically add a parameter to all AJAX requests I make, so that the server can identify them, and without me having to add the parameter everywhere I make a call.

I've tried doing this with a jQuery.ajaxSend event handler, but at that point, the XMLHttpRequest is already constructed, and making changes to the URL or data members of the ajaxOptions object has no effect, and I don't know how to reliably manipulate the XMLHttpRequest object (I can examine it in Firebug, but I don't know what I can expect work in a cross-browser manner).

How should I achieve this? Is there a better way to identify AJAX requests?

Answer 1

I think it would be better and simpler to test for the x-requested-with header with value set to XMLHttpRequest on the server side, to differentiate ajax requests from normal ones. Note: it is very easy to spoof that header. Here's a simple PHP example:

function isAjax() {
    return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
         ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
}

if(isAjax()) { 
    // do something
} else {
    // do something else, or nothing
}

Answer 2

Just make your own function that calls $.ajax but adds it in:

function myAjax(opts) {
    opts.data = opts.data || {};  // make sure it exists
    opts.data.myParam = "42";
    $.ajax(opts);
}

Then call that elsewhere. As karim79 says, you can also check for the X-Requested-With: XMLHttpRequest header. But yeah, both ways are pretty easy to spoof, so take what the client sends you with a grain of salt.