fbpx

Our Black Friday Sale has been extended!  View Sale

HTTP Response Headers of Ajax calls

Overlapping colored triangles

It's not obvious why you might want to access HTTP Response headers, and it's even less obvious how to do so when you decide you need to. Here's how to do it (in jQuery, of course).
This example uses ajaxForm() to turn a form into an Ajax submit and then look for response headers. The ajaxForm callbacks can be considered an extension of the native jQuery ajax callbacks.

$(document).ready(function() {
   var ajaxSubmitOptions = {
      // the normal success callback is not used
      // success: function (responseText) {
      //      ...
      // } ,
      complete: function (xhrObj, status) {
         if(status == "error") { // 500 server error?
            alert("There was an error processing this request.");
         } else {
            if (xhrObj.getResponseHeader("X-My-Custom-Header") != "") {
               alert("Intercepted special HTTP header...");
               alert(xhrObj.getResponseHeader("X-My-Custom-Header"));
            }
            else {
               // call the function you normally would have used in the "success" callback:
               this._success(xhrObj.responseText);
            }
         }
      } ,
      _success: function (responseText) {
         alert("Normal success callback...");
         alert(responseText);
      }
   };
   $('#myForm').ajaxForm(ajaxSubmitOptions);
})

A few things to note:

  1. We do not use the normal success() callback, since all it receives is for an argument is the response text. Only the more advanced complete() function gives us what we need.
  2. In this example, there is a custom header "X-My-Custom-Header" that the Javascript is looking for. You get to set this using your favorite server-side language.

I consider it a design flaw in the jQuery Ajax implementation that you cannot directly access the XMLHttpRequest object from the success() callback function.
So when might you want to do this? That's a very good question =) I've found it useful for making your rich client handle a response that the browser might normally handle, such as a redirect. Otherwise, it's still something I have to explore.

About the Author:

Visionfriendly.com

Visionfriendly.com

VisionFriendly.com is a Chicago digital marketing agency with over 25 years of experience helping clients nationwide. We have an in-house team of marketers and creatives ready to improve your business’s marketing operations.

Share On:

Comments:

Leave a Comment

Your email address will not be published. Required fields are marked *

Copyright © 2024, All Rights Reserved
Tri Colored Triangles
Scroll to Top

We’re Doing Something Awesome

VisionFriendly.com is now Blackbird Digital.

We are the same great people, with a new name, new website, and new ideas.

Take your business to the

Next Level!

Visionfriendly.com has the right team to make your business stand out from other professional websites.

Ready For Takeoff?

A Completely Customized
Digital Marketing Experience

  • We'll be in touch within one business day to discuss your goals and create a personalized plan that fits both you and your business.

  • This field is for validation purposes and should be left unchanged.

Let’s start a Conversation