JS AJAX रिक्वेस्ट
In this page:
xhr.open("GET", url, true);
xhr.send();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);Query Parameters से Data पास करना
एक GET request के लिए, data आमतौर पर URL के ? के बाद जोड़े गए query parameters के रूप में पास किया जाता है -- जैसे /search?term=widgets&limit=10 -- जिसे server आती हुई request के URL से पढ़ता और parse करता है।
उदाहरण: Passing Data via Query Parameters
// Declare the constant `term`, set to "widgets"
// Declare the constant `term`, set to "widgets"
const term = "widgets";
// Declare the constant `limit`, set to `10`
// Declare the constant `limit`, set to `10`
const limit = 10;
// Define the method `fetch` taking ``search.php?term`
fetch(`search.php?term=${term}&limit=${limit}`)
// On success, run this with the resolved value as `r`
.then(r => r.json())
// On success, run this with the resolved value as `data`
.then(data => console.log(data));एक JSON Request Body भेजना
POST, PUT, या PATCH requests के लिए, data आमतौर पर request body में JSON के रूप में भेजा जाता है -- JSON.stringify() किसी JavaScript object को उस JSON string में बदल देता है, और Content-Type: application/json header server को बताता है कि उसे मिली body को सही तरीके से कैसे parse करना है।
उदाहरण: Sending a JSON Request Body
// Send a POST request with a JSON body to save.php
fetch("save.php", {
method: "POST",
headers: { "Content-Type": "application/json" }, // tell the server we're sending JSON
body: JSON.stringify({ name: "Sam" }), // convert the JS object into a JSON string
}).then(r => r.json()).then(data => console.log(data)); // parse and log the server's JSON replyForm Data भेजना
FormData एक built-in object है जो form-style data को represent करता है, file uploads सहित -- इसे किसी असली <form> element से बनाना (या manually fields जोड़ना) और इसे सीधे fetch body के रूप में पास करना अपने आप सही multipart/form-data encoding के साथ भेज देता है, किसी manual Content-Type header की ज़रूरत नहीं।
उदाहरण: Sending Form Data
// Declare the constant `formData` as a new `FormData` instance
// Declare the constant `formData` as a new `FormData` instance
const formData = new FormData();
// Call `formData.append("name", "Sam")`
// Call `formData.append("name", "Sam")`
formData.append("name", "Sam");
// Define the method `fetch` taking `"upload.php"`, `{ method: "POST", body: formData }`
// Define the method `fetch` taking `"upload.php"`, `{ method: "POST", body: formData }`
fetch("upload.php", { method: "POST", body: formData })
// On success, run this with the resolved value as `r`
// On success, run this with the resolved value as `r`
.then(r => r.json())
// On success, run this with the resolved value as `data`
// On success, run this with the resolved value as `data`
.then(data => console.log(data));Custom Request Headers सेट करना
headers option (fetch में) या .setRequestHeader() (XMLHttpRequest में) किसी request में अतिरिक्त metadata जोड़ता है -- सबसे आम तौर पर एक API token ले जाने वाला Authorization header, जो server को यह verify करने देता है कि request किसी authenticated user से आई।
उदाहरण: Setting Custom Request Headers
// Send a GET request to data.php with a Bearer auth token
fetch("data.php", {
headers: { "Authorization": "Bearer sample-token" }, // proves who is making the request
}).then(r => r.json()).then(data => console.log(data)); // parse and log the JSON replyएक HTTP Method चुनना
method option किसी request के लिए HTTP verb बताता है -- data पढ़ने के लिए GET (default), कुछ नया बनाने के लिए POST, update करने के लिए PUT या PATCH, और हटाने के लिए DELETE -- method को operation के असली मतलब से मिलाना servers और किसी caching layers को सही व्यवहार करने में मदद करता है।
उदाहरण: Choosing an HTTP Method
fetch("delete.php", { method: "DELETE" }).then(r => console.log(r.status));
fetch("update.php", { method: "PUT" }).then(r => console.log(r.status));- भेजे जा रहे data के असली format से match करने के लिए Content-Type header set करना भूल जाना, जिससे server request body को गलत समझता है या reject कर देता है।
- query parameters को गलत तरीके से URL-encode करना (या बिल्कुल न करना), जो किसी value में & या spaces जैसे special characters होने पर URL को तोड़ सकता है।
- किसी GET request पर एक request body भेजना, जो HTTP convention के खिलाफ है और अक्सर servers और कुछ HTTP client implementations द्वारा नजरअंदाज या reject कर दिया जाता है।
- GET requests data को URL query parameters के ज़रिए pass करते हैं; POST/PUT requests आमतौर पर data को request body में pass करते हैं।
- Content-Type header server को बताता है कि request body के format (JSON, form-encoded, आदि) को कैसे समझा जाए।
- encodeURIComponent() किसी value को URL में डालने से पहले उसके special characters को safely escape करता है।
headers, query parameters, और body के साथ requests configure करना fetch और XMLHttpRequest दोनों के ज़रिए हर modern browser में समान रूप से supported है।
Chapter Quiz — Complete all 26 topics to unlock
0/26 topics done
Complete these topics first:
- JS JSON
- JS Regular Expressions
- JS Fetch API
- JS LocalStorage and SessionStorage
- JS Cookies
- JS setTimeout and setInterval
- JS Event Loop
- JS Web Workers
- JS Service Workers
- JS AJAX
- JS AJAX Intro
- JS AJAX XMLHttp
- JS AJAX Request
- JS AJAX Response
- JS AJAX XML
- JS AJAX PHP
- JS AJAX Database
- JS JSONP
- JS RegExp Flags
- JS RegExp Classes
- JS RegExp Metachars
- JS RegExp Assertions
- JS RegExp Groups
- JS RegExp Quantifiers
- JS JSON HTML
- JS JSON vs XML