জেকুয়েরি ajax() মেথড
সংজ্ঞা এবং ব্যবহার
অ্যাজাক্স রিকুয়েস্ট কার্যকর করতে ajax() মেথড ব্যবহার করা হয়।
সকল জেকুয়েরি অ্যাজাক্স মেথড ajax() মেথডটি ব্যবহার করে। এই মেথডটি বেশিরভাগ ক্ষেত্রে রিকুয়েস্টের জন্য ব্যবহার করা হয় যেখানে অন্যান্য মেথড ব্যবহার করা যায় না।
সিনট্যাক্স ও ব্যাখ্যা
$.ajax({name:value, name:value, ... })
অ্যাজাক্স রিকুয়েস্টের জন্য প্যারামিটার এক বা একাধিক name/value জোড়া নির্দেশ করে।
সম্ভাব্য names/values নিচের টেবিলে দেওয়া হলো:
| নাম | ভ্যালু/বিবরণ |
|---|---|
async |
রিকুয়েস্টটি অ্যাসিঙ্ক্রোনাস হবে কি হবে না তা একটি বুলিয়ান ভ্যালুর মাধ্যমে নির্দেশ করে। ডিফল্ট ভ্যালু হলো true। |
beforeSend(xhr) |
রিকুয়েস্ট পাঠানোর পূর্বে একটি ফাংশন রান হবে। |
cache |
রিকুয়েস্টেকৃত পেজ ব্রাউজার ক্যাশ করবে কি করবে না তা একটি বুলিয়ান ভ্যালুর মাধ্যমে নির্দেশ করে। ডিফল্ট ভ্যালু হলো true। |
complete(xhr,status) |
রিকুয়েস্ট সম্পন্ন হওয়ার পর একটি ফাংশন রান হবে। |
contentType |
সার্ভারে ডাটা পাঠানোর সময় কন্টেন্ট টাইপ ব্যবহার করা হয়। ডিফল্টটি হলো: "application/x-www-form-urlencoded" |
context |
অ্যাজাক্স সম্পর্কিত সকল কলব্যাক ফাংশনের জন্য "this" ভ্যালুকে নির্দেশ করে। |
data |
সার্ভারে পাঠানো ডাটাকে নির্দেশ করে। |
dataFilter(data,type) |
XMLHttpRequest রিকুয়েস্টের র রেস্পন্স ডাটা হ্যান্ডেল করতে একটি ফাংশন ব্যবহার করে। |
dataType |
সার্ভার রেস্পন্সের কাঙ্খিত ডাটাটাইপ। |
error(xhr,status,error) |
রিকুয়েস্ট ব্যর্থ হলে একটি ফাংশন রান হবে। |
global |
রিকুয়েস্টের জন্য গ্লোবাল অ্যাজাক্স ইভেন্ট হ্যান্ডলার সক্রিয় হবে কি হবে না তার একটি বুলিয়ান ভ্যালু নির্দেশ করে। ডিফল্ট ভ্যালু হলো true। |
ifModified |
একটি বুলিয়ান ভ্যালু নির্দেশ করে রিকুয়েস্টটি সম্পন্ন হবে যদি পূর্ববর্তী রিকুয়েস্টের রেস্পন্স থেকে বর্তমানটি পরিবর্তিত হয়। ডিফল্ট ভ্যালু false |
jsonp |
একটি jsonp রিকুয়েস্টে কলব্যাক ফাংশনকে একটি স্ট্রিং দ্বারা বাদ দেওয়া। |
jsonpCallback |
একটি jsonp রিকুয়েস্টে কলব্যাক ফাংশনের একটি নাম নির্দেশ করে। |
password |
HTTP এক্সেস অথেন্টিকেশন রিকুয়েস্টে একটি পাসওয়ার্ড ব্যবহার করতে হবে তা নির্দেশ করে। |
processData |
একটি বুলিয়ান ভ্যালু দ্বারা নির্দেশ করে যে রিকুয়েস্টের সাথে পাঠানো ডাটা জেকুয়েরি স্ট্রিংয়ে রুপান্তরিত হবে কি হবে না। ডিফল্ট ভ্যালু true। |
scriptCharset |
রিকুয়েস্টের ক্যারেক্টারসেট নির্দেশ করে |
success(result,status,xhr) |
রিকুয়েস্ট সফল হলে একটি ফাংশন রান হবে |
timeout |
রিকুয়েস্টের লোকাল টাইমআউট(মিলিসেকেন্ডে) |
traditional |
একটি বুলিয়ান ভ্যালু নির্দেশ করে যে param serialization এর গতানুগতিক স্টাইল ব্যবহার করবে কি করবে না তা নির্দেশ করে। |
type |
রিকুয়েস্টের টাইপ নির্দেশ করে(GET অথবা POST) |
url |
রিকুয়েস্ট পাঠানোর URL কে নির্দেশ করে। ডিফল্ট হলো কারেন্ট পেজ। |
username |
HTTP এক্সেস অথেন্টিকেশন রিকুয়েস্টে একটি username ব্যবহার করতে হবে তা নির্দেশ করে |
xhr |
XMLHttpRequest অবজেক্ট তৈরির জন্য ব্যবহৃত একটি ফাংশন |
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").detach();
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
<button>সকল p এলিমেন্ট রিমুভ করুন</button>
</body>
</html>
ফলাফল
উদাহরণ
একটি অ্যাসিঙ্ক্রোনাস অ্যাজাক্স রিকুয়েস্ট তৈরি
কিভাবে সিঙ্ক্রোনাস রিকুয়েস্ট নির্দেশ করার জন্য async সেটিংস ব্যবহার করতে হয়
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_ajax_load.txt", async: false, success: function(result){
$("div").html(result);
}});
});
});
</script>
</head>
<body>
<div><h2>আজাক্সের মাধ্যমে এই টেক্সটকে পরিবর্তন হতে দেই</h2></div>
<button>কন্টেন্ট পরিবর্তন করি</button>
</body>
</html>
ফলাফল
নির্দিষ্ট ডাটা টাইপ দিয়ে একটি অ্যাজাক্স রিকুয়েস্ট তৈরি
কিভাবে রিকুয়েস্টের জন্য ডাটাটাইপ নির্দেশ করার জন্য dataType সেটিংস ব্যবহার করতে হয়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_ajax_script.js", dataType: "script"});
});
});
</script>
</head>
<body>
<button>একটি জাভাস্ক্রিপ্ট ফাইল পেতে এবং রান করতে অ্যাজাক্স ব্যবহার করি</button>
</body>
</html>
ফলাফল
একটি এঁরর অ্যাজাক্স রিকুয়েস্ট তৈরি কর
কিভাবে রিকুয়েস্টে এঁররের সংগে মোকাবিলা করতে error সেটিংস ব্যবহার করতে হয়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "wrongfile.txt", error: function(xhr){
alert("একটি এঁরর ঘটেছে: " + xhr.status + " " + xhr.statusText);
}});
});
});
</script>
</head>
<body>
<p>আর্টিষ্ট</p>
<div></div>
<button>সিডির বিবরণী দেখি</button>
</body>
</html>
ফলাফল