Aan de slag met AJAX

Deze gids biedt wat achtergrondinformatie info over Ajax, en dan springt rechts in en krijgt u bent begonnen met voorbeelden.

JavaScript is het voornaamste gebruik van XMLHttpRequest objecten voor een flink aantal jaren, maar pas onlangs begon te krijgen wat "fame". Een groot deel van de Ruckus heeft te maken met de vele geavanceerde webtoepassingen onder webontwikkelaars dat het zie, kwijlen en willen hun eigen site te hebben die precies dezelfde geavanceerde toepassingen / functies. Maar sommige daarvan heeft ook te maken met de groep van mensen bij wie de naam AdaptivePath deze applicatie Ajax

Ajax Beginners: Wat is er in de wereld is Ajax?

In een notendop? Nou Ajax is een oplossing voor web interfaces.

Gewoonlijk wordt het web gebruiker voert enkele gegevens of maakt een eenvoudige keuze, en klikken op een knop finaliseren van die keuze of data-entry en stuurt de data naar de server. De server inderhaast opgesteld met inachtneming van de gegevens en stuurt weer een hele nieuwe webpagina. Na een pagina te herladen, iedere keer dat je iets wilt doen is natuurlijk zeer vervelend, gescheidenheid en zeer tijdrovend zijn voor de gebruiker. XMLHttpRequest weer naar de browser-server interactie aan achter de schermen, zodat de gebruiker kan gewoon blijven spelen met dezelfde pagina, zelfs terwijl er elementen op de pagina met de server!

Met JavaScript hebben we altijd in staat geweest om server-side script zonder dat er iets gebeurt in de browser door gebruik te maken van een paar klassieke trucs onze mouwen.

Caching vorm van gegevens naar een bestand met de JavaScript-code op een server is goed, maar dit meestal niet terugkeren alle nuttige informatie aan het JavaScript dat het noemt, zodat de effectiviteit ervan is zeer beperkt. Ajax, maar krijgen er een volledig pakket van gegevens terug uit het script oproepen. Vandaar het 'XML' deel van de naam - die in werkelijkheid is er gewoon voor uiterlijk van soorten, zoals de soort "Java" deel van JavaScript, omdat de geretourneerde gegevens kunnen worden plain text of wat je wilt, als XML is niet jouw voorkeur.

Dat alleen al maakt zoveel boeiende mogelijkheden. Elke vorm indienen, JavaScript elke gebeurtenis, en wat voor activiteit dan ook toepassing kunnen nu interactie met server-side databases en verwerking power! Gegevens ophalen, wachtwoord authenticatie-, beeld-generatie - die u zojuist noem maar op, Ajax kan activeren.

Aanbrengen van Ajax in de praktijk

Het enige dat grenzen Ajax-uitgebreide webapplicatie is uw verbeelding en door de browser ondersteuning. Mozilla-browsers kunnen doen, Safari, en nieuwere versies van Internet Explorer en Opera 8, maar niet Opera 7. Het is het beste te sluiten op een andere manier van dingen doen voor gebruikers die nog niet zo geestig als je zou hopen voor hen te zijn. Ook Internet Explorer doet dingen een beetje anders (zeker) van alle andere browsers, dus het is mooi werk van essentieel belang om de code af te leggen over het irksome 80% van de bevolking die daarvan afhankelijk Explorer.

Nu het leukste deel! Laten we het genereren van een eenvoudige toepassing kan aanvaarden dat de input van de gebruiker, gooit hem in zekere PHP op de server die controles die zij tegen een database en geeft het resultaat aan de browser wordt gebruikt. We assimileert in drie delen.

Ten eerste moeten we een HTML-formulier. Zoals je hieronder kunt zien:

 <html> 
  <head> 
   <title> rapport </ title> 
   <script type='text/javascript' src='xhr.js'> </ script> </ head> <body> <form action="fallbackpage.php" method="post"> 
   <p> Welkom, student.  Geef uw essay hier: <textarea name="essay" id="essay"> 
   </ textarea> <input type = 'verzenden' naam = 'verzenden' value = "Verzenden" onclick = "return 
   grade (this.form.essay.value); "> 
   </ p> 
   </ form> 
   </ body> 
   </ html

