Updated February 21, 2023
Introduction to JSON in Ajax jQuery
JSON in ajax jQuery is used to retrieve the data from the JSON file. A query string is attached to the URL with data transmitted to the server. If the data parameter’s value is a plain object, it is first transformed to a string and then url-encoded before being appended to the URL. The returned data is often a JavaScript object or array defined by the JSON format.
What is JSON in ajax jQuery?
- JSON’s primary benefit is its speed. JSON is less verbose than HTML, resulting in fewer bytes and a faster parse.
- As a result, we can process more JSON-formatted communications than XML-formatted messages. JSON also provides a very efficient and intuitive object representation, which has led to formats like BSON, which stores JSON-like objects in binary format.
- The JSON format is parsed with the $.parseJSON() method, which is provided to the success callback. In addition, the text status of the answer is also sent to it.
- The request will normally fail silently if there is a syntax mistake in the JSON file. Because of this, don’t change JSON data by hand very often. JSON is a data-transfer format with more stringent syntax restrictions than JavaScript’s object literal notation.
- All of the jQuery Ajax functions supersede the XMLHTTPRequest object. The methods jqXHR.done (for success), jqXHR.fail (for error), and jqXHR.always (for completion). All take a function parameter that is called when the request ends.
- The callback is immediately fired if the request is already complete. If we have not needed many configurations, the $.getJSON method is useful for working directly with JSON.
- The more generic $.ajax helper with the appropriate settings is implicitly applied.
- By changing the accept header to application/JSON, the jQuery getJSON method makes an asynchronous http GET call to the server and receives data in JSON format.
- JSON is a text-based, language-independent format frequently used in online applications to communicate data. AJAX code can be used to obtain JSON data.
How to use JSON in ajax jQuery?
- AJAX allows us to retrieve a response asynchronously; it will save bandwidth. The below example shows how to use JSON in ajax jQuery as follows.
- The jQuery getScript method makes an HTTP GET request to the server, which receives and executes the JavaScript file. The getScript method of the jQuery library calls the get method and sets dataType to script.
Code –
<html>
<head>
<meta content = "text/html; charset=utf-8">
<title> JSON in Ajax JQuery </title>
<script type = "application/javascript">
function load()
{
var url = "http://date.JSONtest.com/";
var req;
if (window.XMLHttpRequest){
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
req=new ActiveXObject ("Microsoft.XMLHTTP");
}
req.onreadystatechange = function() {
if (req.readyState == 4 )
{
var JSONObj = JSON.parse (request.responseText); JSON object
document.getElementById ("Day").innerHTML = JSONObj.Day;
document.getElementById ("Month").innerHTML = JSONObj.Month;
document.getElementById ("Year").innerHTML = JSONObj.Year;
}
}
req.open ("GET", url, true);
req.send ();
}
</script>
</head>
<body>
Day: <span id="Day"></span><br/>
Month: <span id="Month"></span><br/>
Year: <span id="Year"></span><br/>
<button type="button" onclick="load()">Click here to load info.</button>
</body>
</html>
JSON in ajax jQuery Method
Below is the method of JSON ajax jQuery as follows.
- $.ajax() – This method is used to make an async AJAX request.
- $.ajaxPrefilter() – This method is used to handle custom Ajax options or modify current options before each request is delivered and processed by $.ajaxPrefilter().
- $.ajaxSetup() – This method sets the default values for AJAX queries in the future.
- $.get() – This method loads data from a server using an AJAX HTTP GET request.
- $.ajaxTransport() – It will create an object that manages the actual transmission of Ajax data
- $.getJSON() – Using an HTTP GET request, $.getJSON () loads JSON-encoded data from a server.
- $.parseJSON() – In version 3.0, this function was deprecated; instead, use JSON.parse(). Returns a JavaScript value from a well-formed JSON string.
- $.getScript() – Uses an AJAX HTTP GET request to load a JavaScript from a server.
- $.param() – This method creates a serialised representation of an array or object with $.param().
- $.post() – This method uses an AJAX HTTP POST request to load data from a server.
- AjaxComplete() – When an AJAX request is completed, the function ajaxComplete () is called.
- AjaxError() – It will specify a method to be called when an AJAX request fails.
- AjaxSend() – It specifies a function to execute before sending an AJAX request.
- AjaxStart() – It specifies a method to run when an AJAX request is made for the first time.
- AjaxStop() – It specifies a method that will be executed once all AJAX requests have been completed.
JSON in ajax jQuery Parameters
- Use the jQuery library with Ajax to retrieve data from a JSON file. JSON GET (URL, [data], [callback]. JQuery is a programming language.
- Using a GET HTTP request, the getJSON (URL, [data], [callback]) method retrieves JSON data from the server.
- The following is a list of all of the parameters that the JSON jQuery ajax method uses:
- Data – This optional argument represents key/value pairs that will be delivered to the server.
- Url – A string providing the URL to which the request is sent data.
- Callback – This optional argument represents a function that will be performed if the data is successfully loaded.
- The example below shows the JSON use in ajax jQuery parameters as follows.
Code –
<html>
<head>
<title>JSON in Ajax JQuery Parameter</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/2.1.3/jQuery.min.js"></script>
<script>
$(document).ready(function()
{
$("#driver").click(function(event){
$.getJSON('result.JSON', function(jd) {
$('#stage').html('<p> Stud_name: ' + jd.name + '</p>');
$('#stage').append('<p>Stud_age : ' + jd.age+ '</p>');
});
});
});
</script>
</head>
<body>
<p>JSON in Ajax JQuery Parameter</p>
<div id = "stage" style = "background-color:#cc0;">JSON in Ajax JQuery Parameter
</div>
<input type = "button" id = "driver" value = "Click on this tab to load the result" />
</body>
</html>
Conclusion
JSON is a text-based, language-independent format frequently used in online applications to communicate data. AJAX code can be used to obtain JSON data. AJAX allows us to retrieve a response asynchronously; it will save bandwidth. JSON in ajax jQuery is used to retrieve the data from the JSON file.
Recommended Articles
This is a guide to JSON in Ajax jQuery. Here we discuss How to use JSON in ajax jQuery, along with the codes and outputs. You may also look at the following articles to learn more –
