How can I use Modernizr to test a browser for AJAX support?

Question

As a big fan of Progressive-Enhancement, I use Modernizr to test browser capabilities. How can I use Modernizr to test the browser's support of AJAX (specifically, jQuery's AJAX functions)?

Answer 1

For what it's worth, I have added issue #734 to Modernizr to add a test for AJAX, developed the test, created a JSFiddle to test, er, the test...and initiated a pull-request (issue #735) back to the fine folks who maintain Modernizr.

The relevant JS:

Modernizr.addTest('ajax', function() {
    var xhr = new XMLHttpRequest();
    return !!('onreadystatechange' in xhr);
});

Answer 2

You don't need Modernizer to test this, jQuery has it built-in.

if (jQuery.support.ajax) {
    alert("Ajax is supported!");
}

Although i'm not sure exactly how jQuery handles $.ajax calls when it isn't supported. It will either fail silently, or trigger the error callback. If it's important to you, you should test it.

Answer 3

may be or may not be relevant to the question but you can use the exception handling of jquery ajax. To answer the question of Kevin B. without any exception handling it will just fail silently (the callback will just return nothing). So if you want it to show anything use exception handling.

Short example:

$.ajax({
type: "POST",
url: "ajax_page.php",
success: function(data, status, xhr) {
// perform operations on success
alert('Success');
},
error: function(xhr, status, error) {
// perform operations on error
alert(xhr.responseText);
}
});