xhr.js ), the form will just simply submit to the fallback page at fallbackpage.php . Ok, this is where the JavaScript comes in, we’ll take it slow. Opmerking: Voor gebruikers zonder een goede steun voor ons script (genaamd xhr.js), de vorm zal gewoon bij de Terugvallen op pagina fallbackpage.php. Ok, dit is waar de JavaScript komt, zullen we nemen het langzaam.

  functie grade (essay) (

Het eerste wat we moeten doen is het initialiseren van het object. Er zijn twee manieren moeten we dit doen, voor verschillende browsers.

  / / Mozilla versie 
      if (window.XMLHttpRequest) ( 
          xhr = new XMLHttpRequest (); 
      ) 
      / / IE-versie 
      else if (window.ActiveXObject) ( 
          xhr = new ActiveXObject ( "Microsoft.XMLHTTP"); 
      )

Vervolgens hebben we ontsnappen aan de input van de gebruiker om het URL-veilig:

      essay = encodeURIComponent (essay);

en het gebruik van de open methode van het object naar de opening van een nieuwe aansluiting op het PHP script:

      xhr.open ( "POST", "grade.php");

De methode vereist twee argumenten: ten eerste, de HTTP-methode (GET of POST), ten tweede de URL van het script. Een snelle HTTP header, bevestigt het script voor wat het begint, en vervolgens de methode sturen dat het de eigenlijke aanvraag:

   xhr.setRequestHeader ( 
       'Content-Type', 
        'application / x-www-form-urlencoded; charset = UTF-8'); xhr.send (essay);

Deze laatste stap is niet nodig voor de GET verzoeken, waarin alle gegevens kunnen worden opgenomen in de query string van de URL.

Het verkrijgen van definitieve resultaten

We zijn eindelijk klaar om te zien of de HTTP-verzoek hebben we gewerkt. readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. De readyState eigendom telt vanaf nul tijdens het verzoek, en toont 4 bij de server pagina is geladen met succes.

  Xhr.onreadystatechange = functie () ( 
        if (xhr.readyState == 4) (

responseText property, which contains a string. Indien het inderdaad de werkelijke verzoek heeft gewerkt, dan kunnen we de output van de server-side script door het bevragen van de responseText eigendom, die een string. responseXML property, which can hold a full document object of XML data, is an option also accessible. Voor meer van een complexe server script output, een responseXML eigendom, die houder zijn van een volledige document object van XML-gegevens, is een optie die ook toegankelijk zijn.

  Rang = xhr.responseText; 
        alert ( "Nice essay. Uw cijfer is" +-klasse); 
      ) 
      return false; 
   )

Concluderend is de derde component bestaat uit PHP-script, die in wezen leven op de server en wacht geduldig tot de JavaScript om het aantal sappige gegevens, zodat zij kunnen gedijen. Dit voorbeeld maakt gebruik van sommige PHP, maar om het even welke taal je wilt - Ruby, Perl, C, ASP - kan het adres en uw behoeften. grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. De kern van dit voorbeeld script is een natuurlijke-taal functie genaamd grade_essay () die de rangen student essays van 1 tot 100, maar ik zal bewerken dat deel aan het behoud van de ruimte.

   <? php 
   functie grade_essay ($ essay) ( 
        return strlen ($ essay); 
   ) 
   $ essay = urldecode (implode (file ( 'php: / / input'))); 
   $ rang = grade_essay ($ essay); 
   echo $ rang; 
  ?>

php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. De php: / / input grijpers van de POST-gegevens, die krijgt in een string, gedecodeerd en doorgegeven aan de inschaling slim algoritme. Het algoritme geeft een numerieke rang. echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. Ten slotte hebben we alleen de output van de functie met echo - normaal, dit zou weergeven in de browser, maar aangezien het PHP script is running "achter de schermen," de output string is gewoon terug naar het JavaScript dat noemde. text/xml . Als u behoefte gestructureerde gegevens, een XML-document zou worden uitgevoerd met een echo verklaring in net dezelfde manier, maar de content-type van de output pagina in principe moet worden ingesteld op text / xml.

Wat de gebruiker ziet is deze: hij / zij typen hun essay in de tekst in de browser te klikken Verzenden en binnen een ogenblik alert box opduikt waarbij hij / zij een eindcijfer op het essay. Onzichtbaar, het essay is verzonden naar de server, gelezen en beoordeeld door een team van PHP elven, en onvermijdelijk terug met een rang, zonder ooit tot de pagina geladen is. De gebruiker kan wijzigen haar essay en opnieuw doorlopen.

En dat is de algemene inhoud van de bijna magische XMLHttpRequest object! Het voorbeeld is vrij simpel en eenvoudig, maar het gebruik van het object kunnen hoog worden, multi slim.

Voor verdere inspiratie en mooie voorbeelden van ingenieuze Ajax-toepassingen kunt u even ophouden zich te SimpleHelp.Net en bezoek iGoogle , Pageflakes , Netflix en Netvibes .