পিএইচপি অ্যাজাক্স (PHP Ajax)

PHP Ajax হল একটি শক্তিশালী প্রযুক্তি যা PHP এবং Ajax (Asynchronous JavaScript and XML) ব্যবহার করে ডায়নামিক ওয়েব পেজ তৈরি করার জন্য ব্যবহৃত হয়। Ajax এর মাধ্যমে ওয়েব পেজের নির্দিষ্ট অংশে ডেটা লোড করা বা আপডেট করা যায় পেজ রিফ্রেশ ছাড়াই, যার ফলে ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়। এবং PHP একটি সার্ভার সাইড ভাষা হিসেবে ব্যবহার করা হয় যা ক্লায়েন্ট সাইডে Ajax কলের মাধ্যমে ডেটা প্রসেস এবং ফেরত পাঠানোর কাজ করে।

PHP Ajax এর মৌলিক ধারণা:

Ajax হল এমন একটি প্রযুক্তি যা ওয়েব পেজের সাথে ব্যবহারকারী ইন্টারঅ্যাকশনকে আরও ডায়নামিক এবং দ্রুততর করে তোলে। এটি JavaScript এবং XMLHttpRequest ব্যবহার করে সার্ভারের সাথে যোগাযোগ করে, তবে এটি পুরো পেজকে রিফ্রেশ না করে শুধুমাত্র প্রয়োজনীয় ডেটা লোড বা আপডেট করে।

PHP Ajax এর মাধ্যমে, আপনি ক্লায়েন্ট সাইডে (যেমন ব্রাউজারে) JavaScript ব্যবহার করে Ajax কল করতে পারেন এবং PHP এর মাধ্যমে সার্ভার সাইডে ডেটা প্রসেস করতে পারেন। এর পর PHP সার্ভার থেকে ডেটা ফেরত পাঠাবে এবং তা JavaScript দ্বারা ক্লায়েন্ট সাইডে প্রদর্শন করা হবে।

PHP Ajax উদাহরণ:

1. HTML ফাইল:

    
    
    
    
    



    
PHP Ajax Example
    Enter Username:
    
    Fetch Data

    
 

ব্যাখ্যা:

• HTML Part: এখানে একটি ইনপুট ফিল্ড এবং একটি বাটন রয়েছে। যখন ব্যবহারকারী বাটনে ক্লিক করবে, তখন fetchData() ফাংশন কল হবে।
• JavaScript (Ajax): fetchData() ফাংশনটি JavaScript দিয়ে লিখিত, যা ইনপুট থেকে ইউজারের নাম নেয় এবং $.ajax() ফাংশনের মাধ্যমে process.php ফাইলে একটি POST রিকোয়েস্ট পাঠায়।
• success Callback: সার্ভার থেকে সফলভাবে ডেটা ফিরে আসলে, সেটি #result ডিভে প্রদর্শিত হবে।

2. PHP ফাইল (process.php):

ব্যাখ্যা:

• PHP Part: এই ফাইলটি Ajax কলের মাধ্যমে প্রাপ্ত username ইনপুট ডেটা গ্রহণ করে। যদি ইউজার নাম admin হয়, তাহলে একটি নির্দিষ্ট বার্তা প্রদর্শিত হবে, এবং অন্যথায়, সাধারণ বার্তা দেখানো হবে।
• Data Handling: এই ক্ষেত্রে, ডেটা একটি ডামি ডেটা হিসেবে সরবরাহ করা হয়েছে, তবে আপনি এটি ডাটাবেস থেকে ডেটা ফেচ করতে ব্যবহার করতে পারেন।

PHP Ajax এর সুবিধা:

