Theory
तीन Verbs जो आप Faith पर Type कर रहे थे
पिछले lesson में आपने जो AJAX skeleton memorise किया उसमें 2 method calls हैं जिनसे आप अभी formally introduce नहीं हुए:
xhr.open("GET", "seats.json", true);
xhr.send();
और FestConnect के अगले feature को एक तीसरा चाहिए: बिना reload server को एक REGISTRATION (name + event) submit करना, जिसके लिए setRequestHeader भी चाहिए।
तीन methods, एक postal metaphor, और AJAX का पूरा request side आपका है।
Theory
Envelope, Notes, Postbox
open() envelope address करता है: किस तरह की delivery (GET या POST), किस address पर (URL), और किस service से (asynchronous या नहीं)। एक envelope को address करना कुछ post नहीं करता।
setRequestHeader() envelope पर handling notes लिखता है: "contents: form data"। Notes address करने के बाद, post करने से पहले जाते हैं।
send() इसे postbox में drop करता है। सिर्फ़ अब कुछ travel करता है।
Theory
open(method, url, async)
xhr.open("GET", "seats.json", true);
- method: fetch के लिए "GET", submit के लिए "POST"
- url: target file या script
- async: asynchronous के लिए
true(AJAX का A; effectively हमेशा true)
Crucial understanding: open() request prepare करता है और readyState को 1 पर move करता है: यह कुछ भी transmit नहीं करता। आप open कर सकते हैं और कभी send न करें; browser से कुछ भी नहीं गया होगा।
GET के लिए, data URL में खुद एक query string की तरह सवार होता है: search.php?event=garba&day=2।
Theory
send() और बीच का Header
send() transmit करता है:
xhr.send(): कोई argument नहीं: GET form; कोई भी data पहले से URL में हैxhr.send("name=Riya&event=garba"): POST form: data request body में travel करता है
पर एक POSTed body को एक label चाहिए जिसे server decode कर सके, और यही है setRequestHeader(name, value):
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Placement law: open() के बाद, send() से पहले: headers एक unaddressed envelope पर नहीं लिखे जा सकते, न ही किसी पर जो पहले से posted हो।
Practical
बिना Reload Registration (Complete Page)
<!DOCTYPE html>
<html>
<head>
<script>
function registerMe() {
var name = document.getElementById("name").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("msg").innerHTML = xhr.responseText;
}
};
xhr.open("POST", "register.php", true); // 1: address it
xhr.setRequestHeader("Content-Type", // 2: label it
"application/x-www-form-urlencoded");
xhr.send("name=" + name + "&event=garba"); // 3: post it
}
</script>
</head>
<body>
<input id="name" placeholder="Your name">
<button onclick="registerMe()">Register for Garba Night</button>
<p id="msg"></p>
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
AJAX skeleton में, कौन सी line असल में data को server तक travel कराती है?
- new XMLHttpRequest(): object बनाना connection start करता है
- xhr.open(...): यह server connection establish करता है
- xhr.send(...): open सिर्फ़ configure करता है; send transmit करता है
- xhr.onreadystatechange = ...: handler assign करना request trigger करता है
Show the answer
xhr.send(...): open सिर्फ़ configure करता है; send transmit करता है
send() postbox है: इससे पहले browser से कुछ नहीं जाता। open() deliberately tempting distractor है: यह request को ADDRESS करता है (और readyState सच में 1 पर tick करता है, जिसका label "server connection established" moment को oversell करता है), पर आप open करके zero network traffic के साथ चले जा सकते हैं। Object बनाना एक runner allocate करता है जो move नहीं हुआ, और handler assign करना बस doorbell install करता है। Exam one-liner: open configure करता है, send communicate करता है।
Think first
इन 3 के लिए GET या POST?
तीन FestConnect jobs: (a) current seat count fetch कीजिए, (b) एक student के name और phone के साथ registration submit कीजिए, (c) एक search जिसका result page students bookmark करना चाहते हैं। Tap करने से पहले हर एक के लिए GET या POST चुनिए, deciding reason के साथ।
Show the answer
(a) GET: एक pure read, submit करने के लिए कोई data नहीं; cacheable एक bonus है। (b) POST: यह server state CHANGE करता है और personal data carry करता है, जिसे URL में नहीं बैठना चाहिए (URLs logs और history में land होते हैं; GET भी length-limited है)। (c) GET: query-string requests bookmarkable और shareable हैं exactly इसलिए क्योंकि data ही URL HAI: search.php?event=garba। Compact rule: reading = GET, submitting या changing = POST, और कुछ भी sensitive कभी URL पर नहीं travel करता।
Watch out
3 Method Traps
open() से पहले setRequestHeader: throw करता है: envelope अभी exist नहीं करता। Order हमेशा open, header, send है।
Content-Type Header के बिना POST: server को एक ऐसी body मिलती है जिसे यह decode नहीं कर सकता: registrations चुपचाप empty आते हैं: इस unit का सबसे common real-world slip।
GET के लिए send() में Data: GET का send() argument ignore हो जाता है; GET data URL के query string में belong करता है। 2 conventions mix करना कहीं भी कुछ useful नहीं भेजता।
Theory
Object Complete है
अब आपके पास पूरा XMLHttpRequest है: 4 properties जो receive करती हैं (bell, counter, 2 pockets, verdict) और 3 methods जो transmit करती हैं (address, label, post)। धरती पर हर AJAX exchange यही 7 names choreographed हैं। Unit का finale zoom out करके इस choreography को एक diagram की तरह देखता है: पूरा request lifecycle और browser-vs-server architecture, जो इस paper का भी favourite long-answer question है।
Summary
Key takeaways
- open(method, url, async) configure करता है: GET/POST, target, asynchronous के लिए true: यह कुछ transmit नहीं करता।
- send() transmit करता है: GET के लिए bare (data URL query string में), POST के लिए send(data) (data body में)।
- setRequestHeader(name, value) open के बाद, send से पहले जाता है; POST form data को Content-Type: application/x-www-form-urlencoded चाहिए।
- GET: reads, bookmarkable, visible और length-limited URL data; POST: submissions, body-carried, changes और sensitive data के लिए।
- Order हमेशा: open, setRequestHeader, send।
- URL में कभी कुछ sensitive travel नहीं करता।
- Memory hook: इसे address कीजिए, इसे label कीजिए, इसे post कीजिए।