এজেক্স - XMLHttpRequest ওবজেক্ট

XMLHttpRequest ওবজেক্টটি AJAX-এর মূলভূত অংশ

  1. XMLHttpRequest অবজেক্ট তৈরি করুন
  2. কলব্যবস্থা ফাংশন নির্ধারণ
  3. XMLHttpRequest ওবজেক্টটি খোলা
  4. সার্ভারের কাছে অনুরোধ পাঠানো

XMLHttpRequest অবজেক্ট

সমস্ত আধুনিক ব্রাউজারগুলি এটির সমর্থন করে XMLHttpRequest অবজেক্ট。

XMLHttpRequest ওবজেক্টটি ওয়েব সার্ভারের সাথে পিছনদিক থেকে ডাটা আদান-প্রদান করতে ব্যবহৃত হয়। এর মাধ্যমে ওয়েবপেজের অংশবিশেষ অপদান করা যায় যাতে সম্পূর্ণ পেজটি পুনরায় লোড করা হয়।

XMLHttpRequest অবজেক্ট তৈরি করুন

সমস্ত আধুনিক ব্রাউজার (Chrome, Firefox, IE, Edge, Safari, Opera) একসঙ্গে XMLHttpRequest অবজেক্ট সহযোগিতা করে XMLHttpRequest অবজেক্ট。

XMLHttpRequest অবজেক্ট তৈরি করার সিনট্যাক্স:

variable = new XMLHttpRequest();

কলব্যবস্থা ফাংশন নির্ধারণ

কলব্যবস্থা ফাংশন একটি ফাংশন যা অন্য একটি ফাংশনের প্যারামিট হিসাবে পাঠানো হয়

এই ক্ষেত্রে, কলব্যবস্থা ফাংশনটি প্রতিক্রিয়া প্রস্তুত হওয়ার সময় কোড ধারণ করবে。

xhttp.onload = function() {
  // যখন প্রতিক্রিয়া প্রস্তুত হয়
}

অনুরোধ পাঠানো

সার্ভারের কাছে অনুরোধ পাঠানোর জন্য, XMLHttpRequest অবজেক্টের open() এবং send() পদ্ধতি:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

ইনস্ট্যান্স

// XMLHttpRequest অবজেক্ট তৈরি
const xhttp = new XMLHttpRequest();
// কলব্যবস্থা নির্ধারণ
xhttp.onload = function() {
  // এখানে ডাটা ব্যবহার করা যেতে পারে
}
// অনুরোধ পাঠানো
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

আপনারই চেষ্টা করুন

ক্রস-ডোমেন অ্যাক্সেস (Access Across Domains)

নিরাপত্তা কারণে, আধুনিক ব্রাউজাররা ক্রস-ডোমেন অ্যাক্সেসকে অনুমদিত করে না。

এই মানে, ওয়েবপেজ এবং তা লোড করার চেষ্টা করা এক্সএমএল ফাইলটি একই সার্ভারে থাকতে হবে。

CodeW3C.com-এর উদাহরণগুলি CodeW3C.com ডোমেনের এক্সএমএল ফাইলগুলির সাথে খোলা হয়েছে。

আপনি যদি উপরোক্ত উদাহরণটি নিজস্ব ওয়েবপেজের একটিতে ব্যবহার করতে চান, তবে আপনি লোড করেন এক্সএমএল ফাইলটি নিজস্ব সার্ভারে থাকতে হবে。

XMLHttpRequest অবজেক্টের পদ্ধতি

পদ্ধতি বর্ণনা
new XMLHttpRequest() নতুন XMLHttpRequest অবজেক্ট তৈরি করুন
abort() বর্তমান অনুরোধ বাতিল করুন
getAllResponseHeaders() হেডার তথ্য ফিরিয়ে দেয়
getResponseHeader() বিশেষ হেডার তথ্য ফিরিয়ে দেয়
open(method, url, async, user, psw)

অনুরোধ নির্ধারণ

  • methodঅনুরোধের ধরন GET বা POST
  • urlফাইলের অবস্থান
  • asyncঅপশনাল true (অসিনক্রোনাস) বা false (সিনক্রোনাস)
  • userঅপশনাল ইউজারনেম
  • pswঅপশনাল পাসওয়ার্ড
send() সার্ভারের কাছে অনুরোধ পাঠানোর জন্য, GET অনুরোধের জন্য
send(string) সার্ভারের কাছে অনুরোধ পাঠানোর জন্য, POST অনুরোধের জন্য
setRequestHeader() সংকেত/মূল্য যোগ করুন যা পাঠাতে হবে হেডারের জন্য。

XMLHttpRequest অবজেক্টের এসপ্রোপ্টি

