AJAX कैसे काम करता है?


87

AJAX का सार क्या है? उदाहरण के लिए, मैं अपने पेज पर एक लिंक रखना चाहता हूं जैसे कि जब कोई उपयोगकर्ता इस लिंक पर क्लिक करता है, तो कुछ जानकारी मेरे सर्वर पर वर्तमान पृष्ठ को फिर से लोड किए बिना भेजी जाती है। क्या यह AJAX है?

मैं इस व्यवहार को isoframes का उपयोग करके प्राप्त करने में सक्षम था। अधिक विवरण में मैंने एक छोटे से आइसोफ्रेम में एक लिंक (एक छोटी छवि कहते हैं) डाल दिया। जब उपयोगकर्ता इस लिंक पर क्लिक करता है तो ब्राउज़र केवल उस पृष्ठ को इसोफ़्रेम में पुनः लोड करता है।

हालांकि, मुझे लगता है कि यह लक्ष्य तक पहुंचने का एक सुंदर तरीका नहीं है। मुझे लगता है कि मुझे AJAX का उपयोग करना होगा। यह कैसे काम करता है? क्या एक्सएचटीएमएल का उपयोग सुरुचिपूर्ण तरीके से मानी गई समस्या को हल कर सकता है? या मुझे JavaScripts का उपयोग करने की आवश्यकता है?

मुझे ज्यादा जरूरत नहीं है। मैं बस एक छोटा लिंक चाहता हूं, जो (क्लिक करने के बाद) सर्वर को कुछ जानकारी भेजे। मान लें कि मेरे पास एक संदेश के पास "स्टार-छवि" है। यदि कोई उपयोगकर्ता स्टार पर क्लिक करता है (वह / वह संदेश पसंद करता है) स्टार रंग बदलता है और मेरा सर्वर अपडेट डेटाबेस (यह याद रखना कि उपयोगकर्ता संदेश पसंद करता है)।


8
विकिपीडिया की अनिवार्य लिंक: en.wikipedia.org/wiki/Ajax_(programming)
जॉन बी

उत्तर के लिए कृपया लिंक पर जाएँ: w3schools.com/php/php_ajax_intro.asp

जवाबों:


121

यदि आप AJAX के लिए पूरी तरह से नए हैं (जो अतुल्यकालिक जावास्क्रिप्ट और XML के लिए खड़ा है), विकिपीडिया पर AJAX प्रविष्टि एक अच्छा प्रारंभिक बिंदु है:

DHTML और LAMP की तरह, AJAX अपने आप में एक तकनीक नहीं है, बल्कि प्रौद्योगिकियों का एक समूह है। AJAX इसके संयोजन का उपयोग करता है:

  • HTML और CSS जानकारी को चिह्नित करने और स्टाइल करने के लिए।
  • DOM, गतिशील रूप से प्रदर्शित करने और प्रस्तुत की गई जानकारी के साथ सहभागिता करने के लिए जावास्क्रिप्ट के साथ एक्सेस करता है।
  • ब्राउज़र और सर्वर के बीच एसिंक्रोनस रूप से डेटा के आदान-प्रदान के लिए एक विधि, जिससे पेज पुनः लोड से बचा जाता है। XMLHttpRequest (XHR) ऑब्जेक्ट का उपयोग आमतौर पर किया जाता है, लेकिन कभी-कभी एक IFrame ऑब्जेक्ट या डायनामिक रूप से जोड़ा गया टैग इसके बजाय उपयोग किया जाता है।
  • ब्राउज़र को भेजे गए डेटा का एक प्रारूप। सामान्य स्वरूपों में XML, पूर्व-स्वरूपित HTML, सादा पाठ और जावास्क्रिप्ट ऑब्जेक्ट संकेतन (JSON) शामिल हैं। सर्वर-साइड स्क्रिप्टिंग के कुछ रूप से यह डेटा गतिशील रूप से बनाया जा सकता है।

जैसा कि आप देख सकते हैं, एक शुद्ध तकनीकी दृष्टिकोण से, वास्तव में यहां कुछ भी नया नहीं है। AJAX के अधिकांश भाग पहले से ही 1994 में ( XMLHttpRequestवस्तु के लिए 1999 ) थे। वास्तविक नवीनता इन भागों का एक साथ उपयोग करना था जैसा कि Google ने GMail (2004) और Google मैप्स (2005) के साथ किया था। दरअसल, AJAX के प्रचार में दोनों साइटों ने भारी योगदान दिया।

