Blog

<input type="text" id="name" placeholder="নাম লিখুন">   <!-- ইউজার ইনপুট ফিল্ড -->
<button onclick="sendData()">পাঠান</button>            <!-- সাবমিট বাটন -->

<div id="response"></div>                            <!-- সার্ভার থেকে রেসপন্স দেখানোর div -->

<script>
function sendData() {
  var name = document.getElementById("name").value;         // ইউজারের ইনপুট ভ্যালু নিচ্ছি

  var xhr = new XMLHttpRequest();                           // একটি AJAX রিকোয়েস্ট অবজেক্ট তৈরি করছি
  xhr.open("POST", "submit.php", true);                     // POST মেথডে submit.php ফাইলে রিকোয়েস্ট
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // POST ডেটার হেডার সেট

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById("response").innerHTML = xhr.responseText; // সার্ভার থেকে রেসপন্স আসলে দেখানো হচ্ছে
    }
  };

  xhr.send("username=" + encodeURIComponent(name));         // ইনপুট ডেটা encode করে পাঠানো হচ্ছে
}
</script>

<?php
if (isset($_POST["username"])) {                    // চেক করা হচ্ছে ডেটা এসেছে কিনা
  $name = htmlspecialchars($_POST["username"]);     // ইউজার ইনপুট স্যানিটাইজ করা হচ্ছে
  echo "স্বাগতম, " . $name . "!";                   // রেসপন্স হিসেবে পাঠানো হচ্ছে
} else {
  echo "ডেটা পাওয়া যায়নি।";                         // ডেটা না এলে এরর মেসেজ
}
?>