• Posted on 4 May 2019
• Shibbir Ahmed
• 5 Comments
• Ajax
• 1066 Views

কিভাবে Server এ Ajax Request পাঠাবো এবং গ্রহণ করব?

আগের পর্বতে আমরা দেখেছি যে Ajax কি, কোন কোন Technology দিয়ে Ajax গঠিত, এটি কিভাবে এবং কোথায় কাজ করে। আজকে আমরা দেখবো যে, কিভাবে Server এ Ajax Request পাঠাবো এবং গ্রহণ করব। তো চলুন দেখে আসি 🙂
কোন Web Server এ Ajax request পাঠাতে হলে আমরা XMLHttpRequest object এর ২ টি Method ব্যবহার করি। একটি হলো open() এবং অপরটি send() method। যেমন-

xmlHttp.open("GET", "our_some_file.php", true);
xmlHttp.send();

আগের পর্বটিতে আমরা দেখে এসেছি যে এই open() এবং send() method টি কি কাজ করে। তারপরও আবার এটি দেখে আসি –
১। open()
এই open() method এর মাধ্যমে Web Server এর সাথে connection করা হয়। এই method কে আপনি ৩ ভাবে call করতে পারেন –
১) open(method, URL)
২) open(method, URL, async)
৩) open(method, URL, async, username, password)
উপরের open() method এ আপনি চাইলে ২টি বা ৩টি আবার ৫ টি parameters সহ ব্যবহার করতে পারেন। তবে সর্বনিম্ন আপনাকে ২টি parameters অব্যশই ব্যবহার করতে হবে। চলুন এই ৫ টি parameters সম্পর্কে একটু জেনে আসি-
<table>
method = কোন method এ আপনি Data পাঠাবেন মানে POST নাকি GET method এ।
URL = কোন URL এ request টি পাঠাবেন।
async = যদি true দিয়ে আসেন তাহলে Asynchronous ভাবে data transfer হবে এবং যদি false দিয়ে আসেন তাহলে Synchronous ভাবে data transfer হবে।
username  = authentication এর জন্য আপনি চাইলে username ব্যবহার করতে পারেন।
password  = authentication এর জন্য আপনি চাইলে password ব্যবহার করতে পারেন।
২। send()
এই send Method এর মাধ্যমে server এর Request পাঠানো হয়। এখন আপনি যদি Request টি GET Method এর মাধ্যমে পাঠাতে চান তাহলে এই Method টি ব্যবহার করতে পারেন। তবে এ ক্ষেত্রে কোন parameter লাগবে না।
৩। send(string)
আপনি যদি Request টি POST Method এর মাধ্যমে পাঠাতে চান তাহলে এই Method টি ব্যবহার করতে পারেন। এ ক্ষেত্রে এই Method এর ভিতরে key এবং value pair হিসেবে ডাটা প্রদান করতে হবে।
আমরা জানি কোন Data Server এ পাঠাতে হলে ২ ভাবে পাঠানো যায়। একটি হলো GET এবং অন্যটি হলো POST Method এ।

” GET Method তখনই ব্যবহার করবেন যখন আপনি চান যে, URL এর মাধ্যমে কিছু ডাটা পাঠাবেন “

” POST Method তখনই ব্যবহার করবেন যখন আপনি চান যে, কোন একটি HTML FORM থেকে ডাটা পাঠাবেন “

এবার চলুন প্রথমেই দেখে আসি কিভাবে GET Method এর মাধ্যমে Web Server এ Aajx request পাঠানো যায়।

GET Method এর মাধ্যমে Web Server এ Aajx request পাঠানো