এপ্রোপার্টি বর্ণনা
onload জন্য যেখানে (লোড) অনুরোধ প্রাপ্ত হয়, তখন কলব্যবস্থা করা হয়েছে।
onreadystatechange প্রস্তুততা এসপ্রোপ্টি পরিবর্তন হলে কলব্যবস্থা করা হয়েছে।
readyState

XMLHttpRequest-এর অবস্থা সংরক্ষণ

  • 0: য়াচাই প্রাথমিক পর্যায়ে
  • 1: সার্ভার সংযোগ স্থাপিত হয়েছে
  • 2: য়াচাই প্রাপ্ত হয়েছে
  • 3: য়াচাই প্রক্রিয়াকরণে আছে
  • 4: য়াচাই সম্পন্ন হয়েছে এবং প্রতিক্রিয়া প্রস্তুত
responseText স্ট্রিং ফরমে প্রতিক্রিয়া ফিরিয়ে দেয়
responseXML XML ডাটা হিসাবে প্রতিক্রিয়া ফিরিয়ে দেয়
status

প্রতিক্রিয়ার অবস্থা নম্বর ফিরিয়ে দিতে

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

সম্পূর্ণ তালিকা দেখার জন্য এখানে যান Http মেসেজ রেফারেন্স ম্যানুয়াল
statusText অবস্থা টেক্সট ফিরিয়ে দেয় (যেমন "OK" বা "Not Found")

onload এপ্রোপার্টি

XMLHttpRequest অবজেক্ট ব্যবহার করতে গিয়ে, আপনি একটি ক্যালব্যাক ফাংশন নির্দিষ্ট করতে পারেন, যা প্রতিক্রিয়া প্রাপ্ত হলে চালু হবে

XMLHttpRequest অবজেক্টের onload এপ্রোপার্টিতে এই ফাংশন নির্দিষ্ট করা হয়:

ইনস্ট্যান্স

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

আপনারই চেষ্টা করুন

একাধিক ক্যালব্যাক ফাংশন

যদি ওয়েবসাইটে একাধিক AJAX কার্য থাকে, তবে XMLHttpRequest অবজেক্ট চালানোর জন্য একটি ফাংশন তৈরি করতে হবে এবং প্রত্যেক AJAX কার্যের জন্য একটি ক্যালব্যাক ফাংশন তৈরি করতে হবে

ফাংশন কলকে URL এবং প্রতিক্রিয়া প্রস্তুত হলে কল করতে হবে

ইনস্ট্যান্স

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // এখানে হলো কার্য
}
function myFunction2(xhttp) {
  // এখানে হলো কার্য
}

onreadystatechange এপ্রোপার্টি

readyState XMLHttpRequest-এর অবস্থা সংরক্ষণ

onreadystatechange এপ্রোপার্টি একটি ক্যালব্যাক ফাংশন নির্দিষ্ট করে, যা readyState পরিবর্তিত হলে চালু হয়

status এপ্রোপার্টি এবং statusText এপ্রোপার্টি XMLHttpRequest অবজেক্টের অবস্থা সংরক্ষণ

এপ্রোপার্টি বর্ণনা
onreadystatechange যখন readyState এপ্রোপার্টি পরিবর্তিত হয়, তখন ক্যালব্যাক ফাংশন কল করা হয়না
readyState

XMLHttpRequest-এর অবস্থা সংরক্ষণ

  • 0: য়াচাই প্রাথমিক পর্যায়ে
  • 1: সার্ভার সংযোগ স্থাপিত হয়েছে
  • 2: য়াচাই প্রাপ্ত হয়েছে
  • 3: য়াচাই প্রক্রিয়াকরণে আছে
  • 4: য়াচাই সম্পন্ন হয়েছে এবং প্রতিক্রিয়া প্রস্তুত
status

প্রতিক্রিয়ার অবস্থা নম্বর ফিরিয়ে দিতে

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

সম্পূর্ণ তালিকা দেখার জন্য এখানে যান Http মেসেজ রেফারেন্স ম্যানুয়াল
statusText statusText

স্টেটাস টেক্সট ফিরিয়ে দেয় (যেমন "OK" বা "Not Found")

প্রত্যেকবার readyState পরিবর্তিত হয় তখন onreadystatechange ফাংশন বলবৎ হয় 4 এবং status হয় 200 যখন, প্রতিক্রিয়া সংযোগ প্রস্তুত হয়

ইনস্ট্যান্স

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}

আপনারই চেষ্টা করুন

onreadystatechange ইভেন্ট চারবার (1-4) সক্রিয় হয়, প্রত্যেকবার readyState পরিবর্তিত হয়