এজেএক্স কীভাবে কাজ করে?


87

এজেএক্সের সার কী? উদাহরণস্বরূপ, আমি আমার পৃষ্ঠায় একটি লিঙ্ক রাখতে চাই যে যখন কোনও ব্যবহারকারী এই লিঙ্কটি ক্লিক করেন, বর্তমান পৃষ্ঠাটি পুনরায় লোড না করে কিছু তথ্য আমার সার্ভারে প্রেরণ করা হবে। এটা কি এজেএক্স?

আইসফ্রেম ব্যবহার করে আমি এই আচরণটি করতে সক্ষম হয়েছি। আরও বিশদে আমি একটি লিঙ্ক রেখেছি (একটি ছোট চিত্রটি বলি) একটি ছোট আইসফ্রেমে। যখন ব্যবহারকারী এই লিঙ্কটি ক্লিক করেন ব্রাউজারটি কেবল আইফ্রেমে পৃষ্ঠাটি পুনরায় লোড করে।

তবে আমি মনে করি এটি লক্ষ্যে পৌঁছানোর মতো মার্জিত উপায় নয়। আমার মনে হয় আমাকে এজেএক্স ব্যবহার করতে হবে। এটা কিভাবে কাজ করে? এক্সএইচটিএমএল এর ব্যবহার বিবেচিত সমস্যাটিকে মার্জিত উপায়ে সমাধান করতে পারে? নাকি আমার জাভাস্ক্রিপ্ট ব্যবহার করা দরকার?

আমার খুব বেশি দরকার নেই। আমি কেবল একটি ছোট লিঙ্ক রাখতে চাই যা (ক্লিক করার পরে) সার্ভারে কিছু তথ্য প্রেরণ করেছে। ধরুন আমার কাছে একটি বার্তার কাছে একটি "তারা-চিত্র" রয়েছে। যদি কোনও তারকা তারে ক্লিক করেন (তিনি / তিনি বার্তা পছন্দ করেন) তারার রঙ এবং আমার সার্ভার আপডেট ডাটাবেস পরিবর্তন করে (মনে রাখবেন যে ব্যবহারকারী বার্তাটি পছন্দ করে)।


8
উইকিপিডিয়ায় বাধ্যতামূলক লিঙ্ক: en.wikedia.org/wiki/Ajax_( প্রোগ্রামিং)
জন বি

উত্তরের জন্য দয়া করে লিঙ্কটি দেখুন: w3schools.com/php/php_ajax_intro.asp

উত্তর:


121

আপনি সম্পূর্ণই Ajax (যা অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এবং XML ঘোরা) এর নতুন, AJAX এর উইকিপিডিয়ায় এন্ট্রি একটি ভাল শুরু হল:

ডিএইচটিএমএল এবং ল্যাম্পের মতো, এজেএক্স নিজেই কোনও প্রযুক্তি নয়, বরং একদল প্রযুক্তির। এজেএক্স এর সংমিশ্রণটি ব্যবহার করে:

  • তথ্য চিহ্নিতকরণ এবং স্টাইলিং করার জন্য এইচটিএমএল এবং সিএসএস।
  • ডিওএম জাভাস্ক্রিপ্টের সাহায্যে উপস্থাপিত তথ্যকে গতিশীলভাবে প্রদর্শন এবং যোগাযোগের জন্য অ্যাক্সেস করেছে।
  • ব্রাউজার এবং সার্ভারের মধ্যে অ্যাসিঙ্ক্রোনালি ডেটা বিনিময় করার একটি পদ্ধতি, যার ফলে পৃষ্ঠা পুনরায় লোডগুলি এড়ানো হবে। এক্সএমএলএইচটিপিআরকোয়েস্ট (এক্সএইচআর) অবজেক্টটি সাধারণত ব্যবহৃত হয়, তবে কখনও কখনও আইফ্রেম অবজেক্ট বা ডায়নামিকালি যুক্ত ট্যাগ ব্যবহার করা হয়।
  • ব্রাউজারে প্রেরিত ডেটার জন্য একটি ফর্ম্যাট। সাধারণ ফর্ম্যাটগুলির মধ্যে রয়েছে এক্সএমএল, প্রাক-ফর্ম্যাটযুক্ত এইচটিএমএল, সরল পাঠ্য এবং জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন (জেএসএন)। এই ডেটাটি সার্ভার-সাইড স্ক্রিপ্টিংয়ের কিছু ফর্মের মাধ্যমে গতিময়ভাবে তৈরি করা যেতে পারে।