1. পেজ রিফ্রেশ ছাড়াই ডেটা লোড করা: Ajax এর মাধ্যমে, সার্ভার থেকে ডেটা লোড বা আপডেট করা হয়, কিন্তু পুরো পেজ রিফ্রেশ হয় না, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
2. ফাস্ট এবং সিম্পল: Ajax এর মাধ্যমে শুধুমাত্র সেই অংশটি লোড করা হয় যা পরিবর্তিত হচ্ছে, পুরো পেজ রিফ্রেশ না করায় এটি দ্রুত এবং কার্যকর।
3. ইন্টারঅ্যাকটিভ ফিচার যোগ করা: PHP Ajax ব্যবহার করে আপনি ওয়েব পেজে ইন্টারঅ্যাকটিভ ফিচার যেমন অনুসন্ধান, ফর্ম ভ্যালিডেশন, ইনস্ট্যান্ট ডেটা আপডেট ইত্যাদি সহজেই যুক্ত করতে পারেন।
4. ব্যবহারকারী অভিজ্ঞতা উন্নত: Ajax এর মাধ্যমে ওয়েব পেজে কোনো প্রকার বিলম্ব বা স্লো নেভিগেশন ছাড়াই দ্রুত ডেটা প্রদর্শন করা সম্ভব, যা ব্যবহারকারী অভিজ্ঞতা উন্নত করে।

PHP Ajax-এর আরো উন্নত ব্যবহার:

1. ফর্ম ভ্যালিডেশন: আপনি Ajax ব্যবহার করে ফর্মের ইনপুট ডেটা পরীক্ষা করতে পারেন। উদাহরণস্বরূপ, ফর্ম সাবমিট করার আগে, Ajax কলের মাধ্যমে ডেটা ভ্যালিডেট করা যায় এবং ত্রুটি বার্তা দেখানো যায়।
2. ডেটাবেস ইন্টারঅ্যাকশন: Ajax এর মাধ্যমে আপনি সার্ভারে ডেটা পাঠাতে এবং সেটি ডাটাবেসে সেভ করতে পারেন। উদাহরণস্বরূপ, PHP এবং MySQL ব্যবহার করে ডেটাবেসে ডেটা ইনসার্ট, আপডেট বা ডিলিট করা।
3. রিয়েল-টাইম ডেটা: Ajax ব্যবহার করে আপনি রিয়েল-টাইম ডেটা যেমন চ্যাট অ্যাপ্লিকেশন বা নোটিফিকেশন সিস্টেম তৈরি করতে পারেন।

সারসংক্ষেপ:

PHP Ajax একটি শক্তিশালী প্রযুক্তি যা PHP এবং Ajax এর সমন্বয়ে ওয়েব অ্যাপ্লিকেশনকে আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। Ajax ব্যবহার করে PHP সার্ভার থেকে ডেটা অ্যাসিঙ্ক্রোনাসভাবে লোড করা যায়, ফলে পেজ রিফ্রেশ ছাড়াই ফিচারগুলি আপডেট হয়। এটি ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে এবং ওয়েব অ্যাপ্লিকেশনকে দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে।

AJAX এমন একটি কৌশল যার মাধ্যমে আপনি একটি ওয়েব পেজ এর সম্পূর্ণ অংশ পুনরায় লোড করা ছাড়াই আপনার কাংখিত অংশকে আপডেট বা পরিবর্তন করতে পারেন। সুতরাং AJAX এর ব্যবহার আপনার ওয়েব পেজকে দ্রুত লোড করে এবং এর ফলে আপনার সাইটের পার্ফরমেন্সও তুলনামূলক অনেক বৃদ্ধি পায়।

AJAX কি?

AJAX এর পূর্ণরূপঃ Asynchronous JavaScript And XML।

ডাইনামিক এবং ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরির জন্য AJAX একটি ওয়েব ডেভেলপমেন্ট কৌশল। AJAX এর ব্যবহার একটি ওয়েব পেজকে অধিক দ্রুত গতির এবং শক্তিশালী করে তুলে।

আপনি AJAX এর সাথে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে আরও আকর্ষণীয় এবং আরও ইন্টারেক্টিভ(interactive) ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।

AJAX ব্যবহত একটি ওয়েব পেজ আপনার অগোচরেই(in the background) ওয়েব সার্ভারের সাথে আসমনিয়তভাবে(asynchronous) ক্ষুদ্র ক্ষুদ্র তথ্য বিনিময় এর মাধ্যমে নিজেকে আপডেট করতে সক্ষম।

অর্থাৎ এটি সম্পূর্ণ ওয়েব পেজকে রিলোড না করেই, ওয়েব পেজের একটি অংশকে আপডেট করতে পারে।

ক্লাসিক ওয়েব পেজ যেগুলোতে AJAX এর ব্যবহার নাই সেই সকল ওয়েব পেজের কোনো ক্ষুদ্র অংশ পরিবর্তন করতে হলেও সম্পূর্ণ ওয়েব পেজ পুনরায় লোড করতে হয়।

সুতরাং আমরা বলতে পারি AJAX এর আবিষ্কার ওয়েব ডেভেলপমেন্টে নতুন এক দিগন্তের সূচনা করেছে।

কিভাবে AJAX কাজ করে?

AJAX ইন্টারনেট স্ট্যান্ডার্ড মেনে চলে

ইন্টারনেট স্ট্যান্ডার্ড এর উপর ভিত্তি করে AJAX এর আবিষ্কার এবং এটি নিম্নোক্ত কম্পোনেন্ট এর সমন্বয়ে গঠিত হয়ঃ

• XMLHttpRequest object - সার্ভারের সাথে অসমনিয়তভাবে(asynchronously) তথ্য বিনিময় করে।
• JavaScript/DOM - ওয়েব পেজকে ডায়নামিক করে তুলে।
• HTML - তথ্য উপস্থাপন করে।
• CSS - তথ্য স্টাইল করে।
• XML - তথ্য স্থানান্তর করে।

AJAX অ্যাপ্লিকেশন প্ল্যাটফর্ম এবং ব্রাউজার হতে স্বাধীন।

AJAX ব্যবহৃত কিছু ওয়েব অ্যাপ্লিকেশনের উদাহরণঃ Gmail, Google, Youtube, Facebook ইত্যাদি।

AJAX সম্মন্ধে আরও জাতে AJAX টিউটোরিয়াল ভিজিট করুন।

অধিক ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে AJAX ব্যবহৃত হয়।

পিএইচপি এবং AJAX এর উদাহরণ

এখন আমরা একটি উদাহরণের সাহায্যে এজ্যাক্স এবং পিএইচপির ব্যবহার দেখবো। এক্ষেত্রে ইনপুট ফিল্ডে অক্ষর টাইপ করার সঙ্গে সঙ্গে AJAX পিএইচপি ফাইল থেকে একগুচ্ছ সাজেশন দেখাবে।

উদাহরণঃ AJAX ব্যবহত এপ্লিকেশনের এইচটিএমএল অংশ

kt_satt_skill_example_id=521

উপরের উদাহরনে ইউজার যখন ইনপুট ফিল্ডে কোনো অক্ষর টাইপ করে তখন showSuggestion() ফাংশনটি সম্পাদিত হয়। এই ফাংশনটি onkeyup ইভেন্টের মাধ্যমে সম্পাদিত হয়।

kt_satt_skill_example_id=523

কোডের ব্যাখ্যাঃ

প্রথমেই আমরা ইনপুট ফিল্ডটি ফাঁকা কিনা string.length == 0 এর মাধ্যমে চেক করে নিব। যদি এটি ফাঁকা হয় তাহলে টেক্সট প্লেসহোল্ডার এর কন্টেন্ট মুছে যায় এবং প্রোগ্রামের নিয়ন্ত্রণ showSuggestion() ফাংশন থেকে বের হয়ে যায়।

অপরদিকে ইনপুট ফিল্ডটি যদি ফাঁকা না হয় সেক্ষেত্রে নিম্নের ঘটনা গুলো ঘটবেঃ

• একটি XMLHttpRequest অবজেক্ট তৈরি করবে।
• কার্যসম্পাদনের জন্য সার্ভার প্রস্তুত হলে এটি একটি ফাংশন তৈরি করবে।
• সার্ভারে অবস্থিত "suggestion.php" ফাইলে তথ্যের জন্য একটি অনুরোধ পাঠাবে।
• লক্ষ্য করুন আমরা "suggestion.php" ফাইলের সাথে একটি প্যারামিটার i যুক্ত করেছি যা সার্ভারে একটি string ভ্যারিয়েবল পাঠায়।
• string ভ্যারিয়েবলটি ইনপুট বক্সের কন্টেন্ট ধারন করে।

পিএইচপি ফাইল

আমরা এই ফাইলটি "suggestion.php" নামে সংরক্ষন করবো।

পিএইচপি ফাইলটি অ্যারের মধ্যে ইনপুট ফিল্ডের নাম/নামসমূহ আছে কিনা চেক করে। মিল খুঁজে পেলে অনুরূপ নামগুলো ব্রাউজারে ফেরত পাঠায়ঃ

kt_satt_skill_example_id=526

ডেটাবেজ এর সাথে ইন্টারেক্টিভ(interactive) এবং ডাইনামিক যোগাযোগ তৈরির জন্য আমরা AJAX ব্যবহার করি। আপনি AJAX ব্যবহার করে ডেটাবেজ টেবিল থেকে সম্পূর্ণ তথ্য কুয়েরি না করে, বরং আপনি ক্ষুদ্র ক্ষুদ্র তথ্য কুয়েরি করতে পারেন।

AJAX এবং MySQL এর উদাহরণ

আমাদের এই উদাহরণে দেখবো, AJAX ব্যবহার করে আমরা কিভাবে আমরা ডেটাবেজ থেকে সম্পূর্ণ তথ্য অ্যাক্সেস না করে ক্ষুদ্র ক্ষুদ্র তথ্য অ্যাক্সেস করতে পারি। উদাহরণের ব্যাখ্যার জন্য আমরা সম্পূর্ণ কোড তিনভাগে ভাগ করেছিঃ এইচটিএমএল কোড, AJAX কোড এবং পিএইচপি কোড।

kt_satt_skill_example_id=530

উপরের উদাহরণে ইউজার যখন ড্রপডাইন তালিকা থেকে একটি বইয়ের নাম সিলেক্ট করবে, তখন showBookDetails() ফাংশনটি সম্পাদিত হবে এবং উক্ত বইয়ের বিস্তারিত তথ্য প্রদর্শিত হবে। onchange ইভেন্ট এর মাধ্যমে এই ফাংশনটি সম্পাদিত হয়।

kt_satt_skill_example_id=531

কোডের ব্যাখ্যাঃ

প্রথমেই আমরা চেক করে নিব ইউজার কোনো বইয়ের নাম সিলেক্ট করেছে কিনা। যদি না করে থাকে তাহলে ফাংশনটি সম্পাদিত হবে না।

অপরদিকে ইউজার যদি কোনো বইয়ের নাম সিলেক্ট করে থাকে তাহলে নিম্নের ঘটনা সমুহ ঘটবেঃ

• একটি XMLHttpRequest অবজেক্ট তৈরি হবে।
• কার্যসম্পাদনের জন্য সার্ভার প্রস্তুত হলে এটি একটি ফাংশন তৈরি করবে।
• সার্ভারে অবস্থিত "bookdetails.php" ফাইলে তথ্যের জন্য অনুরোধ পাঠায়।
• লক্ষ্য করুন আমরা "bookdetails.php" ফাইলের সাথে একটি প্যারামিটার i যুক্ত করেছি যা সার্ভারে একটি string ভ্যারিয়েবল পাঠায়।
• string ভ্যারিয়েবলটি ইনপুট বক্সের কন্টেন্ট ধারন করে।

পিএইচপি ফাইল

উপরের জাভাস্ক্রিপ্ট কোড এর মাধ্যমে এই পিএইচপি ফাইল(bookdetails.php) এর সাথে যোগাযোগ সৃষ্টি করা হয় যা মাইএসকিউএল ডেটাবেজ সার্ভারে একটি কুয়েরি পাঠাবে এবং প্রাপ্ত ফলাফল সমুহ একটি এইচটিএমএল টেবিলের মাধ্যমে প্রদর্শন করানো হবেঃ

kt_satt_skill_example_id=532

কোডের ব্যাখ্যা

জাভাস্ক্রিপ্ট থেকে কুয়েরিটি যখন পিএইচপি ফাইলে পাঠানো হয় তখন নিন্মের ঘটনা সমুহ ঘটেঃ

• AJAX কর্তৃক পাঠানো বইয়ের নাম গ্রহন করবে।
• MySQL সার্ভারের সাথে একটি সংযোগ তৈরি করে।
• AJAX কর্তৃক পাঠানো বইয়ের তথ্য খুজে বের করে।
• একটি এইচটিএমএল টেবিল তৈরি হয় এবং খুঁজে পাওয়া বইয়ের তথ্যসহ ব্রাউজারে প্রদর্শিত হয়।

আমাদের উদাহরণে আমরা নিম্নের এই ডেটাবেজটি ব্যবহার করেছিঃ

ডেটাবেজটি ডাউনলোড করুন।

আপনি উপরের উদাহরণের এইচটিএমএল এবং জাভাস্ক্রিপ্ট কোড গুলোর সমন্বয়ে একটি ফাইল এবং পিএইচপি কোডগুলোর জন্য একটি ফাইল তৈর করে Ajax সম্বলিত এইচটিএমএল ফাইলটি রান করালে বাউজারে নিম্নের ন্যায় ফলাফল দেখবেন।

AJAX (Asynchronous JavaScript and XML) একটি ওয়েব প্রযুক্তি যা ওয়েব পেজকে ব্যবহারকারীর সাথে ইন্টারঅ্যাকটিভভাবে যোগাযোগ করতে সক্ষম করে। AJAX এর মাধ্যমে ওয়েব পেজের কিছু অংশের ডেটা সার্ভারের সাথে যোগাযোগের মাধ্যমে আপডেট করা সম্ভব হয়, যেটি পেজটি রিফ্রেশ না করেই হয়। XML (Extensible Markup Language) হল একটি ডেটা বিনিময়ের ফরম্যাট, যা AJAX এর সাথে ডেটা প্রেরণ এবং গ্রহণ করার জন্য ব্যবহৃত হয়।

এখানে আমরা AJAX XML এর ব্যবহার দেখব এবং দেখব কিভাবে PHP এবং AJAX ব্যবহার করে XML ফাইল থেকে ডেটা নিয়ে ওয়েব পেজে প্রদর্শন করা যায়।

AJAX এবং XML এর মধ্যে সম্পর্ক

AJAX ব্যবহার করে XML ফাইলের সাথে সার্ভারের অদৃশ্য যোগাযোগ করা যায়। সার্ভার থেকে XML ডেটা গ্রহণ করে, JavaScript এর মাধ্যমে তা প্রক্রিয়া করা হয় এবং ওয়েব পেজে প্রদর্শন করা হয়। সাধারণত, XMLHttpRequest অবজেক্ট ব্যবহার করে AJAX রিকোয়েস্ট পাঠানো হয়, এবং সার্ভার থেকে XML ডেটা ফেরত আসলে তা JavaScript দিয়ে প্রসেস করা হয়।

AJAX XML উদাহরণ

এখানে একটি উদাহরণ দেওয়া হলো যেখানে PHP সার্ভার থেকে XML ডেটা নেয় এবং AJAX এর মাধ্যমে ওয়েব পেজে প্রদর্শন করে।

1. PHP স্ক্রিপ্ট (data.php) – XML ডেটা তৈরি করা

এই স্ক্রিপ্টটি XML ডেটা তৈরি করে যা ক্লায়েন্ট সাইডে পাঠানো হবে।

');
  $item1 = $xml->addChild('item');
  $item1->addChild('name', 'John');
  $item1->addChild('age', '28');

  $item2 = $xml->addChild('item');
  $item2->addChild('name', 'Jane');
  $item2->addChild('age', '22');

  // Output the XML
  echo $xml->asXML();
?>

এখানে, SimpleXMLElement ব্যবহার করে একটি XML ডকুমেন্ট তৈরি করা হয়েছে। দুটি item ডাটা তৈরি করা হয়েছে, যেখানে নাম এবং বয়স রয়েছে।

2. HTML এবং JavaScript (index.html) – AJAX রিকোয়েস্ট এবং ডেটা প্রদর্শন

এখানে, JavaScript দিয়ে AJAX রিকোয়েস্ট পাঠানো হবে এবং সার্ভার থেকে প্রাপ্ত XML ডেটা প্রদর্শন করা হবে।

  
  
  


  
AJAX XML Example
  Load Data
  


  

ব্যাখ্যা:

1. XMLHttpRequest: এটি AJAX রিকোয়েস্টের জন্য ব্যবহৃত হয়। এখানে GET মেথড ব্যবহার করা হয়েছে data.php থেকে ডেটা আনার জন্য।
2. xhr.onload: এটি সেই ফাংশন যা সার্ভার থেকে রেসপন্স আসার পর কল হয়। এখানে, আমরা xhr.responseXML ব্যবহার করে XML ডেটা নিয়ে আসছি।
3. getElementsByTagName("item"): এটি XML ডকুমেন্টের মধ্যে সমস্ত item ট্যাগকে নির্বাচন করে। এর মাধ্যমে প্রতিটি item ট্যাগের ভিতরের নাম এবং বয়স পাওয়া যায়।
4. Displaying data: প্রতিটি item এর মধ্যে থাকা name এবং age ডেটা টেনে নিয়ে HTML এ একটি তালিকায় দেখানো হয়।

3. সম্পূর্ণ Flow:

1. HTML পেজে একটি বাটন দেওয়া হয়েছে যেটি ক্লিক করলে AJAX রিকোয়েস্ট প্রেরণ করা হবে।
2. PHP স্ক্রিপ্ট data.php XML ফরম্যাটে ডেটা রিটার্ন করবে।
3. JavaScript কোড সেই XML ডেটা প্রসেস করবে এবং HTML পেজে সেগুলো প্রদর্শন করবে।

AJAX এবং XML এর সুবিধা:

1. Asynchronous Communication: AJAX এর মাধ্যমে ওয়েব পেজের কিছু অংশ আপডেট করা সম্ভব হয়, এবং পেজ পুরোপুরি রিফ্রেশ না করেই ডেটা পরিবর্তন করা যায়।
2. Improved User Experience: সার্ভারের সাথে যোগাযোগ ঘটলেও পেজ রিফ্রেশ হওয়ার প্রয়োজন না থাকায় ইউজারের অভিজ্ঞতা উন্নত হয়।
3. Data in XML Format: XML একটি স্ট্যান্ডার্ড ফরম্যাট যা সিস্টেমের মধ্যে ডেটা বিনিময়ে ব্যবহৃত হয়। এটি প্ল্যাটফর্ম ও প্রোগ্রামিং ভাষার মধ্যে ডেটা এক্সচেঞ্জ সহজ করে।

এই উদাহরণে আমরা দেখলাম কিভাবে PHP এবং AJAX XML ব্যবহার করে ওয়েব পেজে ডাইনামিকভাবে ডেটা প্রদর্শন করা যায়। AJAX এবং XML একসাথে ওয়েব ডেভেলপমেন্টে খুবই শক্তিশালী প্রযুক্তি, যা সার্ভারের সাথে অবিচ্ছিন্ন যোগাযোগ করতে সক্ষম এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে।

AJAX ব্যবহার করে আপনি ইউজারদের জন্য অধিক বন্ধুসুলভ এবং ইন্টারেক্টিভ অনুসন্ধান ওয়েব এপ্লিকেশন তৈরি করতে পারেন।

