Handling AJAX Requests: JSON Response, CORS, and Content-Type
Handling AJAX Requests: JSON Response, CORS, and Content-Type
Introduction to AJAX
अगर तुमने web development शुरू की है तो "AJAX" एक ऐसा concept है जिसे समझना बहुत ज़रूरी है। AJAX का मतलब है Asynchronous JavaScript and XML। इसका use तब किया जाता है जब हम बिना पूरी web page को reload किए server से data fetch या send करना चाहते हैं।
मतलब simple शब्दों में — AJAX user experience को fast और smooth बनाता है, क्योंकि page reload नहीं होता, सिर्फ़ data update होता है। आज के modern web apps जैसे Gmail, Facebook, और Twitter में AJAX का बहुत use होता है।
How AJAX Works
AJAX basically JavaScript और browser के XMLHttpRequest या fetch() API का use करता है ताकि client और server के बीच asynchronous communication हो सके।
- User browser में कोई action करता है (जैसे form submit करना या button click करना)।
- JavaScript उस action को पकड़कर AJAX request बनाता है।
- यह request server तक जाती है और server से response वापस आता है।
- JavaScript उस response को process करके web page पर update कर देता है, बिना पूरे page को reload किए।
Example of Basic AJAX Request
let xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
ऊपर के example में, JavaScript ने server से “data.json” file को asynchronously fetch किया और उसका result console में दिखाया।
Understanding JSON Response
AJAX में सबसे commonly इस्तेमाल होने वाला data format है JSON (JavaScript Object Notation)। JSON lightweight, readable और machine-friendly format है।
Server जब client को data भेजता है, तो वह JSON format में भेज सकता है ताकि JavaScript उसे आसानी से read कर सके।
Example of JSON Data
{
"studentName": "Amit Kumar",
"course": "MCA",
"marks": 88
}
यह JSON format बहुत readable है और इसे JavaScript में JSON.parse() से object में convert किया जा सकता है।
AJAX Request with JSON Response Example
fetch("https://api.example.com/students")
.then(response => response.json())
.then(data => {
console.log(data);
});
यह modern fetch API का example है जहाँ server से JSON response लिया जा रहा है।
Content-Type Header in AJAX
जब भी हम AJAX request या response भेजते हैं, तो Content-Type header बहुत important होता है। यह browser और server दोनों को बताता है कि data किस format में है।
Common Content-Type Headers
| Content-Type | Description |
|---|---|
| application/json | Data JSON format में है। |
| text/html | Data HTML format में है। |
| application/x-www-form-urlencoded | Form data को URL encoded format में भेजा जा रहा है। |
| multipart/form-data | File upload के लिए use किया जाता है। |
Example: Sending JSON Data to Server
fetch("/api/submit", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name: "Ravi", age: 21 })
});
यहाँ हमने JSON data भेजा है, इसलिए Content-Type “application/json” रखा गया है। Server को अब पता है कि incoming data JSON format में है।
Introduction to CORS (Cross-Origin Resource Sharing)
अब बात करते हैं AJAX का एक बहुत common issue — CORS की। जब browser एक domain से दूसरे domain पर request भेजता है, तो security reasons की वजह से browser इसे by default block कर देता है।
इसको ही कहते हैं Cross-Origin Request। अगर तुम्हारा frontend और backend अलग server पर हैं, तो तुम्हें CORS policy handle करनी पड़ती है।
What is Same-Origin Policy?
Same-origin policy एक browser security mechanism है जो कहता है कि JavaScript केवल उसी domain के data तक access कर सकती है जहाँ से वह loaded हुई है।
Example के लिए, अगर तुम्हारा site है example.com और तुमने request भेजी api.otherdomain.com पर, तो browser इसे block कर देगा जब तक कि server explicitly permission न दे।
How CORS Works?
Server अपने response में एक special header भेजता है — Access-Control-Allow-Origin। यह header बताता है कि कौन-कौन से origins को इस server तक access की permission है।
Example: CORS Response Headers
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
यहाँ “*” का मतलब है कि सभी domains को permission है। अगर तुम specific domain देना चाहो तो ऐसे कर सकते हो:
Access-Control-Allow-Origin: https://myfrontend.com
इससे सिर्फ़ https://myfrontend.com domain को ही access मिलेगा।
AJAX Request with CORS Example
fetch("https://api.example.com/data", {
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("CORS Error:", error));
अगर server ने CORS headers allow नहीं किए हैं, तो यह request fail हो जाएगी और console में error दिखेगा।
Preflight Request in CORS
जब कोई AJAX request special headers या methods (जैसे PUT, DELETE, या custom header) use करती है, तो browser पहले एक OPTIONS request भेजता है — इसे कहते हैं Preflight Request।
इसका purpose होता है यह check करना कि server actual request को allow करता है या नहीं।
Example of Preflight Request Headers
| Header | Purpose |
|---|---|
| Access-Control-Allow-Methods | कौन-कौन से methods allowed हैं। |
| Access-Control-Allow-Headers | कौन से headers allowed हैं। |
| Access-Control-Max-Age | Preflight cache कितनी देर तक valid रहेगा। |
Real-World Use of AJAX with JSON and CORS
मान लो तुम एक weather app बना रहे हो जो OpenWeather API से data fetch करता है। यह API किसी दूसरे domain पर hosted है, इसलिए तुम्हें CORS की जरूरत होगी।
fetch("https://api.openweathermap.org/data/2.5/weather?q=Delhi&appid=your_api_key")
.then(response => response.json())
.then(data => {
document.getElementById("temp").innerHTML = data.main.temp + "°C";
})
.catch(err => console.log("Error:", err));
यह code weather data को fetch करके web page पर दिखाता है — बिना page reload किए।
Common Errors and Their Solutions
- CORS Error: “Access to fetch has been blocked by CORS policy” — इसका मतलब है server ने “Access-Control-Allow-Origin” header नहीं भेजा।
- JSON Parsing Error: जब response valid JSON format में नहीं होता।
- Network Error: जब server down हो या URL गलत हो।
Quick Fix for CORS (Development Time)
// For Node.js (Express)
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type");
next();
});
यह simple middleware development time पर use किया जा सकता है ताकि AJAX requests आसानी से काम करें।
Best Practices for AJAX, JSON, and CORS
- Always use HTTPS ताकि data secure रहे।
- Response को हमेशा Content-Type header के साथ भेजो।
- CORS configuration में केवल trusted domains allow करो।
- Error handling हमेशा include करो ताकि debugging आसान हो।
- Data भेजने से पहले उसे JSON.stringify() करो।
- AJAX requests को asynchronous रखो ताकि UI block न हो।
Summary
तो अब तुमने सीखा कि AJAX कैसे काम करता है, JSON response क्या होता है, Content-Type का क्या role है और CORS क्यों जरूरी है।
इन concepts को अच्छे से समझने के बाद तुम आसानी से dynamic, fast और secure web applications बना पाओगे जो बिना page reload किए smart तरीके से data handle करें।
