Techneut Zone

Prototype is de meest gebruikte framework voor Ajax Operation. Het belangrijkste voordeel van het gebruik van Prototype Ajax Framework is de eenvoud in gebruik, automatisch implementeert cross-browser en het biedt bundel van nutsfunctie die gebruikt kunnen worden in je JavaScript-code. Dit artikel geeft een lijst van verschillende manieren waarop u kunt bellen met behulp van Ajax Prototype Framework. Deze handleiding gaat niet in gedetailleerde uitvoering, maar laat je zien hoe we kunnen doen fundamentele Ajax bellen met behulp van Prototype Ajax Framework.

In Prototype zijn er drie manieren waarop u kunt maken Ajax oproepen.
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater

Voordat we verhuizen naar het leren van individuele Ajax noemen we moeten ook de verschillende evenementen en parameters te begrijpen wennen terwijl het Ajax Call.

Verschillende parameters van het object naar Passed Ajax.Request:
methode
Dit kan worden HTTP GET-of HTTP POST. Gedefinieerd standaard methode is POST.

parameters
Dit heeft de sleutel-waarde paar van de gegevens die we gaan geven aan het verzoek pagina. Dit is dezelfde gegevens die we door de query string, maar drong afstandsbediening URL.

frequentie
Hier kunt u de periode opgeven in seconden waarin Ajax oproep zal worden gedaan.

verval
Dit wordt gebruikt om het interval tijd voor Ajax verhoging bellen als er geen verandering in de reactie. Het bedrag van de interval krijgen toegenomen is de frequentie * verval. Deze zorgen dat we geen onnodige Ajax bellen voor hetzelfde antwoord krijgen van de server.

Prototype Ajax Evenementen:
onCreate:
Dit evenement krijgt aangeroepen wanneer een nieuwe ajax verzoek oproep wordt gedaan. Dit is handig wanneer we willen een beeld geven laden ajax oproep tonen.

onSuccess:
Dit evenement krijgt aangeroepen wanneer de aanvraag volledig is en de status code terug is in 2xx serie.

onFailure:
Dit evenement krijgt aangeroepen wanneer de aanvraag volledig is en de status code geretourneerd is niet in 2xx serie.

onComplete:
Dit evenement krijgt aangeroepen wanneer de aanvraag volledig is en de verbinding verzoek levenscyclus te voltooien. Dit evenement wordt aangeroepen na onSuccess en onFailure evenement. In dit geval we normaal gesproken verbergen het laden beeld.

Reading Aanvraag Reactie:
Met prototype kader kunnen we lezen ofwel String, XML en JSON inhoud. String inhoud kan worden gelezen door te bellen responseText methode, XML-inhoud kan worden gelezen door te bellen responseXML en JSON inhoud kan worden gelezen door te bellen responseJSON methode.

Ajax.Request:
Hier maken we een enkele ajax verzoek aan een server pagina en na ontvangst van het antwoord van de server van de verbinding wordt verbroken. De eenvoudige uitvoering voor hetzelfde

	 "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"; var ajaxObjhttp = new Ajax. Request (url, (method: 'post', parameters: (operatie: "readRecord"), onCreate: function (transport) (alert ( "Creating New Ajax Call");), onSuccess: function (transport) (var = serverResponse vervoer. responseText;), onFailure: function (response) (alert ( "Sommige fout opgetreden tijdens het maken van oproep tot remote server ");))); 

