জেকুয়েরি অ্যাজাক্স load() মেথড
load() মেথড খুবই সাধারণ কিন্তু কাজের দিক থেকে অনেক ক্ষমতাসম্পন্ন।
load() মেথডের মাধ্যমে সার্ভার থেকে ডাটা লোড করে নির্বাচিত এলিমেন্টের মধ্যে রাখা হয়।
load() মেথডের সিনট্যাক্স:
$(selector).load(URL,string,callback);
প্যারমিটার এর ব্যাখ্যা
- আবশ্যক প্যারামিটার URL এর মাধ্যমে যে URL কে লোড করা হবে তাকে নির্ধারন করা হয়।
- অতিরিক্ত string প্যারামিটারের মাধ্যমে একগুচ্ছ কুয়েরি স্ট্রিং (key=value জোড়া) কে বুঝায়, যেগুলোকে সার্ভারে অনুরোধ পাঠানোর সময় যোগ করে দেওয়া হয়।
- অতিরিক্ত কলব্যাক প্যারামিটারটি নিজেই একটি ফাংশন,
load()মেথডের কাজ সম্পূর্ণ হলে কলব্যাক ফাংশনটি এক্সিকিউট হয়।
উদাহরণে ব্যবহৃত "load.txt" ফাইল এর কন্টেন্টগুলো নিচে দেওয়া হলোঃ
<p id="paragraph">তারুণ্যই সফলতা তারুণ্যই স্যাট- বাংলায় প্রোগ্রামিং শেখার নতুন এক নাম।</p>
নিচের উদাহরণে "load.txt" ফাইলের কন্টেন্টগুলো <div> এলিমেন্টের মধ্যে লোড হবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hello").load("load.txt");
});
});
</script>
</head>
<body>
<div id="hello"><h2>জেকুয়েরি অ্যাজাক্সের মাধ্যমে এই টেক্সট পরিবর্তন হবে।</h2></div>
<button>এক্সটার্নাল কন্টেন্ট</button>
</body>
</html>
ফলাফল
URL প্যারামিটারের সাথে জেকুয়েরি সিলেক্টরও যোগ করে দেওয়া সম্ভব।
নিচের উদাহরণে "load.txt" ফাইলের id="paragraph" সম্বলিত এলিমেন্টকে লোড করে <div> এলিমেন্টের মধ্যে রাখে:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hello").load("load.txt #paragraph");
});
});
</script>
</head>
<body>
<div id="hello"><h2>জেকুয়েরি অ্যাজাক্স এর মাধ্যমে এই টেক্সট পরিবর্তন হবে।</h2></div>
<button>এক্সটার্নাল কন্টেন্ট</button>
</body>
</html>
ফলাফল
কলব্যাক ফাংশন
load() মেথড এর অতিরিক্ত callback প্যারামিটার দ্বারা কলব্যাক ফাংশনকে বুঝায়। load() মেথডের কাজ সম্পন্ন হলে কলব্যাক ফাংশনটি সম্পাদিত(execute) হয়।
কলব্যাক ফাংশন এর সিনট্যাক্স
function(responseTxt ,statusTxt, xhr);
প্যারমিটার এর ব্যাখ্যা
responseTxt- অনুরোধ সফল হলে ফলাফলকৃত কন্টেন্ট ধারণ করে।statusTxt- অনুরোধের স্ট্যাটাস ধারণ করে।xhr- XMLHttpRequest অবজেক্ট ধারণ করে।
নিচের উদাহরণে load() মেথড সম্পন্ন হওয়ার পরে একটি এলার্ট বক্স প্রদর্শিত হয়। যদি load() মেথড সফল হয় তাহলে এটা "বাহ্যিক কন্টেন্ট সফলভাবে লোড হয়েছে!" এমন একটি এলার্ট মেসেজ প্রদর্শন করে। কিন্তু ব্যার্থ হলে একটি error ম্যাসেজ প্রদর্শন করে:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hello").load("load.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("বাহ্যিক কন্টেন্ট সফলভাবে লোড হয়েছে!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="hello"><h2>জেকুয়েরি অ্যাজাক্সকে পরিবর্তন করি</h2></div>
<button>এক্সটার্নাল কন্টেন্ট</button>
</body>
</html>
ফলাফল
জেকুয়েরি অ্যাজাক্স রেফারেন্স
জেকুয়েরি অ্যাজাক্স মেথডের সম্পূর্ণ রেফারেন্স দেখার জন্য আমাদের জেকুয়েরি অ্যাজাক্স রেফারেন্স পেজে ভিজিট করুন।