एक चित्र एक हजार शब्दों के लायक होने के कारण, एक चित्र के नीचे जो क्लाइंट और रिमोट सर्वर के बीच संचार को दिखाता है, साथ ही क्लासिक और AJAX द्वारा संचालित अनुप्रयोगों के बीच अंतर:

वैकल्पिक शब्द

नारंगी भाग के लिए, आप हाथ से ( XMLHttpRequestवस्तु के साथ ) सब कुछ कर सकते हैं या आप अपने एप्लिकेशन के क्लाइंट-साइड को "AJAX" करने के लिए jQuery , प्रोटोटाइप , YUI , आदि जैसे प्रसिद्ध जावास्क्रिप्ट पुस्तकालयों का उपयोग कर सकते हैं । इस तरह के पुस्तकालयों का उद्देश्य जावास्क्रिप्ट विकास (जैसे क्रॉस-ब्राउज़र संगतता) की जटिलता को छिपाना है, लेकिन एक साधारण सुविधा के लिए ओवरकिल हो सकता है।

सर्वर-साइड पर, कुछ फ्रेमवर्क भी मदद कर सकते हैं (जैसे DWR या RAJAX यदि आप जावा का उपयोग कर रहे हैं), लेकिन आपको मूल रूप से एक सेवा को उजागर करने के लिए मूल रूप से पृष्ठ को अपडेट करने के लिए केवल आवश्यक informations की वापसी करनी है (शुरुआत में XML के रूप में) / XHTML - AJAX में एक्स - लेकिन JSON को आजकल पसंद किया जाता है)।


17

AJAX का सार यह है:

आपके पृष्ठ वेब ब्राउज़ कर सकते हैं और अपनी सामग्री को अपडेट कर सकते हैं, जबकि उपयोगकर्ता अन्य काम कर रहा है

यही है, आपकी जावास्क्रिप्ट अतुल्यकालिक GET और POST अनुरोध भेज सकती है (आमतौर पर किसी XMLHttpRequestवस्तु के माध्यम से ) तो उन अनुरोधों के परिणामों का उपयोग करके इसके पृष्ठ को संशोधित करें ( दस्तावेज़ ऑब्जेक्ट मॉडल हेरफेर के माध्यम से )।


किसी भी उदाहरण से आप सोच सकते हैं कि मैं कार्रवाई में "अपने दम पर अपडेट" कैसे देख सकता हूं?
डैनियल स्प्रिंगर

17

AJAX में आम तौर पर क्लाइंट से सर्वर पर HTTP अनुरोध भेजने और सर्वर की प्रतिक्रिया को संसाधित करने के लिए पूरे पृष्ठ को फिर से लोड किए बिना शामिल होता है। (अतुल्यकालिक रूप से)।

जावास्क्रिप्ट आम तौर पर सर्वर से डेटा प्रतिक्रिया प्राप्त करता है और प्राप्त करता है (परंपरागत रूप से XML, अक्सर JSON जैसे अन्य कम वर्बोज़ प्रारूप)

जावास्क्रिप्ट तब उपयोगकर्ता के दृष्टिकोण को अपडेट करने के लिए पृष्ठ डोम को गतिशील रूप से अपडेट कर सकता है।

इस प्रकार 'एसाइक्रोनस जावास्क्रिप्ट एंड एक्सएमएल'।

पेज को फिर से लोड किए बिना उपयोगकर्ता के दृष्टिकोण को अपडेट करने के लिए अन्य विकल्प हैं, फ्लैश और ऐप्पल जैसी चीजें, लेकिन ये आपके मामले के अच्छे समाधान की तरह नहीं हैं। जावास्क्रिप्ट की तरह लगता है जाने के लिए रास्ता है। इस साइट पर jQuery की तरह अच्छे पुस्तकालय समर्थन का भार है , इसलिए आपको वास्तव में बहुत जावास्क्रिप्ट लिखने की आवश्यकता नहीं है।


मुझे यह उत्तर पसंद है। @Verrtex आप सभी को पता है XMLHttpRequest के बारे में है।
15/7 को engürran

13

Ajax पृष्ठ के एक हिस्से को फिर से लोड करने से अधिक है। अजाक्स अतुल्यकालिक जावास्क्रिप्ट और Xml के लिए खड़ा है।