Hier maken we een object van Ajax.Request. Deze objecten aanvaardt 2 parameters de eerste parameter is het verzoek pagina URL en een ander object waarin de essentiële informatie die we zullen het verzenden / ontvangen van de server pagina bekleedt. Na succesvolle ontvangst van de gegevens van de opgevraagde pagina lezen we de gegevens door te bellen responseText methode.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php";
	 new Ajax. PeriodicalUpdater ( "textobj" , url , { var ajaxObjhttp = new Ajax. PeriodicalUpdater ( "textobj", url, (
		 , methode: 'post',
		 , frequentie: 3,
                 verval: 2
          )); 

Hier maken we een object van Ajax.PeriodicalUpdaterRequest. Deze objecten accepteert 3 parameters de eerste paramter is de naam van de DIV / SPAN controle waar de gegevens zullen worden bijgewerkt, tweede parameter heeft het verzoek URL en derde parameter bezit is van een object dat de essentiële informatie die we zullen versturen / ontvangen heeft van de server pagina.

Ajax.Updater:
Het enige verschil tussen Ajax.Request en Ajax.Updater is dat in Ajax.Updater specificeren we de DIV / SPAN controle naam, zodat nu de gegevens terug van server zal automatisch worden bijgewerkt in de DIV / SPAN controle wanneer de operatie is voltooid.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php";
	 new Ajax. Updater ( "textobj" , url , { var ajaxObjhttp = new Ajax. Updater ( "textobj", url, (
		 operation : "readRecord" } parameters: (operatie: "readRecord")
         )); 

Hier maken we een object van Ajax.Updater. Deze objecten accepteert 3 parameters de eerste parameter is de naam van de DIV / SPAN waar de gegevens zullen worden bijgewerkt, tweede parameter heeft het verzoek URL en derde parameter bezit is van een object dat de essentiële informatie die we zullen versturen / ontvangen van de server is pagina.

Voorbeeld:
In dit voorbeeld ben ik voor alle 3 de Ajax oproep uitvoering.

HTML-code:

  <html>
	 <head>
		 <title> Prototype Ajax Bellen </ title>
		 <script type="text/javascript" src="js/prototype.js"> </ script>
		 <script type="text/javascript">
			 ajaxRequest function () (
				 var url = "/ uploads / ajax_time.php";
				 var ajaxObjhttp = new Ajax.Request (url, (
					 methode: 'post',
					 parameters: (operatie: "readRecord"),
			                 onCreate: function (transport) (
			        	        alert ( "Creating New Ajax Call");
			                 )
			                 onSuccess: function (transport) (
			        		 var textBoxObj = document.getElementById ( "ajaxRequestCall");
			                         textBoxObj.innerHTML = transport.responseText;
			                 )
			                 onFailure: function (response) (
			                        alert ( "Sommige fout opgetreden tijdens het maken van oproep naar externe server");
			                )
			         ));  
			 )

    		         ajaxUpdater function () (
				 var url = "/ uploads / ajax_time.php";
				 var textBoxObj = "ajaxUpdaterCall";
				 var ajaxObjhttp = new Ajax.Updater (textBoxObj, url, (
					 methode: 'POST'
	    		         ));  
			  )

			 ajaxPeriodicUpdater function () (
				 var url = "/ uploads / ajax_time.php";
				 var textBoxObj = "ajaxPeriodicUpdaterCall";
				 var ajaxObjhttp = new Ajax.PeriodicalUpdater (textBoxObj, url, (
					 methode: 'post',
					 frequentie: 3,
	        		         verval: 2
	    		         ));   	
			 )
		 </ script>
	 </ head>
             <body>
		 Ajax Verzoek: <span id="ajaxRequestCall" name="ajaxRequestCall" style="border: 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "ajaxRequest (); "value =" Ajax Request "/> <br /> <br />		
	 Ajax Updater: <span id="ajaxUpdaterCall" name="ajaxUpdaterCall" style="border: 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "ajaxUpdater (); "value =" Ajax Updater "/> <br /> <br />	
	 Ajax Periodieke Updater: <span id="ajaxPeriodicUpdaterCall" name="ajaxPeriodicUpdaterCall" style="border: 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "ajaxPeriodicUpdater () , "value =" Ajax Periodiek Updater "/> <br />	
	 </ body>
 </ html> 

Server Side CODE (PHP):

  <?
	 ( "H:i:s" ) ; echo date ( "H: i: s");
 ?> 

Server Side CODE (JSP):

 "java.util.Date" %> < % Date currentDate = new Date ( ) ; long currentTime = currentDate . getTime ( ) ; out . println ( currentTime ) ; %> <% @ Page import = "java.util.Date"%> <% Datum CURRENTDATE = new Date (); lange currentTime = CURRENTDATE. GetTime (); uit. Println (currentTime);%> 

Als per gebruiker de werkomgeving van de gebruiker of PHP of JAVA ik geschreven heb de server side code voor zowel de taal. De gebruiker heeft alleen om de url in de JavaScript-code.

Custom Search

Populaire artikelen:

• Hoe AJAX Works
• Wat is AJAX
• Vaak AJAX Programmeren Fouten
• Ajax Programming gebruik Prototype Framework
• Basic AJAX Demo