AJAX - Ajax programmering med Prototype Framework

Hem > AJAX > Ajax programmering med Prototype Framework

Ajax programmering med Prototype Framework

Leave a comment Go to comments 4 december 2008 Hitesh Agrawal Lämna en kommentar Gå till kommentarer

Prototype är den mest använda ramverk för Ajax Operation. Den främsta fördelen med att använda prototyper Ajax Framework är dess enkelhet att använda, automatiskt genomför olika webbläsare och erbjuder bunt av nyttofunktion som kan användas i din JavaScript-kod. Denna artikel kommer att lista ned olika sätt på vilket du kan göra Ajax samtal med hjälp Prototype Framework. Den här guiden går inte in närmare genomförandet men visar hur vi kan göra grundläggande Ajax Anrop med Prototype Ajax Framework.

I Prototyper finns tre sätt du kan göra Ajax samtal.
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater

Innan vi går in i inlärning av enskilda Ajax uppmanar vi också måste förstå de olika händelser och parametrar vänja samtidigt som Ajax Ring.

Olika parametrar på objektet godkänd till Ajax.Request:
metod
Detta kan HTTP GET eller HTTP POST. Som standard definieras metoden är POST.

parametrar
Detta är nyckeln-värde par av de data som vi kommer att passera på begäran sidan. Detta är samma information som vi passerar frågesträngen medan ringer avlägsen URL.

frekvens
Här kan du ange den tid i sekunder vari Ajax samtal kommer att göras.

förfall
Detta används för att öka intervallet tid för Ajax samtal om det inte finns någon förändring i svar. Storleken på intervallet få ökad är frekvensen * förfall. Detta säkerställa att vi inte tar onödiga Ajax kräver samma svar får från servern.

Prototype Ajax Åtgärd:
onCreate:
Denna händelse får kallas när en ny AJAX begäran samtal görs. Detta är användbart när vi vill visa en lastning bild visar ajax samtal.

onSuccess:
Denna händelse får kallas när ansökan är fullständig och status har återställts i 2xx serie.

onFailure:
Denna händelse får kallas när ansökan är fullständig och statusen som skickas är inte i 2xx serie.

onComplete:
Denna händelse får kallas när ansökan är fullständig och att anslutningen begäran livscykel är avslutad. Denna händelse blir kallade efter onSuccess och onFailure händelse. I detta fall vi dölja normalt lastning bilden.

Läsa Begär svar:
Med prototyp ram som vi kan läsa antingen String, XML och JSON innehåll. String innehåll kan läsas genom att ringa responseText metod, kan XML-innehåll kan läsas genom att ringa responseXML och JSON innehåll kan läsas genom att ringa responseJSON metod.

Ajax.Request:
Här gör vi en enda ajax begäran till en server sida och efter svar från servern förbindelsen avslutas. Det enkla att genomföra för samma är

	 "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 = ny Ajax. Request (url, (metod: "POST", parametrar: (operation: "readRecord"), onCreate: funktion (transport) (alert ("Skapa nya Ajax samtal");), onSuccess: funktion (transport) (var serverResponse = transport. responseText;), onFailure: funktion (svar) (alert ("Några fel uppstod samtidigt som samtal till fjärrserver ");)));

Här gör vi ett föremål för Ajax.Request. Detta objekt accepterar 2 parameter första parametern är begäran webbadress och ett annat objekt som har den väsentliga information som vi kommer att skicka / ta emot från servern sidan. Den framgångsrika emot uppgifterna från den anmodade sida vi ta del av uppgifterna genom att ringa responseText metod.

Ajax.PeriodicalUpdater:
Här erbjuder vi en timer intervall så att ajax begäran kan göras med regelbundna intervall som anges samtidigt göra de ajax samtalet. Detta kan bli användbart när man vill visa lite live data som behöver uppdateras med jämna mellanrum.

  "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 = ny Ajax. PeriodicalUpdater ("textobj", url, (
		 , metod: "POST"
		 , Frekvens: 3,
                 förfall: 2
          ));

Här gör vi ett föremål för Ajax.PeriodicalUpdaterRequest. Detta objekt accepterar 3 parameter första parameter är namnet på DIV / SPAN kontroll där uppgifterna kommer att få uppdaterad, har andra parametern begäran webbadressen och tredje parametern har ett objekt som har den väsentliga information som vi kommer att skicka / ta emot från server-sidan.

Ajax.Updater:
Den enda skillnaden mellan Ajax.Request och Ajax.Updater är att Ajax.Updater vi specificera DIV / SPAN kontroll namn så nu data som returneras från servern får uppdateras automatiskt inom Division / SPAN kontroll när operationen är klar.

  "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 = ny Ajax. Updater ("textobj", url, (
		 operation : "readRecord" } parametrar: (operation: "readRecord")
         ));

Här gör vi ett föremål för Ajax.Updater. Detta objekt accepterar 3 parameter den första parametern är namnet på DIV / SPAN där uppgifterna kommer att få uppdaterad, andra parametern håller begäran webbadressen och tredje parametern har ett objekt som har den väsentliga information som vi kommer att skicka / ta emot från servern sidan.

Exempel:
I detta exempel är jag som omfattar alla tre Ajax samtal genomförande.

HTML-kod:

	 <html> <head> <title> Prototype Ajax Ring </ title> <script type="text/javascript" src="js/prototype.js"> </ script> <script type="text/javascript"> funktion ajaxRequest () (var url = "/ tillagda / ajax_time.php", var ajaxObjhttp = new Ajax.Request (url, (metod: "POST", parametrar: (operation: "readRecord"), onCreate: funktion (transport) ( alert ("Skapa nya Ajax samtal");), onSuccess: funktion (transport) (var textBoxObj = document.getElementById ("ajaxRequestCall"); textBoxObj.innerHTML = transport.responseText;), onFailure: funktion (svar) (alert ( "Några fel uppstod samtidigt som uppmaning till fjärrserver");)));) funktion ajaxUpdater () (var url = "/ tillagda / ajax_time.php", var textBoxObj = "ajaxUpdaterCall", var ajaxObjhttp = new Ajax.Updater ( textBoxObj, url, (metod: "POST"));) funktion ajaxPeriodicUpdater () (var url = "/ tillagda / ajax_time.php", var textBoxObj = "ajaxPeriodicUpdaterCall", var ajaxObjhttp = new Ajax.PeriodicalUpdater (textBoxObj, url, (metod: "POST", Frekvens: 3, förfall: 2));) </ script> </ head> <body> Ajax Begär: <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 = "knapp" onclick = "ajaxUpdater ();" value = " Ajax Updater "/> <br /> <br /> Ajax Återkommande Updater: <span id="ajaxPeriodicUpdaterCall" name="ajaxPeriodicUpdaterCall" style="border: 1px solid #CCCCCC"> </ span> <input type="button" onClick="ajaxPeriodicUpdater();" value="Ajax periodiska Updater"/> <br /> </ body> </ html>

Server Side CODE (PHP):

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

Server Side CODE (JSP):

  "java.util.Date" %> <% @ Sida import = "java.util.Date"%>
 <%
	 new Date ( ) ; Datum currentDate = new Date ();
	 getTime ( ) ; lång currentTime = currentDate. getTime ();
	 currentTime ) ; ut. println (currentTime);
 %>

Som per användare arbetsmiljö för användaren om PHP eller JAVA Jag har skrivit koden serversidan för både språket. Användaren behöver bara ändra webbadressen i JavaScript-kod.