Working of AJAX and its architecture

📖 Theory

g type કરો, Garba જુઓ

FestConnect નું final AJAX feature: live search box. student g type કરે છે; બીજો letter land થાય તે પહેલાં, matching events already નીચે appear થઈ રહ્યા છે.

think કરો કે શું those milliseconds માં happen થવું જોઈએ: event fires થાય છે, request forms થાય છે, travels કરે છે, server thinks કરે છે, answer returns થાય છે, list redraw થાય છે: અને page ક્યારેય blink નથી કરતું.

તમે દરેક individual piece ને now own કરો છો. આ lesson તેમને choreographs કરે છે, કારણ કે "explain the working of AJAX with architecture" એ આ paper નો most dependable long-answer question છે.

🪜 Follow along

AJAX lifecycle (exam ના 7 steps)

1. page માં event occur થાય છે user search box માં types કરે છે (keyup), Refresh પર clicks કરે છે: કોઈ પણ DOM event તેને start કરી શકે છે.
2. JavaScript XMLHttpRequest object ને create કરે છે var xhr = new XMLHttpRequest(); runner duty માટે reports થાય છે (readyState 0).
3. open() configure કરે છે, send() dispatch કરે છે xhr.open("GET", "search.php?q=g", true); xhr.send(); request background માં departs થાય છે.
4. server request ને process કરે છે server-side script query ને reads કરે છે, તેના data ને consult કરે છે (આજે file, BCA503 માં database), અને answer ને prepare કરે છે.
5. response returns થાય છે (JSON, XML અથવા text) Small: ફક્ત data, ક્યારેય આખું page નહીં.
6. onreadystatechange fires થાય છે જેમ states advance થાય છે handler ને states 2, 3 અને finally 4 માં rung થાય છે.
7. readyState 4 + status 200 પર, script DOM ને update કરે છે JSON.parse(xhr.responseText), પછી ફક્ત results list ને rewrite કરો: page નું બાકીનું ક્યારેય notice નથી કરતું.

📖 Theory

architecture: શું AJAX inserted કર્યું

classic model એ 2-party conversation છે: browser asks કરે છે, server replies કરે છે આખા new page સાથે, browser જૂના one ને throw away કરે છે. દરેક exchange એ full rebuild ને cost કરે છે.

AJAX model browser માં middle layer ને insert કરે છે: AJAX engine (XMLHttpRequest object plus તમારું JavaScript). હવે user interface engine સાથે talks કરે છે, engine server સાથે talks કરે છે, અને 2 conversations decoupled છે:

• UI to engine: instant, local, કોઈ waiting નહીં
• engine to server: small data messages, background માં

user ક્યારેય network ને directly face નથી કરતો ફરીથી: તે decoupling IS architecture.

📊 At a glance

Classic vs AJAX architecture

⌨️ Practical

Live search: આખો unit એક page માં

<!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 નો 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 ની વચ્ચે sits કરે છે?

1. કંઈ નહીં: AJAX UI ને server સાથે પહેલાં કરતાં more directly connect કરે છે
2. AJAX engine: XMLHttpRequest object જે JavaScript દ્વારા driven છે
3. બીજું, hidden web page જે invisibly reloading કરે છે
4. jQuery library, જે AJAX માટે mandatory છે

💭 Think first

એક keystroke ને Narrate કરો

student live-search box માં g type કરે છે. 7 steps અને listing ને use કરીને, keystroke થી visible results સુધી everything ને narrate કરો, દરેક property અને method ને તેના moment પર name કરો. તેને aloud કહો, પછી tap.

⚠️ Watch out

Long-answer pitfalls

server step ને Skipping કરવું: story નો middle (server processes, response returns) જ્યાં weak answers vague થાય છે; name કરો કે server શું DOES.

labels વગરનું Diagram: unlabeled middle box અડધા earns કરે છે; તેના પર AJAX engine (XMLHttpRequest + JavaScript) લખો.

zero server load ને Claiming કરવું: AJAX ઘણીવાર MORE requests ને means કરે છે (દરેક keystroke!), દરેક far smaller; saving એ per-exchange weight અને user time છે, server work abolished નહીં.

📖 Theory

Unit 4 closes; એક question બાકી છે

FestConnect હવે fetch કરે છે, searches કરે છે અને registers કરે છે કોઈ પણ reload વગર: Units 1 થી 4 એક living page માં assembled. પણ notice કરો કે કોણે silently assumed થયું છે all along: server, તે box જે search.php ને reads કરે છે અને answers કરે છે. તમે ક્યારેય એક build નથી કર્યું. Unit 5 તેને Node.js સાથે fixes કરે છે, જ્યાં SAME JavaScript જે તમે આખા semester માં wrote કર્યું છે server side પર walk કરે છે અને આ very requests ને answers કરે છે.

✅ Summary

Key takeaways

• Lifecycle: event, create XMLHttpRequest, open + send, server processes, response returns, onreadystatechange fires, 4-and-200 પર DOM ને update કરો.
• AJAX engine (XMLHttpRequest + JS) UI અને server ની વચ્ચે sits કરે છે: architecture ની inserted middle layer.
• UI-to-engine instant અને local છે; engine-to-server small background data messages છે.
• Servers data ને returns કરે છે, pages નહીં; scripts ફક્ત affected DOM corner ને repaint કરે છે.
• AJAX page-sized reloads ને many small requests સાથે trade કરે છે: દરેક lighter, fewer નહીં.
• live-search listing એ આખો unit છે એક page માં: તેને narrate કરવાનું learn કરો.
• Memory hook: event, engine, envelope, answer, repaint.