Theory
g Type कीजिए, Garba देखिए
FestConnect का final AJAX feature: एक live search box। Student g type करता है; दूसरा letter land होने से पहले, matching events पहले से नीचे appear हो रहे हैं।
सोचिए उन milliseconds में क्या होना ज़रूरी है: एक event fire होता है, एक request बनता है, travel करता है, एक server सोचता है, एक answer वापस आता है, list redraw होती है: और page कभी blink नहीं करता।
अब आप हर individual piece के owner हैं। यह lesson इन्हें choreograph करता है, क्योंकि "architecture के साथ AJAX की working explain कीजिए" इस paper का सबसे dependable long-answer question है।
Follow along
AJAX Lifecycle (Exam के 7 Steps)
- Page में एक Event Occur होता है User search box में type करता है (keyup), Refresh click करता है: कोई भी DOM event इसे start कर सकता है।
- JavaScript एक XMLHttpRequest Object बनाता है var xhr = new XMLHttpRequest(); runner duty के लिए report करता है (readyState 0)।
- open() Configure करता है, send() Dispatch करता है xhr.open("GET", "search.php?q=g", true); xhr.send(); request background में departs करता है।
- Server Request Process करता है Server-side script query पढ़ता है, अपने data से consult करता है (आज एक file, BCA503 में एक database), और answer prepare करता है।
- एक Response वापस आता है (JSON, XML या Text) छोटा: सिर्फ़ data, कभी पूरा page नहीं।
- States Advance होने पर onreadystatechange Fire होता है Handler states 2, 3 और आख़िर में 4 के through ring होता है।
- readyState 4 + status 200 पर, Script DOM Update करता है JSON.parse(xhr.responseText), फिर सिर्फ़ results list rewrite होती है: page का बाकी हिस्सा कभी notice नहीं करता।
Theory
Architecture: AJAX ने क्या Insert किया
Classic model एक 2-party conversation है: browser पूछता है, server पूरे नए page से reply करता है, browser पुराना वाला फेंक देता है। हर exchange एक पूरे rebuild की cost रखता है।
AJAX model browser में एक middle layer insert करता है: AJAX engine (XMLHttpRequest object plus आपका JavaScript)। अब user interface engine से बात करता है, engine server से बात करता है, और 2 conversations decoupled हैं:
- UI से engine: instant, local, कोई waiting नहीं
- Engine से server: छोटे data messages, background में
User अब कभी directly network face नहीं करता: वही decoupling architecture IS है।
At a glance
Classic बनाम AJAX Architecture
| Aspect | Classic Model | AJAX Model |
|---|---|---|
| Conversation | Browser directly server से | UI से AJAX engine से server |
| Server क्या Return करता है | एक complete HTML page | सिर्फ़ data (JSON/XML/text) |
| Wait के दौरान Page | Frozen, फिर replaced | Live; user काम करता रहता है |
| Update Scope | सब कुछ | सिर्फ़ affected DOM part |
| Traffic Per Action | Heavy | कुछ सौ bytes |
Practical
Live Search: एक Page में पूरी Unit
<!DOCTYPE html>
<html>
<head>
<script>
function liveSearch() {
var q = document.getElementById("box").value; // step 1: event data
var xhr = new XMLHttpRequest(); // step 2
xhr.onreadystatechange = function() { // step 6's bell
if (xhr.readyState == 4 && xhr.status == 200) {
var events = JSON.parse(xhr.responseText); // step 7 begins
var out = "";
for (var i = 0; i < events.length; i++) {
out += "<li>" + events[i].name + "</li>";
}
document.getElementById("results").innerHTML = out;
}
};
xhr.open("GET", "search.php?q=" + q, true); // step 3
xhr.send(); // ...and away
}
</script>
</head>
<body>
<input id="box" onkeyup="liveSearch()" placeholder="Search events">
<ul id="results"></ul>
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
AJAX architecture में, user interface और server के बीच क्या बैठता है?
- कुछ नहीं: AJAX UI को server से पहले से ज़्यादा directly connect करता है
- AJAX engine: JavaScript से driven XMLHttpRequest object
- एक दूसरा, hidden web page जो invisibly reloading करता है
- jQuery library, जो AJAX के लिए mandatory है
Show the answer
AJAX engine: JavaScript से driven XMLHttpRequest object
Architectural insight वह inserted middle layer है: AJAX engine (XMLHttpRequest + आपका script) user के experience को network की rhythm से decouple करता है: UI instant रहता है जबकि engine background में server से बात करता है। Option A exactly उल्टा है: classic direct model था। Option C पुराने iframe hacks describe करता है जिन्हें AJAX ने replace किया। Option D Unit 4 की recurring correction repeat करता है: jQuery सिर्फ़ इस machinery को wrap करता है; raw object ही engine है। Diagram question में, वह middle box DRAW और LABEL कीजिए: marks वहीं रहते हैं।
Think first
एक Keystroke Narrate कीजिए
Student live-search box में g type करता है। 7 steps और listing इस्तेमाल करते हुए, keystroke से visible results तक सब कुछ narrate कीजिए, हर property और method को उसके moment पर नाम देते हुए। इसे बोल कर कहिए, फिर tap कीजिए।
Show the answer
keyup fire होता है (1); liveSearch XMLHttpRequest बनाता है (2); open("GET", "search.php?q=g", true) इसे address करता है और send() dispatch करता है (3); server का script g match करने वाले events filter करता है और JSON return करता है (4, 5); onreadystatechange states के through ring होता है (6); readyState 4 status 200 के साथ, JSON.parse(responseText) एक array देता है, loop list items build करता है, और innerHTML सिर्फ़ #results rewrite करता है (7)। अगर आप बिना prompt यह narration दे सकें, आपके पास 10-mark answer है, worked example सहित।
Watch out
Long-Answer Pitfalls
Server Step Skip करना: story का middle (server process करता है, response वापस आता है) वह जगह है जहाँ weak answers vague हो जाते हैं; बताइए server WHAT करता है।
बिना Labels वाला Diagram: एक unlabeled middle box आधा earn करता है; इस पर लिखिए AJAX engine (XMLHttpRequest + JavaScript)।
Zero Server Load Claim करना: AJAX अक्सर MORE requests का मतलब रखता है (हर keystroke!), हर एक बहुत छोटा; saving per-exchange weight और user time की है, server work abolished की नहीं।
Theory
Unit 4 बंद होती है; एक Question बाकी है
FestConnect अब बिना एक भी reload के fetch, search और register करता है: Units 1 से 4 एक living page में assembled। पर नोटिस कीजिए किसे शुरू से चुपचाप assume किया गया है: server, वह box जो search.php पढ़ता है और answer देता है। आपने कभी एक नहीं बनाया। Unit 5 इसे Node.js से fix करती है, जहाँ वही JavaScript जो आपने पूरे semester लिखी है server side पर जाकर इन्हीं requests को answer करती है।
Summary
Key takeaways
- Lifecycle: event, XMLHttpRequest बनाइए, open + send, server process करता है, response आता है, onreadystatechange fire होता है, 4-and-200 पर DOM update कीजिए।
- AJAX engine (XMLHttpRequest + JS) UI और server के बीच बैठता है: architecture की inserted middle layer।
- UI-to-engine instant और local है; engine-to-server छोटे background data messages हैं।
- Servers pages नहीं, data return करते हैं; scripts सिर्फ़ affected DOM corner repaint करते हैं।
- AJAX page-sized reloads को कई छोटे requests से trade करता है: हर एक lighter, कम नहीं।
- Live-search listing एक page में पूरी unit है: इसे narrate करना सीखिए।
- Memory hook: event, engine, envelope, answer, repaint।