যেমন আপনি দেখতে পাচ্ছেন, খাঁটি প্রযুক্তিগত দৃষ্টিকোণ থেকে এখানে আসলে নতুন কিছু নেই। এজেএক্সের বেশিরভাগ অংশ ১৯৯৪ সালে ( XMLHttpRequestবস্তুর জন্য 1999 ) ইতিমধ্যে ছিল । আসল অভিনবত্বটি হ'ল এই অংশগুলি একসাথে ব্যবহার করা যেমন গুগল জিমেইল (2004) এবং গুগল ম্যাপস (2005) এর সাথে করেছিল। প্রকৃতপক্ষে, উভয় সাইটই এজেএক্সের প্রচারে ব্যাপক অবদান রেখেছিল।

চিত্রটির নীচে এক হাজার শুল্কের মূল্য রয়েছে যা ক্লায়েন্ট এবং রিমোট সার্ভারের মধ্যে যোগাযোগের পাশাপাশি ক্লাসিক এবং এজেএক্স-চালিত অ্যাপ্লিকেশনগুলির মধ্যে পার্থক্যকে চিত্রিত করে:

বিকল্প পাঠ

কমলা অংশের জন্য, আপনি হাত দিয়ে সবকিছু করতে পারেন ( XMLHttpRequestবস্তুর সাথে) বা আপনি jQuery , প্রোটোটাইপ , YUI , ইত্যাদির মতো বিখ্যাত জাভাস্ক্রিপ্ট লাইব্রেরি আপনার অ্যাপ্লিকেশনটির ক্লায়েন্ট-সাইড "AJAXify" করতে ব্যবহার করতে পারেন । এই জাতীয় গ্রন্থাগারগুলির লক্ষ্য জাভাস্ক্রিপ্ট বিকাশের জটিলতা (যেমন ক্রস ব্রাউজারের সামঞ্জস্যতা) আড়াল করা but তবে এটি কোনও সাধারণ বৈশিষ্ট্যের জন্য ওভারকিল হতে পারে।

সার্ভার সাইড উপর, কিছু অবকাঠামো খুব সাহায্য করতে পারেন (যেমন DWR বা RAJAX আপনি জাভা ব্যবহার করা হয় তবে হয়), কিন্তু সমস্ত আপনাকে যা করতে হবে মূলত আছে (প্রথমে এক্সএমএল হিসাবে একটি সেবা এক্সপোজ করতে যে আয় শুধুমাত্র পৃষ্ঠার আপডেট আংশিকভাবে করা প্রয়োজন তথ্য / এক্সএইচটিএমএল - এজ্যাক্সের এক্স - তবে আজকাল জেএসএন প্রায়শই পছন্দ করা হয়)।


17

এজেএক্সের সারমর্মটি হ'ল:

আপনার পৃষ্ঠাগুলি ওয়েব ব্রাউজ করতে এবং ব্যবহারকারীর অন্যান্য জিনিসগুলি করার সময় তাদের নিজস্ব সামগ্রী আপডেট করতে পারে

এটি হ'ল, আপনার জাভাস্ক্রিপ্ট অ্যাসিনক্রোনাস জিইটি এবং পোষ্ট অনুরোধগুলি (সাধারণত কোনও XMLHttpRequestবস্তুর মাধ্যমে ) প্রেরণ করতে পারে তার পৃষ্ঠাগুলি সংশোধন করতে ( ডকুমেন্ট অবজেক্ট মডেল ম্যানিপুলেশনের মাধ্যমে ) সেই অনুরোধগুলির ফলাফলগুলি ব্যবহার করতে পারে ।


আপনি যেই উদাহরণটি অফ হ্যান্ড সম্পর্কে ভাবতে পারেন যেখানে আমি এই "তাদের নিজের উপর আপডেট" দেখতে পাচ্ছি?
ড্যানিয়েল স্প্রিঞ্জার

17

AJAX সাধারণত পুরো পৃষ্ঠাটি পুনরায় লোড না করে ক্লায়েন্ট থেকে সার্ভারে HTTP অনুরোধগুলি প্রেরণ এবং সার্ভারের প্রতিক্রিয়া প্রক্রিয়াকরণের সাথে জড়িত। (অ্যাসিনক্রোনাসলি)

জাভাস্ক্রিপ্ট সাধারণত জমা দেয় এবং সার্ভার থেকে ডেটা প্রতিক্রিয়া গ্রহণ করে (প্রচলিতভাবে এক্সএমএল, প্রায়শই অন্যান্য কম ভার্বোস ফর্ম্যাটগুলি জেএসএন এর মতো)

জাভাস্ক্রিপ্টটি ব্যবহারকারীর দৃষ্টিভঙ্গি আপডেট করার জন্য ডোনামিকভাবে পৃষ্ঠাটি ডম আপডেট করতে পারে।

এভাবে 'অ্যাসিক্রোনাস জাভাস্ক্রিপ্ট এবং এক্সএমএল'।

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


