तकनीकी विशेषज्ञ जोन

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

प्रोटोटाइप में वहाँ तीन तरीके आप Ajax कॉल कर सकते हैं.
1) Ajax.Request
) 2 Ajax.PeriodicalUpdater
) 3 Ajax.Updater

इससे पहले कि हम व्यक्तिगत Ajax की शिक्षा में कदम हम भी फोन करने की विभिन्न घटनाओं और पैरामीटर रही Ajax कॉल कर रही है जबकि प्रयोग किया जाता समझने की जरूरत है.

Ajax.Request उत्तीर्ण करने के लिए विभिन्न वस्तु के मानकों:
विधि
इस HTTP GET या पोस्ट HTTP जा सकता है. परिभाषित डिफ़ॉल्ट विधि द्वारा पोस्ट है.

पैरामीटर
इस डेटा कि हम अनुरोध पृष्ठ पारित करने के लिए जा रहे हैं कुंजी जोड़ी मूल्य रखती है. इस एक ही डेटा है कि हम क्वेरी स्ट्रिंग के माध्यम से पारित जबकि दूरस्थ यूआरएल बुला रही है.

आवृत्ति
यहाँ आप सेकंड में निर्दिष्ट अवधि जिसमें Ajax कॉल किए जाएंगे.

क्षय
यह करने के लिए Ajax के लिए समय अंतराल को बढ़ाने के लिए किया जाता है फोन अगर वहाँ जवाब में कोई परिवर्तन नहीं है. अंतराल की राशि में वृद्धि हो रही आवृत्ति * क्षय है. यह सुनिश्चित करना है कि हम एक ही सर्वर से हो रही प्रतिक्रिया के लिए अनावश्यक Ajax कॉल नहीं बनाते हैं.

प्रोटोटाइप Ajax घटनाक्रम:
onCreate:
इस घटना कहते हो जब भी एक नई AJAX अनुरोध कॉल किया जाता है. यह उपयोगी है जब हम एक लोड AJAX कॉल का संकेत छवि दिखाना चाहते हैं.

onSuccess:
इस घटना कहते हो जब भी अनुरोध को पूरा करने और स्थिति को लौट कोड है 2xx श्रृंखला में है.

onFailure:
इस घटना कहते हो जब भी अनुरोध को पूरा करने और स्थिति को लौट कोड है 2xx श्रृंखला में नहीं है.

onComplete:
इस घटना कहते हो जब भी अनुरोध को पूरा करने और संबंधन आग्रह का जीवन चक्र पूरा हो जाता है. इस घटना onSuccess और onFailure घटना के बाद कहा जाता है. इस घटना में हम सामान्य रूप से लोड छवि छिपाना.

प्रतिक्रिया पढ़ना अनुरोध:
प्रोटोटाइप ढांचे के साथ हम, या तो पढ़ सकते हैं स्ट्रिंग XML और JSON सामग्री. स्ट्रिंग सामग्री responseText विधि बुला द्वारा पढ़ा जा सकता है, XML सामग्री बुला responseXML और JSON सामग्री responseJSON विधि बुला द्वारा पढ़ा जा सकता है के द्वारा पढ़ा जा सकता है.

Ajax.Request:
यहाँ हम एक सर्वर पृष्ठ के लिए एक एकल AJAX अनुरोध बनाने के लिए और कनेक्शन समाप्त होता है सर्वर से प्रतिक्रिया प्राप्त करने के बाद. उसी के लिए लागू करने के लिए सरल है

	 "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var ajaxObjhttp = new Ajax. Request ( url , { method : 'POST' , parameters : { operation : "readRecord" } , onCreate : function ( transport ) { alert ( "Creating New Ajax Call" ) ; } , onSuccess : function ( transport ) { var serverResponse = transport. responseText ; } , onFailure : function ( response ) { alert ( "Some error occured while making call to remote server" ) ; } } ) ; var url = "" http://www.hiteshagrawal.com/uploads/ajax_time.php; ajaxObjhttp var = नई Ajax अनुरोध (. url, (विधि: 'पोस्ट', onCreate पैरामीटर: ऑपरेशन (: readRecord "),: समारोह () परिवहन (चेतावनी ("बनाना नई Ajax कॉल");), onSuccess: समारोह () परिवहन (var = serverResponse. responseText परिवहन;), onFailure: समारोह () प्रतिक्रिया (चेतावनी ("कुछ त्रुटि हो गई, जबकि कॉल करने के लिए सर्वर दूरस्थ ");))); 

यहाँ हम Ajax.Request वस्तु के एक बनाते हैं. इस वस्तुओं 2 पैरामीटर पहली पैरामीटर स्वीकार अनुरोध पृष्ठ यूआरएल और एक अन्य वस्तु है जो आवश्यक जानकारी है कि हम / सर्वर पृष्ठ से प्राप्त भेज दिया जाएगा रखता है. अनुरोधित पृष्ठ से डेटा प्राप्त करने पर हम सफल responseText विधि बुला द्वारा डेटा पढ़ें.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = http://www.hiteshagrawal.com/uploads/ajax_time.php ";
	 new Ajax. PeriodicalUpdater ( "textobj" , url , { ajaxObjhttp var = नई Ajax textobj ". PeriodicalUpdater (" ", url, (
		 , विधि: 'के बाद',
		 , : आवृत्ति 3,
                 : क्षय 2
          )); 

यहाँ हम Ajax.PeriodicalUpdaterRequest वस्तु के एक बनाते हैं. इस वस्तुओं पैरामीटर 3 पहले Paramter स्वीकार DIV / span नियंत्रण जहाँ डेटा अद्यतन हो जाएगा का नाम है, दूसरा पैरामीटर अनुरोध यूआरएल और तीसरे पैरामीटर धारण एक वस्तु है जो आवश्यक जानकारी है कि हम / से प्राप्त किया है भेज दिया जाएगा धारण सर्वर पृष्ठ.

