Ajax এ কিভাবে প্রোগ্রাম করবেন (ছবি সহ)

সুচিপত্র:

Ajax এ কিভাবে প্রোগ্রাম করবেন (ছবি সহ)
Ajax এ কিভাবে প্রোগ্রাম করবেন (ছবি সহ)

ভিডিও: Ajax এ কিভাবে প্রোগ্রাম করবেন (ছবি সহ)

ভিডিও: Ajax এ কিভাবে প্রোগ্রাম করবেন (ছবি সহ)
ভিডিও: কী-বোর্ড পরিচিতি ও ব্যবহার | Computer Keyboard Tricks | Computer tips and tricks By ICT BARI 2024, এপ্রিল
Anonim

AJAX বা Ajax হল অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এবং XML। এটি সার্ভারের সাথে ডেটা আদান -প্রদান এবং ক্লায়েন্ট সাইডে পুরো ওয়েবপেজ পুনরায় লোড না করে ওয়েবপেজের একটি অংশ আপডেট করার জন্য ব্যবহৃত হয়। ডেটা আদান -প্রদান এবং আপডেট করার সময় বিদ্যমান ওয়েবপৃষ্ঠার প্রদর্শন এবং আচরণ মোটেও হস্তক্ষেপ করে না। এজাক্সকে এমন একটি প্রযুক্তির গ্রুপও মনে করা হয় যার HTML, CSS, DOM এবং জাভাস্ক্রিপ্ট রয়েছে যা ব্যবহার করা হয় মার্ক -আপ, স্টাইল এবং ব্যবহারকারীকে ওয়েবপৃষ্ঠার তথ্যের সাথে যোগাযোগ করতে। এই নিবন্ধে, এটি আপনাকে দেখাবে কিভাবে নোটপ্যাড ++ ব্যবহার করে ধাপে ধাপে Ajax ধাপে একটি সহজ প্রোগ্রাম লিখতে হয়। HTML, DOM, JavaScript, এবং একটি স্থানীয় ওয়েব সার্ভার বা দূরবর্তী ওয়েব সার্ভারের কিছু প্রাথমিক জ্ঞান প্রয়োজন। WampServer এই নিবন্ধে একটি পরীক্ষার জন্য ব্যবহার করা হয়।

ধাপ

2 এর পদ্ধতি 1: কোডিং

3929304 1
3929304 1

পদক্ষেপ 1. একটি Ajax প্রোগ্রাম লেখার জন্য একটি ছবি প্রস্তুত করুন।

ছবিটি একই ফোল্ডারে সংরক্ষণ করুন যেখানে আপনি আপনার HTML এবং টেক্সট ফাইলগুলি Ajax প্রোগ্রাম প্রদর্শন করে সংরক্ষণ করবেন। এই নিবন্ধে, "ProgramInAjax" ডিরেক্টরিটি "wamp" ফোল্ডারের ভিতরে "www" ডিরেক্টরিের অধীনে সেট করা আছে যেখানে আপনি WampServer ইনস্টল করেছেন।

3929304 2
3929304 2

ধাপ 2. যে কোন টেক্সট এডিটর খুলুন।

নোটপ্যাড ++ এই নিবন্ধে পাঠ্য সম্পাদক হিসাবে ব্যবহৃত হয়।

3929304 3
3929304 3

পদক্ষেপ 3. টেক্সট এডিটরে একটি নতুন ফাইল তৈরি করুন।

নিম্নলিখিত টাইপ করুন:


ওহ ওহ! হলুদ ফুল কোথায় গেল?

আপনি html ট্যাগের ভিতরে যা খুশি টাইপ করতে পারেন।

3929304 4
3929304 4

ধাপ 4. ফাইলটিকে একটি টেক্সট ডকুমেন্ট হিসেবে “ajax-data.txt” নামে সেভ করুন।

” প্রকৃতপক্ষে, আপনি যা চান ফাইলের নাম দিতে পারেন কিন্তু নিশ্চিত করুন যে আপনি এই লাইনের কোডিংয়ে একই ফাইলের নাম লিখছেন:

xmlhttp.open ("GET", "ajax-data.txt", সত্য);

