AJAX => Asynchronous JavaScript And XML.

AJAX => Asynchronous JavaScript And XML.

AJAX is a developer's dream because you can:

• Read data from a web server - after the page has loaded
• Update a web page without reloading the page
• Send data to a web server - in the background

AJAX কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়।

এটি JavaScript and XML এর একটি সমন্বয় মাত্র। 

এখানে আমরা JS এর মাধ্যমে সকল ধরনের action এর কাজ করে থাকি। এবং XML এর মাধ্যমে response or feedback সংগ্রহ করে থাকি।

এখানে একটি খুব গুরুত্বপূর্ণ বিষয় হল Asynchronous (অসমনিয়ত) অর্থাৎ এমন কোন প্রক্রিয়া যেখানে কেউ কারো জন্য অপেক্ষা করবে না।

ধরি, আমাদের একটি ওয়েবপেজ আছে সেখানে, আচ্ছা বাদ দিন। চলুন ফেসবুক এর কথা ধরা যাক।

ফেসবুক এ কিন্তু আমরা যেই নোটিফিকেশান পাই সেইটা কিন্তু পুনরায় পেজ load হউয়ার জন্য অপেক্ষা করে না। 

এমন কিন্তু কখনো হয় না যে ৫-১০ টা নোটিফিকেশান আসছে কিন্তু আমরা দেখতে পারছি না,পেজ নতুন করে load করলে তবেই দেখতে পাব।
যখন নোটিফিকেশান আসে তখন ই background এ server এর সাথে যোগাযোগ করে আমাদের কাছে নোটিফিকেশান পাঠিয়ে দিচ্ছে , আবার ওই কাজের জন্য  আমাদের ফেসবুক এর পেজ কিন্তু অপেক্ষা করছে না সে কিন্তু নিজের মতই চলছে।

"they never interrupt each other for their own task."

আর এই বিষয়টাকেই বলা হচ্ছে Asynchronous.

জেনে রাখা ভাল Synchronous বলতে ঠিক এর উলটো টাই বুঝায়। server এর কাছ থেকে রেসপন্স পাবার আগ পর্যন্ত পেজ  load নিবে না। এক কথায় এখানে অপেক্ষা করবে  এটা নিশ্চিত সেটা ০.০০০১ milisecond এর জন্য হইলেও ।


অকে অনেক আউল ফাউল বক বক করা হইল। আসুন একটু কাজের কথায় যাওয়া যাক।
AJAX এর মাধ্যমে আমরা এই Asynchronous কাজ গুলো করে থাকি।

Learn how to use: AJAX

AJAX use  করতে সবার প্রথমে যা লাগবে টা হোল 

XMLHttpRequest:

এটি হইল সব থেকে গুরুত্বপূর্ণ একটি বিষয় কারণ এর মাধ্যমে আমরা ওয়েব সারভার এ request পাঠাব।

       
       var xhttp = new XMLHttpRequest(); 
    

এখন আমরা xhttp  ভেরিয়েবল  server এ request পাঠানোর জন্য ব্যাবহার করতে পারবো।

XMLHttpRequest Object Methods

Method	Description
new XMLHttpRequest()	Creates a new XMLHttpRequest object
abort()	Cancels the current request
getAllResponseHeaders()	Returns header information
getResponseHeader()	Returns specific header information
open(method, url, async, user, psw)	Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password
send()	Sends the request to the server Used for GET requests
send(string)	Sends the request to the server. Used for POST requests
setRequestHeader()	Adds a label/value pair to the header to be sent

---

XMLHttpRequest Object Properties

Property	Description
onreadystatechange	Defines a function to be called when the readyState property changes
readyState	Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready
responseText	Returns the response data as a string
responseXML	Returns the response data as XML data
status	Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference
statusText	Returns the status-text (e.g. "OK" or "Not Found")

উপরের টেবিল ২ টা ব্যাবহার করে আমরা বিভিন্ন অবস্থা তে বিভিন্ন কাজ করে থাকি । 

server এ request send করার উপায়ঃ

server এ request পাঠানর জন্য আমরা ২ টি build-in method ব্যাবহার করে থাকিঃ

                         ১। open()

                        ২। send()

       
               var xhttp = new XMLHttpRequest();
               xhttp.open("GET", "ajax_info.php", true);
           xhttp.send();
    

Method	Description
open(method, url, async)	Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous)
send()	Sends the request to the server (used for GET)
send(string)	Sends the request to the server (used for POST)

GET or POST?

GET is simpler and faster than POST, and can be used in most cases.

However, always use POST requests when:

• A cached file is not an option (update a file or database on the server).
• Sending a large amount of data to the server (POST has no size limitations).
• Sending user input (which can contain unknown characters), POST is more robust and secure than GET.