--- title: "How we can get JSON data using AJAX?" description: "How we can get JSON data using AJAX?" author: "Ethan Karla" published: 2021-08-19 updated: 2026-07-17 canonical: https://answers.mindstick.com/qa/93911/how-we-can-get-json-data-using-ajax category: "programming" tags: ["c#", "jsp and servlets", "javascript", "java programming", "php programming", "asp.net mvc", "asp.net"] reading_time: 5 minutes --- # How we can get JSON data using AJAX? How we can get [JSON data](https://www.mindstick.com/forum/34308/how-to-pass-json-data-from-controller-to-view) using [AJAX](https://www.mindstick.com/articles/257/ajax-toolkit-calendarextender-control-in-asp-dot-net)? ## Answers ### Answer by Ravi Vishwakarma ## student.[json](https://www.mindstick.com/forum/145511/please-explain-json-vs-xml) ``` [   {     'ID': '1',     'Name': 'Senpai',     'Gender': '1',     'Class': '32',     'Seat': '15'   },   {     'ID': '2',     'Name': 'Yui Rio',     'Gender': '0',     'Class': '11',     'Seat': '14'   },   {     'ID': '3',     'Name': 'Yuna Hina',     'Gender': '0',     'Class': '12',     'Seat': '14'   },   {     'ID': '4',     'Name': 'Koharu Hinata',     'Gender': '0',     'Class': '21',     'Seat': '14'   },   {     'ID': '5',     'Name': 'Mei Mio',     'Gender': '0',     'Class': '22',     'Seat': '14'   } ] ``` ## Example.html ```         AJAX JSON by Javatpoint        
       

fatch data from json file

               

Student table here

               
       

   
   ``` Output ![How we can get JSON data using AJAX?](https://answers.mindstick.com/questionanswer/f238712d-0401-4035-824b-2f28fa6a8de5/images/302b085f-3123-45d1-94f3-93722198bf00.png) ![How we can get JSON data using AJAX?](https://answers.mindstick.com/questionanswer/f238712d-0401-4035-824b-2f28fa6a8de5/images/4838b36e-48c5-44a3-bc75-02b03145fd11.png)\ ### Answer by Ravi Vishwakarma You can retrieve JSON data using AJAX by sending an [**HTTP request**](https://www.mindstick.com/blog/304321/explain-the-http-request-methods-in-html) to a server and specifying that the expected response format is JSON. ### Example using jQuery AJAX ```html Get JSON Data with AJAX

User Details

``` ### Sample `data.json` ```plaintext { "name": "John Doe", "age": 30, "city": "New York" } ``` ### Example using the native [XMLHttpRequest](https://answers.mindstick.com/qa/93902/how-to-create-the-xmlhttprequest-object-and-what-are-the-uses-of-xmlhttprequest-object-in-ajax) ```javascript // Create a new XMLHttpRequest object var xhr = new XMLHttpRequest(); // Configure the request xhr.open("GET", "data.json", true); // Handle the response xhr.onload = function () { if (xhr.status === 200) { // Parse the JSON response var data = JSON.parse(xhr.responseText); // Display the data console.log(data.name); console.log(data.age); console.log(data.city); } }; // Send the request xhr.send(); ``` ### Explanation - `url`: The endpoint or JSON file to retrieve data from. - `type` **/** `method`: Specifies the HTTP method (commonly `GET` or `POST`). - `dataType: "json"`: In jQuery, tells AJAX to automatically parse the response as JSON. - `success`: Callback executed when the request completes successfully. - `error`: Callback executed if the request fails. ### Modern Alternative (Fetch API) Today, the recommended approach is to use the Fetch API instead of [**jQuery AJAX**](https://www.mindstick.com/forum/157816/how-does-the-ajax-function-work-in-jquery-also-give-an-example): ```javascript fetch("data.json") .then(response => response.json()) // Convert response to JSON .then(data => { console.log(data.name); console.log(data.age); console.log(data.city); }) .catch(error => { console.error("Error:", error); }); ``` The [**Fetch API**](https://www.mindstick.com/articles/336242/explain-the-concept-of-web-apis-in-javascript) is built into modern browsers, uses promises, and provides a cleaner, more readable syntax than traditional AJAX methods. --- Original Source: https://answers.mindstick.com/qa/93911/how-we-can-get-json-data-using-ajax Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.