Ajax का एकमात्र हिस्सा जिसकी आपको आवश्यकता है, जावास्क्रिप्ट से XMLHttpRequest ऑब्जेक्ट है। आपको अपने html के छोटे हिस्से को div या किसी अन्य टैग के रूप में लोड करने और पुनः लोड करने के लिए इसका उपयोग करना होगा।

उस उदाहरण को पढ़ें और आप जितनी जल्दी सोचेंगे उतनी जल्दी हो जाएगा!

<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>

1
नमन के बावजूद AJAX को XML की आवश्यकता नहीं है, लेकिन शब्द में X / परिचित AJAX का मतलब XML के लिए है क्योंकि ऐतिहासिक रूप से यह सर्वर और क्लाइंट के बीच संवाद करने का तरीका है।
engürran

5

AJAX अतुल्यकालिक जावास्क्रिप्ट और XML के लिए खड़ा है। AJAX पूरे पेज को सर्वर पर वापस पोस्ट किए बिना पृष्ठों को आंशिक अपडेट का समर्थन करता है।

AJAX के लिए बहुत सारे विकल्प हैं। दो सबसे उल्लेखनीय (यकीनन) Microsoft के ASP.NET AJAX (पूर्व में एटलस) और jQuery हैं।

यदि आप पहले से ही ASP.NET से परिचित हैं, तो ASP.NET AJAX को स्थापित करना अपेक्षाकृत आसान है। jQuery अच्छा है यदि आप पहले से ही जावास्क्रिप्ट जानते हैं, और आपके पृष्ठ की क्वेरी और अपडेट पर बहुत ही दानेदार नियंत्रण की अनुमति देता है।

HTH


2

यदि आप रुचि रखते हैं, तो आईबीएम में अजाक्स पर एक 10 (संभवतः अधिक) भाग श्रृंखला है: माजेरिंग अजाक्स भाग 1

हालांकि कुछ साल पुराना अब यह एक अच्छा परिचय है, (भले ही आप पहले भाग को पढ़ें!)

मुझे लगता है कि पूरी श्रृंखला यहां सूचीबद्ध होनी चाहिए , हालांकि इस समय मेरे लिए साइट थोड़ी धीमी है ...

सारांश:

Ajax, जिसमें HTML, JavaScript ™ तकनीक, DHTML और DOM शामिल हैं, एक उत्कृष्ट दृष्टिकोण है जो क्लंकी वेब इंटरफेस को इंटरैक्टिव Ajax अनुप्रयोगों में बदलने में आपकी सहायता करता है। लेखक, एक अजाक्स विशेषज्ञ, दर्शाता है कि ये प्रौद्योगिकियां एक साथ कैसे काम करती हैं - एक सिंहावलोकन से विस्तृत विवरण तक - अत्यंत कुशल वेब विकास को एक आसान वास्तविकता बनाने के लिए। वह एक्सएक्‍सहेट्रप्‍पेस्‍टेस्‍ट ऑब्जेक्ट सहित अजाक्स की केंद्रीय अवधारणाओं का भी खुलासा करता है।


1

यह अजाक्स है। आप जावास्क्रिप्ट के बिना अजाक्स का उपयोग नहीं कर सकते। आपको उपयोग का विचार प्राप्त करने के लिए jquery और प्रोटोटाइप उदाहरणों को देखना चाहिए।


कुछ स्रोतों के अनुसार, आप VAXcript के साथ AJAX कर सकते हैं। हालांकि यह करने के लिए कोई अच्छा कारण नहीं है। :-)
नोसरेडना

नहीं, आप नहीं कर सकते। आप VBScript के साथ AVAX कर सकते हैं।
स्टीफन केंडल

6
हे। मैंने सुना है कि AJAX अतुल्यकालिक जावास्क्रिप्ट और XML है। सिवाय इसके कि यह async होना नहीं है, यह जावास्क्रिप्ट होना नहीं है, और यह XML होना नहीं है।
नोसरेडना

0

आप जो करने की कोशिश कर रहे हैं वह तकनीकी रूप से अजाक्स है। Ajax एक पृष्ठ के अनुभागों को अद्यतन करने के लिए एक्सएचटीएमएल टुकड़ा लेनदेन बनाता है। जावास्क्रिप्ट इन अनुरोधों को अच्छा और साफ बनाता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.