4

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)?

Jeromy French
  • 11,812
  • 19
  • 76
  • 129
  • Because a Google search on the topic is a dead-end, I wonder if AJAX is automatically supported with JavaScript support, so there's no *need* to test for it. – Jeromy French Oct 18 '12 at 18:19
  • Are there still browsers around that don't support AJAX? The only one that comes to mind is IE5 or IE6... – Pekka Oct 18 '12 at 18:23
  • Modernizr is a library for detecting browser capabilities. jQuery is not a browser capability — you either have it available (if you have loaded it), or you don't; its availability does not depend on the browser but on you. jQuery itself claims IE6.0+ compatibility, so it it a safe bet to assume that if you have jQuery loaded, you can use its AJAX methods. – lanzz Oct 18 '12 at 18:23
  • @Pekka Older mobile devices that have browsers may not support ajax, see jQuery Mobile's device support list. – Kevin B Oct 18 '12 at 18:25
  • Does it have to be a Modernizr test for support? If not, http://stackoverflow.com/questions/1249502/how-to-check-in-javascript-if-xmlhttprequest-object-supports-w3c-progress-events – j08691 Oct 18 '12 at 18:32
  • @lanzz: agreed, Modernizr is a library and jQuery is not a browser capability. I'd like to use Modernizr to test for the browser's capability to implement AJAX. Specifically jQuery's AJAX, but that's just a detail. I don't think it *is* safe to assume that jQuery load means you can use AJAX. In fact, I bet you cannot assume that, which is why jQuery has jQuery.support.ajax, n'est pas? – Jeromy French Oct 18 '12 at 18:45
  • Why do you insist on using only Modernizr and nothing else for detecting something that Modernizr does not support detection of? You should rely on `jQuery.support.ajax` directly. – lanzz Oct 18 '12 at 18:52

3 Answers3

9

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.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • 2
    Good lead. I now see http://api.jquery.com/jQuery.support/, which curiously references Modernizr: "For your own project's feature-detection needs, we strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support." – Jeromy French Oct 18 '12 at 18:35
  • With that in mind, you can expect this test to no longer exist in jQuery 2.0, but it should continue to exist in jQuery 1.9 (oldIE support version) – Kevin B Oct 18 '12 at 18:37
  • Right; this doesn't make your answer wrong. I'll just leave the question open a little longer to attract more comments. – Jeromy French Oct 18 '12 at 18:38
  • 1
    One thing's for sure though, modernizr doesn't have a test for ajax. You could use the one jQuery uses if you're worried about it disappearing from the jQuery core. Although, i'm having a hard time finding it in the source. – Kevin B Oct 18 '12 at 18:45
  • So a test that results in a Modernizr-styled class append to HTML tag (nod to j08691): try { var xhr = new XMLHttpRequest(); if ('onprogress' in xhr) { $('html').addClass('ajax'); } } catch (exception) { console.log(exception.message); } – Jeromy French Oct 18 '12 at 18:57
4

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);
});
Jeromy French
  • 11,812
  • 19
  • 76
  • 129
  • Kevin's answer is also very useful, but the above code is how to test for AJAX support through Modernizr. – Jeromy French Jan 08 '13 at 20:44
  • Is this still the best way to check for jQuery AJAX with modernizr, or has anything changed in the past 4 years? – Adam Apr 26 '16 at 06:40
  • @Adam If you want to know specifically about jQuery's AJAX compatability, see http://stackoverflow.com/a/12961373/1430996 – Jeromy French Apr 26 '16 at 18:10
1

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);
}
});
Anthony
  • 427
  • 2
  • 6
  • A good thought, but I'd rather test for AJAX once, then adjust the DOM/interactions. Your idea would try any/all AJAX and handle. I'm a novice at progressive-enhancement, but I think this conflict ("test, then layer on enhancements" vs "try, then accomodate failuer") is where progressive-enhancement and graceful degradation fundamentally differ. – Jeromy French Oct 19 '12 at 16:04