যাইহোক, এইচটিএমএল ট্যাগ হেডারের জন্য ব্যবহৃত হয় যাতে এটি বড় এবং আরও অদৃশ্য দেখায়।

3929304 5
3929304 5

পদক্ষেপ 5. একটি ওয়েবপৃষ্ঠার জন্য একটি নতুন ফাইল তৈরি করুন।

এই ফাইলটি একটি HTML ফাইলের জন্য একটি ওয়েব ব্রাউজারে Ajax প্রোগ্রাম দেখার জন্য।

3929304 6
3929304 6

ধাপ 6. নিম্নলিখিত কোডটি অনুলিপি করুন:

  আমার প্রথম অ্যাজাক্স প্রোগ্রাম আমার দ্বারা নিচে Ajax কোড দিন।  


ফুল অদৃশ্য করতে নীচের বোতামটি ক্লিক করুন।

3929304 7
3929304 7

ধাপ 7. ফাইলটি সংরক্ষণ করুন।

মেনু বারে সেভ বাটনে ক্লিক করুন। একটি "সংরক্ষণ করুন" বাক্স খোলা আছে আপনার নথির জন্য একটি নাম লিখুন। এই নিবন্ধে, ফাইলের নাম "সূচক"।

3929304 8
3929304 8

ধাপ 8. ফাইল এক্সটেনশন নির্বাচন করতে ড্রপ ডাউন তীর ক্লিক করুন।

"টাইপ হিসাবে সংরক্ষণ করুন" ক্ষেত্রটিতে, ফাইল এক্সটেনশনটি চয়ন করতে ড্রপ ডাউন তীরটি ক্লিক করুন।

3929304 9
3929304 9

ধাপ 9. “হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ ফাইল” নির্বাচন করুন।

” নিশ্চিত করুন যে এটি বন্ধনীতে "html" আছে। "এইচটিএমএল" নির্বাচন করার পরে সংরক্ষণ ক্লিক করুন।

3929304 10
3929304 10

ধাপ 10. একটি ওয়েব ব্রাউজারে HTML ফাইলটি পরীক্ষা করুন।

একটি ওয়েব ব্রাউজারে ওয়েবপেজটি খুলুন। উপরের মেনু বারে "রান" এ যান। এটিতে ক্লিক করুন এবং "ক্রোমে চালু করুন" বা আপনার সিস্টেমে ইনস্টল করা কোনও ব্রাউজার নির্বাচন করুন। এই নিবন্ধে পরীক্ষার জন্য গুগল ক্রোম ব্যবহার করা হয়েছে। আপনার নোটপ্যাড ++ এর মধ্যে অন্য কিছু ব্রাউজার ইনস্টল করা থাকতে পারে। আপনি আপনার পছন্দের ব্রাউজার নির্বাচন করতে পারেন। আরেকটি বিকল্প, আপনি স্ক্রিনের নীচে টাস্কবারগুলিতে WampServer আইকনে ক্লিক করতে পারেন এবং "লোকালহোস্ট" নির্বাচন করতে পারেন। আপনার সেখানে আপনার ডিরেক্টরি দেখা উচিত এবং সূচী ফাইলটিতে ক্লিক করুন।

ধাপ 11. স্ক্রিপ্টটি পরীক্ষা করতে ছবির নীচের বোতামটি ক্লিক করুন।

3929304 12
3929304 12

ধাপ 12. আপনার চূড়ান্ত ওয়েবপেজ।

আপনার ওয়েবপেজটি সেই তথ্য দিয়ে রিফ্রেশ করা উচিত যা আপনি শুরুতে পাঠ্য ফাইলে প্রবেশ করেছিলেন। ফুল এবং শিরোনামটি নতুন হেডার দিয়ে প্রতিস্থাপিত হওয়া উচিত "ওহ ওহ! হলুদ ফুল কোথায় গেল?"

2 এর পদ্ধতি 2: কোড ব্যাখ্যা

3929304 13
3929304 13

ধাপ 1. শরীরের বিভাগ।