AJAX ব্যবহার করে সরাসরি অনুসন্ধান

টিউটরিয়ালের এই পর্যায়ে আমরা আপনাকে দেখাবো কিভাবে আপনি আমাদের ওয়েব-সাইটের টিউটোরিয়ালসমূহ সরাসরি সার্চ করে খুঁজে পাবেন।

এক্ষেত্রেও আমরা পূর্বের ন্যায় কোডসমূহকে তিন ভাগে বিভক্ত করবোঃ এইচটিএমএল কোড, জাভাস্ক্রিপ্ট(AJAX) কোড এবং পিএইচপি কোড এবং তথ্য স্টোর বা বিনিময় এর জন্য একটি XML ফাইল ব্যবহার করবো। সুতরাং দেরি না করে চলুন কোডিং করা শুরু করি।

kt_satt_skill_example_id=533

উপরের উদাহরণে ইউজার যখন ইনপুট বক্সে কোন অক্ষর টাইপ করবে, তখন showlink() ফাংশনটি সম্পাদিত হবে এবং ইনপুটকৃত অক্ষর দিয়ে শুরু সকল লিংক টাইটেল এর সাজেশন ড্রপ ডাউন আকারে দেখাবে। onkeyup ইভেন্ট এর মাধ্যমে এই ফাংশনটি সম্পাদিত হয়।

kt_satt_skill_example_id=534

কোডের ব্যাখ্যাঃ

প্রথমেই আমরা ইনপুট ফিল্ডটি ফাঁকা কিনা string.length == 0 এর মাধ্যমে চেক করে নিব। যদি এটি ফাঁকা হয় তাহলে টেক্সট প্লেসহোল্ডার এর কন্টেন্ট মুছে যায় এবং প্রোগ্রামের নিয়ন্ত্রণ showSuggestion() ফাংশন থেকে বের হয়ে যায়।

অপরদিকে ইনপুট ফিল্ডটি যদি ফাঁকা না হয় সেক্ষেত্রে নিম্নের ঘটনা গুলো ঘটবেঃ

• একটি XMLHttpRequest অবজেক্ট তৈরি করবে।
• কার্যসম্পাদনের জন্য সার্ভার প্রস্তুত হলে এটি একটি ফাংশন তৈরি করবে।
• সার্ভারে অবস্থিত "searchResult.php" ফাইলে তথ্যের জন্য একটি অনুরোধ পাঠাবে।
• লক্ষ্য করুন আমরা "searchResult.php" ফাইলের সাথে একটি প্যারামিটার p যুক্ত করেছি যা সার্ভারে একটি string ভ্যারিয়েবল পাঠায়।
• string ভ্যারিয়েবলটি ইনপুট বক্সের কন্টেন্ট ধারন করে।

পিএইচপি ফাইল

উপরের জাভাস্ক্রিপ্ট কোড এর মাধ্যমে এই পিএইচপি ফাইল(searchResult.php) এর সাথে যোগাযোগ সৃষ্টি করা হয়।

"searchResult.php" ফাইলের সোর্স কোড ইনপুট বক্সের স্ট্রিং এর সাপেক্ষে XML ফাইলে লিংক টাই্টেল এর জন্য একটি কুয়েরি পাঠায় এবং অনুসন্ধানকৃত স্ট্রিং এর সাথে মিল সম্পন্ন সকল টাইটেল ব্রাউজারে ফেরত পাঠায়ঃ

kt_satt_skill_example_id=535

কোডের ব্যাখ্যা

জাভাস্ক্রিপ্ট(AJAX) থেকে কুয়েরিটি যখন পিএইচপি ফাইলে পাঠানো হয় তখন নিম্নের ঘটনাসমুহ ঘটেঃ

• AJAX কর্তৃক পাঠানো প্যারামিটার গ্রহন করে।
• একটি XML ডোম(DOM) অবজেক্ট তৈরি করে
• সকল