প্রতাব চন্দ্র
জে’কুয়েরি load() মেথড একটি সাধারণ অথচ একটি শক্তিশালী অ্যাজাক্স মেথড।
লোড মেথড ওয়েব সার্ভার থেকে ডাটা বা তথ্য লোড করে এবং নির্দেশ করে দেয়া এলিমেন্টের ভেতর এই ডাটা স্থাপন করে।
সিনট্যাক্স (Syntax)
$(selector).load(URL,data,callback);
যে URL বা লিংক আপনি লোড করতে চান উপরের সিনট্যাক্সের “URL” প্যারামিটার এ সেটি দিতে হবে।
এখানে data প্যারামিটারটি ঐচ্ছিক। এটি কোনো রিকোয়েস্ট এর সাথে পাঠানোর জন্য querystring key/value সেট নির্ধারণ করে দেয়।
এখানে উল্লেখিত callback প্যারামিটারটিও ঐচ্ছিক বা optional । load() মেথড সম্পূর্ণ হবার পর যে ফাংশন কার্যকর (execute) হবে এটি সেই ফাংশনের নাম।
এখানে একটি উদারহণ দেওয়া হলো:
<h2>জে’কুয়েরি এবং অ্যাজাক্স মজার জিনিস!</h2>
<p id=”p1″>একটি প্যারাগ্রাফের ভিতর এখানে কিছু টেক্সট যোগ করা হয়</p>
নিচের উদাহরণটি “demo_test.txt” এর কনটেন্ট নির্দেশিত একটি <div> এলিমেন্টের ভেতর লোড করবে:
$("#div1").load("demo_test.txt");
ফলাফল : demo_test.txt
উল্লেখ্য, URL প্যারামিটারে jQuery সিলেক্টরও যোগ করা সম্ভব।
নিচের উদাহরণে “demo_test.txt” থেকে id=”p1″ নির্দেশিত এলিমেন্টের কনটেন্ট নির্ধারিত <div> এলিমেন্টের ভেতর লোড করবে।
$("#div1").load("demo_test.txt #p1");
ফলাফল : URL প্যারামিটারে jQuery সিলেক্টরও যোগ
ঐচ্ছিক callback প্যারামিটার একটি callback ফাংশন নির্দেশ করে যখন load() মেথডটি সম্পূর্ণ হয়। callback ফাংশন একাধিক প্যারামিটার ধারণ করতে পারে। যেমন-
- responseTxt –যদি call সফল হয় তবে প্রাপ্ত কনটেন্ট ধারণ করে।
- statusTxt – contains the status of the call এর পরিস্থিতি বা status ধারণ করে
- xhr – XMLHttpRequest অবজেক্ট ধারণ করে
load() মেথড সম্পূর্ণ হবার পর একটি অ্যালার্ট বক্স প্রদর্শন করার প্রক্রিয়া নিচের উদাহরণে দেখানো হলো। যদি মেথড সফল হয় তাহলে এটি “External content loaded successfully!” বার্তা প্রদর্শন করবে। আর যদি ব্যর্থ হয় তবে error মেসেজ দেখাবে।
উদাহরণ:
$("button").click(function(){
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
ফলাফল : অ্যালার্ট বক্স প্রদর্শন করার প্রক্রিয়া