আমি এই উত্তর পছন্দ। @ ভার্টেক্স যা আপনাকে জানতে হবে তা XMLHttpRequest সম্পর্কে।
enguerran

13

অ্যাজাক্স পৃষ্ঠার কেবল একটি অংশ পুনরায় লোড করার চেয়ে বেশি। আজাক্স অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এবং এক্সএমএল জন্য দাঁড়িয়েছে।

এজ্যাক্সের কেবলমাত্র আপনার প্রয়োজন অংশটি জাভাস্ক্রিপ্টের XMLHttpRequest অবজেক্ট। আপনার এইচটিএমএলের ছোট অংশটি ডিভি বা অন্য কোনও ট্যাগ হিসাবে লোড করতে এবং পুনরায় লোড করতে আপনাকে এটি ব্যবহার করতে হবে।

এটা পড়ুন উদাহরণটি এবং আপনি যত তাড়াতাড়ি ভেবে দেখবেন আপনি তত তাড়াতাড়ি হয়ে উঠবেন!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

4
AJAX নামটি সত্ত্বেও এক্সএমএল প্রয়োজন হয় না, তবে শব্দ / সংক্ষিপ্ত শব্দ AJAX এর এক্সটি এক্সএমএলকে বোঝায় কারণ icallyতিহাসিকভাবে এটি সার্ভার এবং ক্লায়েন্টের মধ্যে যোগাযোগের উপায়।
enguerran

5

AJAX এর অর্থ আসিনক্রোনাস জাভাস্ক্রিপ্ট এবং এক্সএমএল। AJAX সার্ভারে পুরো পৃষ্ঠাটি পোস্ট না করেই পৃষ্ঠাগুলিতে আংশিক আপডেটগুলি সমর্থন করে।

এজেএক্সের জন্য প্রচুর বিকল্প রয়েছে। দুটি উল্লেখযোগ্য (তর্কযোগ্যভাবে) হ'ল মাইক্রোসফ্টের এএসপি.নেট এজেএক্স (পূর্বে অ্যাটলাস) এবং জিকুয়েরি।

আপনি যদি ইতিমধ্যে এএসপি.নেটের সাথে পরিচিত হন তবে এএসপি.নেট এজেএক্স সেটআপ করা তুলনামূলক সহজ। আপনি যদি ইতিমধ্যে জাভাস্ক্রিপ্টটি জেনে থাকেন এবং আপনার পৃষ্ঠাটি অনুসন্ধান এবং আপডেট করার উপর খুব দানাদার নিয়ন্ত্রণের অনুমতি দেয় তবে jQuery ভাল good

এইচটিএইচ


2

আপনি যদি আগ্রহী হন তবে আইবিএমের আজাক্সে একটি 10 ​​(সম্ভবত আরও বেশি) পার্ট সিরিজ রয়েছে: মাস্টারিং এজাক্স পার্ট 1

যদিও কয়েক বছর বয়সী এখন এটি একটি ভাল পরিচয়, (এমনকি যদি আপনি কেবল প্রথম অংশটি পড়ে থাকেন!)

আমি মনে করি পুরো সিরিজটি এখানে তালিকাবদ্ধ করা উচিত , যদিও এই মুহুর্তে সাইটটি আমার জন্য কিছুটা ধীর হয়ে গেছে ...

সারসংক্ষেপ:

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


1

এটি আজাক্স। আপনি জাভাস্ক্রিপ্ট ছাড়া এজ্যাক্স ব্যবহার করতে পারবেন না। ব্যবহারের ধারণা পেতে আপনার jquery এবং প্রোটোটাইপ উদাহরণগুলি দেখতে হবে।


কিছু সূত্র মতে আপনি ভিবিএস স্ক্রিপ্টের সাহায্যে এজেএক্স করতে পারেন। যদিও এটি করার কোনও ভাল কারণ নেই। :-)
নোসারেডা

না, আপনি পারবেন না। আপনি ভিবিএস স্ক্রিপ্ট দিয়ে AVAX করতে পারেন।
স্টিফান কেন্ডাল

6
হি। শুনেছি AJAX হ'ল অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এবং এক্সএমএল। এটি async হতে হবে না, এটি জাভাস্ক্রিপ্ট হতে হবে না, এবং এটি এক্সএমএল হতে হবে না।
নসরেডনা

0

আপনি যা করার চেষ্টা করছেন তা প্রযুক্তিগতভাবে অজ্যাক্স। অ্যাজাক্স একটি পৃষ্ঠার বিভাগগুলি আপডেট করতে এক্সএইচটিএমএল খণ্ড লেনদেন তৈরি করে। জাভাস্ক্রিপ্ট এগুলি পেতে অনুরোধগুলি সুন্দর এবং ঝরঝরে করে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.