Theory
એક number ને update કરવા આઠ સેકન્ડ
FestConnect ની registration page બતાવે છે Seats left: 350. તે ONE number ને refresh કરવા માટે, current design આખા PAGE ને reload કરે છે: hostel wifi પર, 8 seconds ની white screen, અને half-typed form wipe થઈ જાય છે.
ત્યારબાદ તમે એવા apps ને use કર્યા છે જે આ ક્યારેય કરતા નથી: cricket score ticks over, chat message lands, Gmail mail ને read mark કરે છે: ક્યાંય reload નથી.
તે smoothness ની પાછળની technique નું નામ છે 2005 થી: AJAX, અને તે આ unit છે.
Theory
shop ને rebuild કરવું vs runner ને send કરવો
synchronous web એ shop છે જે DEMOLISHES અને rebuild કરે છે જ્યારે તમે એક item ની price પૂછો છો: બધા બહાર ઉભા રહીને wait કરે છે.
asynchronous web shop ને open રાખે છે અને answer માટે runner ને godown માં send કરે છે. Customers browse કરતા રહે છે; જ્યારે runner returns, એક price tag quietly update થાય છે.
runner નું browser માં નામ છે: XMLHttpRequest object.
Theory
AJAX, ઔપચારિક રીતે
AJAX (Asynchronous JavaScript And XML) એ web development technique છે server સાથે background માં data ને exchange કરવા માટે અને page ના parts ને full reload વગર update કરવા માટે.
તે language નથી અને library નથી: તે તમે already hold કરો છો તે things ને combine કરે છે:
- HTML/CSS: page જે update થઈ રહ્યું છે
- JavaScript + DOM: code જે asks કરે છે, અને tree જે તે updates કરે છે
- XMLHttpRequest: browser object જે requests ને carries કરે છે (next 2 lessons)
- XML or JSON: data નો costume: name ના X હોવા છતાં, today તે usually JSON છે
At a glance
Synchronous vs asynchronous web application
| Aspect | Synchronous (classic) | Asynchronous (AJAX) |
|---|---|---|
| Request | આખું page, form submit અથવા link દ્વારા | Background, XMLHttpRequest દ્વારા |
| While waiting | Browser frozen, white screen | User work કરતો રહે છે |
| Response | આખું new HTML page | ફક્ત data (JSON/XML/text) |
| Update | બધું re-rendered | ફક્ત affected DOM part |
| Cost | Heavy: દરેક time full page | Light: થોડા hundred bytes |
| Feel | Click, wait, flicker | Instant, app-like |
Practical
seat counter live થાય છે (complete page)
<!DOCTYPE html>
<html>
<head>
<script>
function refreshSeats() {
var xhr = new XMLHttpRequest(); // the runner
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById("seats").innerHTML = data.seats;
}
};
xhr.open("GET", "seats.json", true); // true = asynchronous
xhr.send(); // runner departs
} // page never reloads
</script>
</head>
<body>
<p>Seats left: <span id="seats">350</span></p>
<button onclick="refreshSeats()">Refresh count</button>
<input placeholder="Your name (survives the refresh!)">
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
AJAX exactly શું છે?
- server communication માટે programming language
- JavaScript, XMLHttpRequest અને data formats ને combine કરતી technique જે pages ને reload વગર update કરે છે
- JavaScript library, jQuery જેવી, CDN થી loaded
- server technology જે HTML ને faster generate કરે છે
Show the answer
JavaScript, XMLHttpRequest અને data formats ને combine કરતી technique જે pages ને reload વગર update કરે છે
AJAX એ approach છે: existing pieces (JS, DOM, XMLHttpRequest, XML or JSON) arranged so data background માં moves કરે છે અને page નો ફક્ત part update થાય છે. Option A એ આ unit માં most-marked wrong answer છે: કંઈ new install અથવા compile નથી થતું. Option C તેને libraries સાથે confuse કરે છે જે merely WRAP કરે છે technique ને (jQuery ને AJAX helpers છે). Option D wire ની wrong side પર points કરે છે: AJAX એ browser-side technique છે; server requests ને answer કરે છે જેમ હંમેશા: smaller ones, more often.
Think first
A actually ક્યાં lives કરે છે?
A એ Asynchronous માટે stands કરે છે. listing ને જોઈને, identify કરો: કયો single argument request ને asynchronous બનાવે છે, અને user-visible experience તેને owe કરે છે શું? jQuery effects lesson ને recall કરો tap કરતા પહેલાં.
Show the answer
true એ xhr.open("GET", "seats.json", true) માં. Asynchronous એટલે send() immediately returns થાય છે અને response LATER arrive થાય છે, onreadystatechange handler દ્વારા announced: meantime user types કરે છે, scrolls કરે છે, clicks કરે છે: કંઈ freeze નથી થતું, અને half-filled name field survive કરે છે. આ precisely async model છે જે તમે fadeOut અને તેના callback સાથે met હતા: work ને start કરો, code ને continue કરો, completion ને function માં handle કરો. Effects background માં animate થયા; AJAX તેમાં fetch કરે છે: એક mental model, હવે data ને carrying.
Watch out
Name-induced confusions
X misleads કરે છે: XML name માં historical reasons માટે છે; modern AJAX overwhelmingly JSON ને carries કરે છે (એટલે Unit 3 first આવ્યું). તે awareness ને write કરો અને mark gain કરો.
Asynchronous એટલે instant નથી: network હજુ તેનો time લે છે; async એટલે user HELD HOSTAGE નથી થતો જ્યારે તે does.
AJAX એ jQuery નથી: jQuery convenient wrappers ને offer કરે છે, પણ આ syllabus raw XMLHttpRequest ને examine કરે છે, અને raw object એ શું next 2 lessons dissect કરે છે.
Theory
pipeline તેનો loop closes કરે છે
listing ના handler ને line by line look કરો: responseText arrive થાય છે (આ unit), JSON.parse તેને decodes કરે છે (Unit 3), DOM updates થાય છે (Units 2 અને BCA305-01): દરેક earlier unit આ એક pipe નો stage છે. શું બાકી રહે છે તે runner ને itself master કરવાનું છે: તેના 4 properties (famous readyState 0 to 4 સહિત) next lesson, તેના 3 methods after that, અને unit ને close કરવા full architecture diagram.
Summary
Key takeaways
- AJAX = Asynchronous JavaScript And XML: technique, language અથવા library નહીં.
- Ingredients: HTML/CSS + JavaScript/DOM + XMLHttpRequest + data format (XML historically, JSON today).
- Synchronous apps freeze અને whole pages ને reload કરે છે; asynchronous apps background માં fetch અને parts ને update કરે છે.
- User work કરતો રહે છે જ્યારે request runs કરે છે: એ A છે.
- XMLHttpRequest object એ browser નો runner છે આ background requests માટે.
- Benefits: no reload, no flicker, preserved form state, less bandwidth, app-like feel.
- Memory hook: send a runner, shop ને rebuild ન કરો.