web

Introduction to JSON and its Uses

Introduction to JSON

JSON (JavaScript Object Notation) एक Lightweight Data Interchange Format है, जो Developer के लिए पढ़ना और लिखना आसान है। यह Machine के लिए Parse और Generate करना भी आसान है। JSON का उपयोग मुख्य रूप से XML के विकल्प के रूप में Server और Web Application के बीच Data Transmit करने के लिए किया जाता है।

JSON Syntax:

JSON Data को JavaScript Object Literal के समान Key-Value Pair के रूप में दर्शाया जाता है। JSON का Syntax, Short होता है, जो इसे Human-Readable और Parse करने में आसान बनाता है। इसकी Primary build Key-Value Pair, Array और Object हैं।


{
“key1”: “value1”,
“key2”: “value2”,
“key3”: “value3”
}

Data Types in JSON

JSON विभिन्न Data Type का Support करता है, जिसमें Strings, Numbers, Objects, Arrays, Booleans और Null Include हैं।

Example:


{
“name”: “John Doe”,
“age”: 30,
“isStudent”: false,
“grades”: [85, 92, 78],
“address”: {
“city”: “New York”,
“zipCode”: “10001”
},
“isNull”: null
}

  • Objects

Curly Brace {} में Close, Object में Colon द्वारा अलग किए गए Key-Value Pair होते है।

Example:


{
“name”: “John Doe”,
“age”: 30,
“city”: “New York”
}

  • Arrays

Square Bracket [ ] में Close, Value का Ordered List होता है।

Example:


{
“fruits”: [“apple”, “orange”, “banana”] }

  • Strings

Text Data, Double Quote में Enclosed होता है।

Example:


{
“message”: “Hello, World!”
}

  • Numbers

Integers या Floating-Point Value के रूप में दर्शाया गया है।

Example:


{
“temperature”: 25.5
}

Boolean:

यह True या False values को Represents करता है|

Example:


{
“isStudent”: true
}

Uses of JSON

JSON Web Development में एक महत्वपूर्ण Role निभाता है, और इनका Client और Server के बीच Data Exchange करने के लिए large Scale पर Use किया जाता है। यहां कुछ प्रमुख Key हैं, जहां पर JSON का आमतौर पर Use किया जाता है-

  • AJAX and API Communication

AJAX (Asynchronous JavaScript और XML) का use Server पर Asynchronous Request करते समय या API (Application Programming Interfaces) के साथ Interact करते समय तथा  JSON Data Exchange के लिए एक Popular Format है।

Example:


// Creating an XMLHttpRequest object
var xhr = new XMLHttpRequest();

// Configuring it for a GET request to an API endpoint
xhr.open(‘GET’, ‘https://api.example.com/data’, true);

// Setting the request header to accept JSON
xhr.setRequestHeader(‘Content-Type’, ‘application/json’);

// Handling the response
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
// Parsing JSON response
var jsonResponse = JSON.parse(xhr.responseText);
console.log(jsonResponse);
} else {
console.error(‘Request failed with status’, xhr.status);
}
};

// Sending the request
xhr.send();

  • Configuration Files

JSON का उपयोग आमतौर पर Web Application में Configuration Files के लिए किया जाता है। ये File Setting, Parameter या कोई अन्य Configuration Data Store कर सकती हैं।

Example:


{
“appName”: “MyWebApp”,
“apiEndpoint”: “https://api.example.com”,
“maxResults”: 10,
“theme”: “dark”
}

  • Data Storage and Serialization

Web Browser अक्सर Local Storage और Data Serialization के लिए JSON का use करते हैं। JSON के साथ Complex Data Structure को Store करना और Retrieve करना अधिक Manageable हो जाता है।

Example: Storing Data in Local Storage


// Storing data in local storage
var userData = {
“username”: “user123”,
“email”: “user@example.com”
};

localStorage.setItem(‘userData’, JSON.stringify(userData));

// Retrieving and parsing data from local storage
var storedData = JSON.parse(localStorage.getItem(‘userData’));
console.log(storedData);

JSON v/s XML

Data को Structuring करने के लिए JSON और XML दोनों Popular विकल्प हैं, लेकिन वे अपने Syntax, Readability और Uses में काफी Different हैं। JSON, एक Lightweight Data Interchange Format है, जिसने अपनी Simplicity और JavaScript के साथ Integration में आसानी करने के कारण प्रमुखता प्राप्त की है। तथा XML, अपनी Extensibility और Self-Descriptive Nature के साथ, Web Service और Configuration File सहित विभिन्न Domain में Popular रहा है।

Example:

एक Simple Web Application पर विचार करें| जहां User Information को Represent करने के लिए JSON का use किया जाता है।


<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>User Information</title>
</head>
<body>

<script>
// User data in JSON format
const userData = {
“name”: “Alice Johnson”,
“age”: 25,
“city”: “San Francisco”,
“isStudent”: false
};

// Display user information on the webpage
document.write(`<h2>User Information</h2>
<p><strong>Name:</strong> ${userData.name}</p>
<p><strong>Age:</strong> ${userData.age}</p>
<p><strong>City:</strong> ${userData.city}</p>
<p><strong>Student:</strong> ${userData.isStudent ? ‘Yes’ : ‘No’}</p>`);
</script>

</body>
</html>

Tags: No tags

Add a Comment

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