প্রথমেই চলুন আমরা একটি প্লান করি যে কখন আমাদের Aajx request টি পাঠাবো এবং কিভাবে পাঠাবো। আমরা চাই যে, যখন কোন একটি Button এ ক্লিক করা হবে তখন ১টি PHP ফাইল থেকে কিছু তথ্য দেখাবে।
প্রথমেই index.html নামে নতুন একটি ফাইল তেরি করব তারপর যেহেতু আমরা বলিছি যে, Button এ ক্লিক করলেই আমাদের Aajx request টি যাবে তার জন্য আমরা JavaScript এর onClick নামে ১টি event ব্যবহার করব। এই onClick event এ ক্লিক করলেই আমাদের ১টি JavaScript Function Call হবে। চলুন এতটুকু করে আসি –

<button onClick="getData();" type="button">Get Data</button>

উপরের কোডটিতে আমরা দেখতে পাচ্ছি যে, button ট্যাগের ভিতর onclick নামে একটি JavaScript এর event নিয়েছি এবং এর ভিতর getData নামে JavaScript এর একটি Function নিয়েছি।
এখন যখনই আমরা এই button এর ক্লিক করব তখনই আমাদের তৈরী করা getData নামক Function টি call হবে।
এখন এই getData নামক Function টির ভিতরে আমরা Server এ একটি Aajx request পাঠাবো এবং এরপর একটি ফিরতি Response পাবো। মানে আপনি তো request পাঠাবেন তারপর তো সেই request এর একটা Result ও তো আপনাকে পেতে হবে, তাই না? চলুন এবার getData নামক Function টির ভিতর Aajx request এর কোড লিখে আসি –

function getData () {
	var xmlHttp		=	new XMLHttpRequest();
	xmlHttp.onreadystatechange = function () {
		if(this.readyState == 4 && this.status == 200) {
			document.getElementById("result").innerHTML = this.responseText;
		}
	}
	xmlHttp.open('GET', 'http://localhost/amarcourse/tutorial/ajax/our_some_file.php', true);
	xmlHttp.send();
}

চলুন এবার এই function এর ভিতরের কোডগুলো ব্যাখ্যা করে আসি-
প্রথমেই আমরা XMLHttpRequest এর নতুন একটি Object তৈরী করে xmlHttp নামের একটি variable এর ভিতর store করে রেখেছি। তাতে করে আমরা এখন এই XMLHttpRequest Object এর সকল Property এবং Method গুলোকে এই variable এর মাধ্যমে Access করতে পারব-

var xmlHttp = new XMLHttpRequest();

এরপর আমরা এই Object এর onreadystatechange নামে একটি Property ব্যবহার করব। কিন্তু এই Property এর value হিসেবে একটি function দিয়ে আসতে হয় এবং এই function টি তখনই কাজ করবে যখন readyState নামের Property এর value পরিবর্তন হবে।

xmlHttp.onreadystatechange = function () {
}

readyState কি? readyState হলো একটি Property যা XMLHttpRequest Object এর status কে ধরে রাখে।
এই readyState Property এর Value ৫ রকমের হয়ে থাকে। যেমন-
0, মানে হলো request টি এখনো শুরু হয়নি।
1, মানে হলো request টি পাঠানোর জন্য এখন সম্পূর্ণ প্রস্তুত।
2, মানে হলো request টি পাঠানো সম্পন্ন হয়েছে।
3, মানে হলো request টি এখানো প্রক্রিয়াধীন রয়েছে।
4, মানে হলো request টি সম্পন্ন হয়েছে।
এখন এই function এর ভিতর আমরা check করব যে readyState Property এর Value 4 কি না এবং status Property এর Value 200 কি না?
status Property কি? status Property আপনার request এর একটি status-number দেখায়। এই status-number কয়েক ধরনের হয়ে থাকে। যেমন-
200: মানে হলো “OK”
403: মানে হলো “Forbidden”
404: মানে হলো “Not Found”
তাহলে আমরা এই function এর ভিতর কোড হবে –

if(this.readyState == 4 && this.status == 200) {
}

