AJAX for backend integration: asynchronous requests; sending AJAX requests to PHP; real-time search functionality; JSON data exchange with JavaScript and PHP

📖 Theory

बिना Reload के Search

Portal का organiser एक registrant को इनका name type करके ढूँढना चाहता है और matches INSTANTLY दिखते देखना चाहता है, letter by letter, बिना किसी page reload के। एक traditional PHP form हर search पर पूरा page reload करता: slow और jarring।

आप cure पहले से BCA405-01 में मिले हैं: AJAX, जहाँ browser का JavaScript server से BACKGROUND में बात करता है। तब server Node था; अब यह आपकी PHP है। यह lesson full-stack loop close करता है: एक JavaScript front-end, एक PHP back-end, और इनके बीच flowing JSON, prepared statements और json_encode इस्तेमाल करते हुए जो आपने अभी सीखे।

📖 Theory

AJAX-to-PHP Loop

Pattern में 4 steps हैं, wire के दोनों sides span करते हुए:

1. Browser (JS): एक event (search box में typing) एक PHP endpoint को एक background request fire करता है, query भेजते हुए

2. Server (PHP): $_GET/$_POST से input पढ़ता है, MySQL पर एक PREPARED query चलाता है, और json_encode से results को JSON की तरह echo करता है

3. Browser (JS): JSON receive करता है, इसे parse करता है, और matches के साथ DOM update करता है

4. कोई page reload नहीं होता: सिर्फ़ results area बदलता है

जो कुछ आप जानते हैं वह यहाँ converge होता है: BCA405-01 का AJAX, इस unit के prepared statements, और json_encode। PHP बस वह role play करती है जो पहले Node ने play किया था।

⌨️ Practical

search.php: PHP Endpoint JSON Return करता है

<?php
  $db = new mysqli("localhost", "root", "", "portal");
  $q  = $_GET["q"] ?? "";

  // Prepared statement with a LIKE search (still injection-safe)
  $stmt = $db->prepare("SELECT name FROM regs WHERE name LIKE ? LIMIT 10");
  $term = "%" . $q . "%";
  $stmt->bind_param("s", $term);
  $stmt->execute();
  $res = $stmt->get_result();

  $names = [];
  while ($row = $res->fetch_assoc()) {
    $names[] = $row["name"];
  }

  header("Content-Type: application/json");
  echo json_encode($names);   // e.g. ["Riya","Rahul"]
?>

⌨️ Practical

The browser side (concept; run in a real page)

// As the user types, fetch matches from search.php WITHOUT reloading
function liveSearch(query) {
  fetch("search.php?q=" + encodeURIComponent(query))
    .then(function (response) { return response.json(); })  // parse JSON
    .then(function (names) {
      // names is the array PHP sent, e.g. ["Riya", "Rahul"]
      const list = names.map(function (n) { return "<li>" + n + "</li>"; });
      document.getElementById("results").innerHTML = list.join("");
    });
}
// The page never reloads; only #results changes.

This example runs in Gri-Learn on the web, where you can edit it and see the output.

🧩 Quiz

एक AJAX search में, PHP endpoint JavaScript को क्या वापस भेजता है, और कैसे?

1. एक पूरा नया HTML page, जो current page को replace करता है
2. सिर्फ़ data (जैसे matching names) json_encode के through JSON की तरह, जिसे JavaScript parse करता है और page के हिस्से को update करने के लिए इस्तेमाल करता है
3. कुछ नहीं: AJAX पूरी तरह browser में काम करता है
4. Raw MySQL connection object

💭 Think first

Same Loop, तीसरा Back-End

BCA405-01 में आपकी AJAX live search Node.js से answered थी। अब वही front-end pattern PHP से answered है। यह front-end और back-end के relate होने के बारे में क्या reveal करता है? फिर tap कीजिए।

⚠️ Watch out

AJAX-to-PHP Traps

Prepared Statements Drop करना: एक AJAX endpoint भी user input लेता है; अभी भी parameters bind कीजिए (injection care नहीं करता कि request AJAX से आई)।

Content-Type: application/json Set न करना: browser response misparse कर सकता है।

User Input से HTML Echo करना: इसे escape कीजिए; AJAX endpoints किसी भी page की तरह XSS-vulnerable हैं।

encodeURIComponent भूलना: query में special characters URL तोड़ते हैं।

हर Keystroke पर Blocking करना: heavy per-keystroke queries lag कर सकती हैं; real apps debounce करते हैं।

📖 Theory

Scripts काम करती हैं; अब, एक Framework

Portal अब एक full-stack app है: PHP + MySQL + AJAX + JSON। पर यह individual scripts का एक pile है, और real teams बड़े apps को loose files की तरह नहीं build करतीं। ये एक FRAMEWORK इस्तेमाल करती हैं जो structure enforce करता है। आख़िरी 2 Unit 3 lessons portal को CodeIgniter (CI4) पर rebuild करते हैं, जो सब कुछ MVC pattern में organise करता है: Models (data), Views (pages), Controllers (logic), plus routing। Scripts से professional structure तक।

✅ Summary

Key takeaways

• AJAX browser JavaScript को page reload किए बिना आपके PHP को background requests भेजने देता है।
• Loop: JS एक request भेजता है, PHP input पढ़ता है, MySQL query करता है (prepared), json_encode(results) echo करता है, JS parse करता है और DOM update करता है।
• Use case: real-time search, जहाँ user के type करते ही results दिखते हैं।
• PHP endpoint सिर्फ़ DATA को JSON की तरह return करता है, पूरा page नहीं; सिर्फ़ page का हिस्सा update होता है।
• AJAX endpoints को अभी भी prepared statements और output escaping चाहिए: user input user input है।
• Front-end और back-end decoupled हैं: same JS Node (BCA405-01) के against और अब PHP के against काम करता है।
• Memory hook: JS पूछता है, PHP JSON के साथ answer करता है, page in place update होता है।