অনেক দিন হয়ে গেল সময়ই বের করতে পারছিলাম না। যাই হোক দেরিতে হলেও আবার আমরা Ajax - এর ব্যবহার করতে যে সমস্ত সাধারন সমস্যার সম্মুখীন হই তার বিস্তারিত আলোচনা করব। গত লিখায় আমরা সমস্যা ও তার কিছু সমাধান সংক্ষেপে দেখেছিলাম। আজ আমরা উদাহরণ সহ এগুলো বিস্তারিত আলোচনা করব।

১. Run-Time Script Loading Problem:
সমস্যার মূল কারন হচ্ছে, ajax এর মাধ্যমে প্রাপ্ত "data", string হিসেবে থাকে। ফলে script, CSS এগুলো কাজ করে না, যদিও এ code গুলোও document -এ থাকে।
একটু ব্যখ্যা করলে আশা করি বুঝতে সহজ হবে। মনে করি আমরা এমন কিছু ডাটা ajax সহযোগে দেখাতে চাচ্ছি যেখানে CSS style ট্যাগ রয়েছে। সেখেত্রে style গুলো অকার্যকর থাকে।
উদাহরণ:


.redspan {color:red}

Roni This is the styled red span

উপরের content আমরা যেকোন browser -এ দেখলে "This is the styled red span" লাল রঙে দেখব কিন্তু ajax ব্যবহার করে load করা হলে লাল দেখা যাবে না। কারন style tag কে browser সাধারন text render করে। এ ঘটনা script tag-এর জন্যেও ঘটে।

এ সমস্যার সমাধান মূলত তিন উপায়ে করা যায়:
ক. load script at startup
main page-এ style/script tags declear করে এ সমস্যা সহজে সমাধান করা যেতে পারে। ajax-এ শুধু HTML content load করলেই হবে। কিন্তু script বেশী হলে এ পদ্ধতী ব্যবহার না করাই ভাল।
খ. Use of eval()
এক্ষেত্রে script code part আলাদা করে eval function use করা যেতে পারে। eval() function যেকোন string কে script statement হিসাবে execute করে।
একাধিক script file load করার ক্ষেত্র যদি script dependency থাকে তাহলে এই পদ্ধতী ব্যবহার করা ভাল হয়। eval javascript statement execute করার জন্য ব্যবহারযোগ্য style tag-এর জন্য নয়।
গ. DOM object তৈরি করে(সবচেয়ে জনপ্রিয়)
এটা সবচেয়ে কার্যকরী ও জনপ্রিয় পদ্ধতী। এর মাধ্যমে javascript or css code আলাদা ভাবে ফাইলে save করে run time-এ script or style tag তৈরি করা হয়।

//foo.js load করার জন্য
var scr = document.createElement("script");
scr.src = "foo.js";
scr.type = "text/javascript";
document.getElementsByTagName("head").item(0).appendChild(scr);

//foo.css load করার জন্য
var scr = document.createElement("link");
scr.href = "foo.css";
scr.rel = "stylesheet";
scr.type = "text/javascript";
document.getElementsByTagName("head").item(0).appendChild(scr);

নিচের function use করে .js or .css ফাইল load করা যেতে পারে
loadscripts("foo.js")
loadscripts("foo.css")

function loadscripts(file){
var fileref="";
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref);
}
}

.....................(চলবে)