How to check Ajax Request and Response in Browser?

Are you developing an Ajax based application or placing some Ajax mechanism in your web pages? And you do not know how to verify the request and response of these Ajax calls.

Well! We shall look into Browser Developer Mode and see the Ajax Request and Response.

Open Chrome Browser and hit the URL of your website that has Ajax calls.

Now Open Developer Tools.

Options (Customize and control Google Chrome) -> More Tools -> Developer Tools.

There will be many tabs. But we use ‘Network’ tab for testing Ajax Calls.

Perform an action that triggers an Ajax Call.

For demonstration, we used Submit Quiz Question to TutorialKart. When you fill in the details and click on Submit, an Ajax Call is sent.

Ajax Request and Response in Browser Developer Tools

How to check the Ajax Request and Response

In the above picture, you see that there is a new entry in the Network Tab with the name admin-ajax.php.

Click on the entry.

Ajax Call Details

Headers Tab

In the headers tab, you have the following sections.

  • General
  • Response Headers
  • Request Headers
  • Form Data

In General section, you see the details like Request URL, Request Method (GET/POST), Status Code (if 200, then its a success), Remote IP Address.

Form Data

If you have done the Ajax Call on a form and sent the serialized form data, you can see the fields sent in the Ajax Call under Form Data section.

Ajax Call Form Data

Any response from the Ajax Call can be seen under ResponseĀ Tab.

Ajax Call Response

Leave a Reply

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