এইচটিএমএলের মূল অংশে "ডিভ" বিভাগ এবং একটি বোতাম রয়েছে। এই বিভাগটি সার্ভার থেকে ফিরে আসা তথ্য প্রদর্শন করতে ব্যবহার করা হবে। বোতামটি ক্লিক করা হলে "loadXMLDoc ()" নামে একটি ফাংশন কল করে।

   আমার প্রথম অ্যাজাক্স প্রোগ্রাম আমার দ্বারা   একটি ছবি এখানে Ajax প্রোগ্রাম পরীক্ষা করতে যায়।

ফুল অদৃশ্য করতে নীচের বোতামটি ক্লিক করুন।

একটি বোতাম এখানে যায়

3929304 14
3929304 14

ধাপ 2. প্রধান বিভাগ।

এইচটিএমএল ফাইলের প্রধান বিভাগে একটি স্ক্রিপ্ট ট্যাগ রয়েছে যার মধ্যে রয়েছে “loadXMLDoc ()” ফাংশন।

 আমার প্রথম অ্যাজাক্স প্রোগ্রাম আমার দ্বারা নিচে Ajax কোড দিন। 

ধাপ 3. আরো ব্যাখ্যা।

Ajax এর সবচেয়ে গুরুত্বপূর্ণ বিষয় হল XMLHttpRequest অবজেক্ট। এটি সার্ভারের সাথে ডেটা বিনিময় করতে ব্যবহৃত হয় এবং সমস্ত আধুনিক ব্রাউজার বস্তুকে সমর্থন করে।

  • একটি XMLHttpRequest () বস্তু তৈরির সিনট্যাক্স পরিবর্তনশীল = নতুন XMLHttpRequest (); কিন্তু একই সাথে ইন্টারনেট এক্সপ্লোরার (IE5 এবং IE6) এর পুরনো সংস্করণ তৈরির সিনট্যাক্স যা একটি ActiveX বস্তু ব্যবহার করে তা হল পরিবর্তনশীল = নতুন ActiveXObject ("Microsoft. XMLHTTP");
  • সমস্ত আধুনিক ব্রাউজারগুলি পরিচালনা করার জন্য, ব্রাউজারগুলি XMLHttpRequest অবজেক্ট সমর্থন করে কিনা তা পরীক্ষা করা দরকার। যদি এটি হয়, এটি একটি XMLHttpRequest বস্তু তৈরি করে। যদি কেউ তা না করে তবে এটি তার জন্য একটি ActiveX বস্তু তৈরি করবে।
  • তারপর এটি সার্ভারে একটি অনুরোধ পাঠাবে। XMLHttpRequest অবজেক্টের পদ্ধতি "open ()" এবং "send ()" ব্যবহার করা হবে। xmlhttp.open ("GET", "ajax_info.txt", সত্য); xmlhttp.send ();।

পরামর্শ

  • ফলাফলের পূর্বরূপ দেখার আরেকটি বিকল্প, আপনি আপনার পছন্দের ব্রাউজারটি খুলতে পারেন এবং ওয়েব এড্রেস বারে "লোকালহোস্ট/প্রোগ্রামইনজ্যাক্স" টাইপ করতে পারেন। আপনি যদি আপনার HTML ফাইলের নাম "index.html" রাখেন তাহলে আপনি ওয়েবপেজটি দেখতে সক্ষম হবেন।
  • আপনার কাজের সময় আপনার এইচটিএমএল ফাইলটি প্রায়শই সংরক্ষণ করুন। উইন্ডো ব্যবহারকারীদের জন্য একই সময়ে Ctrl এবং S চাপলে আরো সময় বাঁচবে।
  • আপনার সংরক্ষিত এইচটিএমএল ফাইলটি একই স্থানে যুক্ত করতে ভুলবেন না যেখানে আপনার ইমেজ এবং ডেটা টেক্সট ফাইল রয়েছে।
  • যখন আপনি একটি ফাইলের নাম রাখেন, এটি একটি কেস সংবেদনশীল যখন আপনি সেই নামগুলি কোডে যুক্ত করেন। উদাহরণস্বরূপ, "myImage" "MyImage" বা "myimage" থেকে আলাদা।

প্রস্তাবিত: