Theory
ત્રણ verbs જે તમે faith પર type કર્યા છે
AJAX skeleton જે તમે last lesson memorise કર્યું તેમાં 2 method calls છે જેના તમને હજુ formally introduce નથી કરવામાં આવ્યા:
xhr.open("GET", "seats.json", true);
xhr.send();
અને FestConnect નું next feature ત્રીજું માંગે છે: server પર REGISTRATION (name + event) ને submit કરવું reload વગર, જે turn out થાય છે કે setRequestHeader પણ require કરે છે.
ત્રણ methods, એક postal metaphor, અને AJAX ની આખી request side તમારી છે.
Theory
envelope, notes, postbox
open() envelope ને address કરે છે: કયો kind of delivery (GET અથવા POST), કયા address પર (URL), અને કઈ service દ્વારા (asynchronous અથવા not). Envelope ને address કરવું કંઈ post નથી કરતું.
setRequestHeader() handling notes ને envelope પર writes કરે છે: "contents: form data". notes addressing પછી જાય છે, posting પહેલાં.
send() તેને postbox માં drop કરે છે. only now કંઈ 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 ને prepares કરે છે અને readyState ને 1 પર move કરે છે: તે કંઈ transmit નથી કરતું. તમે open કરી શકો છો અને ક્યારેય send નથી કરવું; કંઈ browser થી left નથી થયું.
GET માટે, data URL પર itself query string તરીકે ride કરે છે: search.php?event=garba&day=2.
Theory
send() અને વચ્ચેનો header
send() transmit કરે છે:
xhr.send(): કોઈ argument નહીં: GET form; કોઈ પણ data already 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 પર અથવા already posted પર લખી શકાતા નથી.
Practical
Registration reload વગર (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 actually data ને server તરફ travel કરાવે છે?
- new XMLHttpRequest(): object ને create કરવું connection ને start કરે છે
- xhr.open(...): તે server connection ને establishes કરે છે
- xhr.send(...): open ફક્ત configure કરે છે; send transmit કરે છે
- xhr.onreadystatechange = ...: handler ને assign કરવું request ને trigger કરે છે
Show the answer
xhr.send(...): open ફક્ત configure કરે છે; send transmit કરે છે
send() એ postbox છે: તેના પહેલાં કંઈ browser થી leave નથી થતું. open() એ deliberately tempting distractor છે: તે request ને ADDRESSES કરે છે (અને readyState 1 પર tick થાય છે, જેનો label "server connection established" moment ને oversell કરે છે), પણ તમે open કરી શકો છો અને zero network traffic સાથે walk away કરી શકો છો. object ને create કરવું એ runner ને allocate કરે છે જેણે move નથી કર્યું, અને handler ને assign કરવું merely 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 કરવા માંગે છે. દરેક માટે GET અથવા POST ને choose કરો, deciding reason સાથે, tap કરતા પહેલાં.
Show the answer
(a) GET: pure read, submit કરવા માટે કોઈ data નહીં; cacheable એ bonus છે. (b) POST: તે server state ને CHANGES કરે છે અને personal data ને carry કરે છે, જે URL માં sit નથી કરવું જોઈએ (URLs logs અને history માં land થાય છે; GET પણ length-limited છે). (c) GET: query-string requests bookmarkable અને shareable છે precisely કારણ કે data IS URL છે: search.php?event=garba. compact rule: reading = GET, submitting અથવા changing = POST, અને કંઈ પણ sensitive ક્યારેય URL પર travel નથી કરતું.
Watch out
3 method traps
open() પહેલાં setRequestHeader: throws: envelope હજુ exist નથી કરતું. order હંમેશા open, header, send છે.
Content-Type header વગર POST: server body ને receive કરે છે જેને decode નથી કરી શકતું: registrations silently empty arrive થાય છે: આ unit નો most common real-world slip.
GET માટે send() માં Data: GET નું send() argument ignore થાય છે; GET data URL ના query string માં belongs કરે છે. બંને conventions ને mix કરવું કંઈ nowhere useful send નથી કરતું.
Theory
object complete છે
તમે હવે entire XMLHttpRequest ને hold કરો છો: 4 properties જે receive કરે છે (bell, counter, 2 pockets, verdict) અને 3 methods જે transmit કરે છે (address, label, post). દરેક AJAX exchange on earth એ આ 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 (URL ના query string માં data), POST માટે send(data) (body માં data).
- 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.
- કંઈ પણ sensitive ક્યારેય URL માં travel નથી કરતું.
- Memory hook: address it, label it, post it.