Theory
एक Number Update करने में आठ Seconds
FestConnect का registration page Seats left: 350 दिखाता है। उस ONE number को refresh करने के लिए, current design पूरे PAGE को reload करती है: hostel wifi पर, 8 seconds का white screen, और आधा typed form wipe हो जाता है।
इस बीच आपने ऐसे apps इस्तेमाल किए हैं जो यह कभी नहीं करते: एक cricket score tick over होता है, एक chat message land होता है, Gmail एक mail read mark करता है: कहीं कोई reload नहीं।
उस smoothness के पीछे की technique का एक नाम 2005 से है: AJAX, और यही यह unit है।
Theory
Shop Rebuild करना बनाम एक Runner भेजना
Synchronous web एक shop है जो हर बार जब आप एक item की price पूछते हैं खुद को DEMOLISH करके rebuild करती है: हर कोई बाहर खड़ा wait करता है।
Asynchronous web shop को खुला रखता है और answer के लिए godown पर एक runner भेजता है। Customers browse करते रहते हैं; जब runner वापस आता है, एक price tag चुपचाप update हो जाता है।
Browser में runner का एक नाम है: XMLHttpRequest object।
Theory
AJAX, Formally
AJAX (Asynchronous JavaScript And XML) background में server के साथ data exchange करने और बिना पूरे reload के page के हिस्से update करने की एक web development technique है।
यह language NAHI है और library NAHI है: यह उन चीज़ों को combine करता है जो आपके पास पहले से हैं:
- HTML/CSS: वह page जो update हो रहा है
- JavaScript + DOM: वह code जो पूछता है, और वह tree जिसे यह update करता है
- XMLHttpRequest: वह browser object जो requests carry करता है (अगले 2 lessons)
- XML या JSON: data का costume: नाम के X के बावजूद, आज usually यह JSON है
At a glance
Synchronous बनाम Asynchronous Web Application
| Aspect | Synchronous (Classic) | Asynchronous (AJAX) |
|---|---|---|
| Request | पूरा page, form submit या link से | Background, XMLHttpRequest से |
| Wait करते हुए | Browser frozen, white screen | User काम करता रहता है |
| Response | एक पूरा नया HTML page | सिर्फ़ data (JSON/XML/text) |
| Update | सब कुछ re-rendered | सिर्फ़ affected DOM part |
| Cost | Heavy: हर बार पूरा page | Light: कुछ सौ 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 IS क्या?
- Server communication के लिए एक programming language
- JavaScript, XMLHttpRequest और data formats combine करके बिना reload pages update करने की एक technique
- jQuery जैसी, एक CDN से loaded JavaScript library
- एक server technology जो HTML तेज़ी से generate करती है
Show the answer
JavaScript, XMLHttpRequest और data formats combine करके बिना reload pages update करने की एक technique
AJAX एक approach है: existing pieces (JS, DOM, XMLHttpRequest, XML या JSON) arranged इस तरह कि data background में move करे और सिर्फ़ page का हिस्सा update हो। Option A इस unit में सबसे marked ग़लत answer है: कुछ भी नया install या compile नहीं होता। Option C इसे उन libraries से confuse करता है जो सिर्फ़ technique को WRAP करती हैं (jQuery के पास AJAX helpers हैं)। Option D wire के ग़लत side पर point करता है: AJAX एक browser-side technique है; server हमेशा की तरह requests answer करता है: बस छोटे, ज़्यादा बार।
Think first
A असल में कहाँ रहता है?
A का मतलब Asynchronous है। Listing देखते हुए, identify कीजिए: कौन सा single argument request को asynchronous बनाता है, और user-visible experience इसका क्या owe करता है? Tap करने से पहले jQuery effects lesson याद कीजिए।
Show the answer
xhr.open("GET", "seats.json", true) में true। Asynchronous का मतलब है send() तुरंत return करता है और response LATER आता है, onreadystatechange handler के ज़रिए announced: इस बीच user type करता है, scroll करता है, click करता है: कुछ freeze नहीं होता, और आधा भरा हुआ name field survive करता है। यह exactly वही async model है जिससे आप fadeOut और इसके callback से मिले थे: काम शुरू कीजिए, code continue करता है, completion एक function में handle होता है। Effects background में animate होते थे; AJAX उसमें fetch करता है: एक mental model, अब data carry करते हुए।
Watch out
Name-Induced Confusions
X Mislead करता है: XML नाम में historical reasons से है; modern AJAX overwhelmingly JSON carry करता है (यही वजह है Unit 3 पहले आई)। यह awareness लिखिए और mark कमाइए।
Asynchronous का मतलब Instant नहीं है: network अभी भी अपना time लेता है; async का मतलब है इसके दौरान user HELD HOSTAGE नहीं है।
AJAX jQuery नहीं है: jQuery convenient wrappers offer करती है, पर यह syllabus raw XMLHttpRequest examine करता है, और raw object वही है जो अगले 2 lessons dissect करते हैं।
Theory
Pipeline अपना Loop बंद करता है
Listing की handler line line by line देखिए: responseText आता है (यह unit), JSON.parse इसे decode करता है (Unit 3), DOM update होता है (Units 2 और BCA305-01): पहले की हर unit इस एक pipe का एक stage है। जो बाकी है वह runner खुद को master करना है: इसकी 4 properties (famous readyState 0 से 4 सहित) अगला lesson, इसके 3 methods इसके बाद, और unit बंद करने के लिए पूरा architecture diagram।
Summary
Key takeaways
- AJAX = Asynchronous JavaScript And XML: एक technique, language या library नहीं।
- Ingredients: HTML/CSS + JavaScript/DOM + XMLHttpRequest + एक data format (historically XML, आज JSON)।
- Synchronous apps पूरे pages freeze और reload करते हैं; asynchronous apps background में fetch करते हैं और हिस्से update करते हैं।
- Request चलते हुए user काम करता रहता है: यही A है।
- XMLHttpRequest object इन background requests के लिए browser का runner है।
- Benefits: कोई reload नहीं, कोई flicker नहीं, preserved form state, कम bandwidth, app-like feel।
- Memory hook: एक runner भेजिए, shop rebuild मत कीजिए।