fbpx

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 has been building successful websites for over 20 years and covers all areas of website design, development and marketing with creative custom web designs and a robust in-house team of programmers to get your web marketing to work exactly the way you need it to.

Share On:

Share on facebook
Share on twitter
Share on linkedin

Comments:

Leave a Comment

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

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

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.

Let’s start a Conversation