এরপর এই if ব্লকের ভিতর ঐ request এর response টি গ্রহণ করব এবং আমাদের HTML ফাইলের একটি div এর ভিতর response টি দেখাবে। তার জন্য আমরা ঐ যে একটি button নিয়েছিলাম মনে আছে? তার নিচে এই কোডটি লিখব-

এবং এই div ভিতর response টি দেখানোর জন্য if ব্লকের ভিতর আমরা লিখব-

document.getElementById("result").innerHTML = this.responseText;

এখন সবশেষ আমরা ২ টি Method ব্যবহার করব আর তা হলো –
১। open(method, url, async)
২। send()
এই open Method এর কাজ হলো যে, কি ধরনের Request, কোন URL এ asynchronous বা synchronous ভাবে পাঠাবো
এবং
send Method এর কাজ হলো যে, উপরোক্ত Request টি কে server এর কাছে পাঠানো।
এবং চলুন এই Method গুলো ব্যবহার করে আসি –

xmlHttp.open('GET', 'http://localhost/amarcourse/tutorial/ajax/our_some_file.php', true);
xmlHttp.send();

উপরের কোডটিতে আমরা GET Requst Method এ http://localhost/amarcourse/tutorial/ajax/our_some_file.php এর কাছে একটি asynchronous Requst তৈরী করেছি এবং সবশেষে Requst টি send Method এর মাধ্যমে পাঠিয়েছি।
আপনি খেয়াল করলে দেখতে পাবেন যে, আমরা our_some_file.php ফাইলে আমাদের এই Ajax Request টি পাঠিয়েছি, তাই না? এই ফাইলটিতে আমরা শুধুমাত্র লিখেছি –

<?php
echo 'Hello there, Welcome to Amar Course';

এখন, আপনি যখনই এই button এ ক্লিক করবনে তখনই our_some_file.php ফাইলে একটি Ajax Request চলে যাবে এবং তারপর Response হিসেবে আমরা দেখতে পাবো-
Hello there, Welcome to Amar Course
এভাবে, GET Request Method এর মাধ্যমে Web Server এ Aajx request পাঠানো হয় এবং Response হিসেবে কিছু তথ্য দেখানো যায়।
আপনি যদি চান যে, এই GET Request মাধ্যমে আপনি যে URL এ Request টি পাঠিয়েছেন, তার সাথে কিছু ডাটাও আপনি পাঠাবেন। হ্যা, আপনি চাইলে তাও পারবেন। তার জন্য শুধুমাত্র আপনাকে ঐ URL এর পর Question(?) সাইনটি দিয়ে key এবং value pair হিসেবে ডাটা পাঠাতে হবে। যেমন- আমরা চাই যে, URL এর সাথে সাথে sitename নামে একটি key এবং তার value হিসেবে amarcourse লেখাটি পাঠাবো। আর এ জন্য আমাদেরকে লিখতে হবে-

http://localhost/amarcourse/tutorial/ajax/our_some_file.php?sitename=amarcourse

উপরের কোডটিতে দেখতে পাচ্ছেন যে, Question(?) সাইনটির পরে আমরা sitename নামে একটি key এবং তার value হিসেবে amarcourse লেখাটি পাঠিয়েছি। এখন এই key এর value টি our_some_file.php ফাইলে গ্রহণ করতে হলে আপনাকে লিখতে হবে-

$_GET['sitename'];

এখন এর key এর value টি গ্রহণ করার পর আপনি চাইলে কোন একটি PHP Variable এ assign বা store করে রাখতে পারেন এবং যেখানে খুশি সেখানে ব্যবহার করতে পারেন আপনার সুবিধামত।

POST Method এর মাধ্যমে Web Server এ Aajx request পাঠানো

GET Method এর মত POST Method এর মাধ্যমে Web Server এ Aajx request পাঠানো প্রায় একই। শুধুমাত্র open Method এর ভিতরে GET Method এর পরিবর্তে POST Method দিয়ে আসতে হবে এবং send Method এ key এবং value pair হিসেবে যেই ডাটা পাঠাতে চান তা দিয়ে আসতে হবে।
তবে এই ক্ষেত্রে আপনাকে অবশ্যই setRequestHeader() Method এর মাধ্যমে request এ একটি HTTP header পাঠাতে হবে। যেমন-

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