Ajax.Updater:
Ajax.Request और Ajax.Updater के बीच फर्क सिर्फ इतना है कि Ajax.Updater में हम DIV / span नियंत्रण तो अब नाम सर्वर से लौटा डेटा स्वतः DIV / span नियंत्रण जब आपरेशन के भीतर पूर्ण अद्यतन हो जाएगा निर्दिष्ट करें.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = http://www.hiteshagrawal.com/uploads/ajax_time.php ";
	 new Ajax. Updater ( "textobj" , url , { ajaxObjhttp var = नई Ajax textobj ". Updater (" ", url, (
		 operation : "readRecord" } : (पैरामीटर: ऑपरेशन "readRecord)
         )); 

यहाँ हम Ajax.Updater वस्तु के एक बनाते हैं. इस पैरामीटर 3 वस्तुओं पहली पैरामीटर स्वीकार DIV / span जहाँ डेटा अद्यतन हो जाएगा, दूसरा पैरामीटर अनुरोध यूआरएल और तीसरे पैरामीटर धारण एक वस्तु का नाम है जो आवश्यक जानकारी है कि हम / सर्वर से प्राप्त किया है भेज दिया जाएगा धारण पृष्ठ.

उदाहरण:
इस उदाहरण में मैं सभी 3 Ajax कॉल कार्यान्वयन को कवर कर रहा हूँ.

HTML कोड:

  <html>
	 <head>
		 <title> प्रोटोटाइप Ajax कॉल </ शीर्षक>
		 <script src="js/prototype.js"> </ script> type="text/javascript"
		 <script type="text/javascript">
			 ajaxRequest समारोह () (
				 var यूआरएल / / अपलोड ajax_time.php = "";
				 ajaxObjhttp var = नई Ajax.Request (url, (
					 विधि: 'के बाद',
					 : (पैरामीटर: ऑपरेशन "readRecord),
			                 : OnCreate समारोह () (परिवहन
			        	        चेतावनी ("बनाना नई Ajax कॉल");
			                 ),
			                 : OnSuccess समारोह () (परिवहन
			        		 textBoxObj var = ("" ajaxRequestCall) document.getElementById;
			                         = TextBoxObj.innerHTML transport.responseText;
			                 ),
			                 : OnFailure समारोह () (प्रतिक्रिया
			                        चेतावनी ("कुछ त्रुटि दूरस्थ सर्वर से कॉल करने उत्पन्न हुई");
			                )
			         ));  
			 )

    		         ajaxUpdater समारोह () (
				 var यूआरएल / / अपलोड ajax_time.php = "";
				 var = textBoxObj ajaxUpdaterCall ";
				 ajaxObjhttp var = नई Ajax.Updater (textBoxObj, url, (
					 विधि: 'के बाद'
	    		         ));  
			  )

			 ajaxPeriodicUpdater समारोह () (
				 var यूआरएल / / अपलोड ajax_time.php = "";
				 var = textBoxObj ajaxPeriodicUpdaterCall ";
				 ajaxObjhttp var = नई Ajax.PeriodicalUpdater (textBoxObj, url, (
					 विधि: 'के बाद',
					 : आवृत्ति 3,
	        		         : क्षय 2
	    		         ));   	
			 )
		 </ Script>
	 </ सिर>
             <body>
		 Ajax अनुरोध: <span id="ajaxRequestCall" name="ajaxRequestCall" style="border: 1px solid #CCCCCC"> </ span> <इनपुट प्रकार = "बटन onclick =" "ajaxRequest (); "मूल्य =" Ajax अनुरोध "/> <br /> <br />		
	 Ajax: Updater <span id="ajaxUpdaterCall" name="ajaxUpdaterCall" style="border: 1px solid #CCCCCC"> </ span> <इनपुट प्रकार = "बटन onclick =" "ajaxUpdater (); "मूल्य =" Ajax Updater "/> <br /> <br />	
	 Ajax आवधिक: Updater <span id="ajaxPeriodicUpdaterCall" name="ajaxPeriodicUpdaterCall" style="border: 1px solid #CCCCCC"> </ span> <इनपुट प्रकार = "बटन onclick =" "ajaxPeriodicUpdater () ; "मूल्य Ajax आवधिक Updater =" "> / <br />	
	 </ Body>
 </ Html> 

सर्वर साइड कोड (PHP):

  <?
	 ( "H:i:s" ) ; तिथि गूंज ("एच: मैं s:");
 >? 

सर्वर साइड कोड (JSP):

  "java.util.Date" %> <% @ पृष्ठ आयात = ""% java.util.Date>
 <%
	 new Date ( ) ; दिनांक = CURRENTDATE नई तिथि ();
	 getTime ( ) ; लंबे CURRENTTIME = CURRENTDATE. getTime ();
	 currentTime ) ; बाहर. println (CURRENTTIME);
 %> 

प्रति उपयोगकर्ता उपयोगकर्ता है कि क्या PHP या मैं जावा भाषा के लिए दोनों सर्वर साइड कोड लिखा है की काम पर्यावरण के रूप में. उपयोगकर्ता केवल करने के लिए जावास्क्रिप्ट कोड में यूआरएल बदल गया है.

कस्टम खोज

लोकप्रिय लेख:

• AJAX डेमो
• और JSP जावा प्रोग्रामिंग Ajax के साथ
• AJAX कैसे काम करता है
• Ajax Tutorials - AJAX क्या है
• Ajax प्रोटोटाइप फ्रेमवर्क का उपयोग प्रोग्रामिंग