মনে রাখতে হবে যে, এই HTTP header টি অবশ্যই open() এবং send() Method এর মাঝখানে দিয়ে আসতে হবে।
তাহলে POST Method এর জন্য সম্পূর্ন কোডটি দেখতে হবে এই রকম –

function postData() {
	var firstname = document.getElementById("firstname").value;
	var lastname = document.getElementById("lastname").value;
	xmlHttp		=	new XMLHttpRequest();
	xmlHttp.onreadystatechange = function () {
		if(this.readyState == 4 && this.status == 200) {
			document.getElementById("post_result").innerHTML = this.responseText;
		}
	}
	xmlHttp.open('POST', 'http://localhost/amarcourse/tutorial/ajax/another_php_file.php', true);
	xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlHttp.send('fname='+firstname+'&lname='+lastname);
}

উপরের কোডটিতে আমরা দেখতে পাচ্ছি যে, postData() নামে একটি function নিয়েছে এবং এর ভিতরে GET Request এর মতই সকল কোড গুলো লিখেছি। তবে একটু ব্যতিক্রম রয়েছে তা হলো এই নিচের ৩ টি লাইন –

xmlHttp.open('POST', 'http://localhost/amarcourse/tutorial/ajax/another_php_file.php', true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send('fname='+firstname+'&lname='+lastname);

১। প্রথমে দেখতে পাচ্ছেন যে, POST Method এর মাধ্যমে another_php_file.php ফাইলে একটি asynchronous request পাঠিয়েছি।
২। এই request সাথে একটি HTTP header পাঠিয়েছি।
৩। কোন কোন ডাটা key এবং value pair হিসেবে পাঠাবো তা দিয়ে এসেছি। যেমন- এখানে key হলো fname এবং lname আর fname এর value হলো firstname এবং lname এর value হলো lastname।
প্রশ্ন হলো এই firstname এবং lastname কোথা থেকে এসেছে। এই firstname এবং lastname হলো ২ টি JavaScript এর variable যা আমাদের HTML FORM এর First Name এবং Last Name এর Input Field থেকে User এর দেওয়া ডাটা গুলোকে নিয়ে সংরক্ষন করে রাখবে।। এর জন্য আমরা লিখেছি –

var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;

এবং HTML FORM এর জন্য কোডটি হলো-

<form id="form">
	<tr>
		<td>First Name</td>
		<td><input type="text" name="fname" id="firstname"></td>
	</tr>
	<tr>
		<td>Last Name</td>
		<td><input type="text" name="lname" id="lastname"></td>
	</tr>
	<tr>
		<td colspan="2"><button onclick="postData()" type="button">Send Data</button></td>
	</tr>
</form>

এখন আপনি যদি এই FORM এর First Name এবং Last Name ফিল্ডের এ Alex এবং Mojum লিখে Send Data নামক বাটনটিতে ক্লিক করেন তাহলে দেখতে পাবেন-

Hello Alex Mojum. Welcome to Amar Course

কেন এই লেখাটি দেখালো? কারন আমাদের another_php_file.php ফাইলে আমরা প্রথমে ঐ ২ টি ফিল্ডের মান গুলো গ্রহন করে ২ টি PHP variable এ রেখেছি এবং তারপর echo করেছি। মানে এই ভাবে-

<?php
$firstName = $_POST['fname'];
$lastName = $_POST['lname'];
echo "Hello $firstName $lastName." . " Welcome to Amar Course";

এভাবে, POST Request Method এর মাধ্যমে Web Server এ Aajx request পাঠানো হয় এবং Response হিসেবে কিছু তথ্য দেখানো যায়।