This guide provides some background info on Ajax, and then jumps right in and gets you started with examples. Denne guiden gir deg litt bakgrunnsinformasjon info om Ajax, og hopper rett inn og får deg i gang med eksempler.

JavaScript has been the main use for XMLHttpRequest objects for a good number of years now, but only recently did it start to gain some “fame”. JavaScript har vært den viktigste bruk for XMLHttpRequest objekter for en god del år nå, men først nylig begynte det å få "Fame". A lot of the ruckus has to do with the many advanced web applications having web developers that see it, drool and want their own site to have those same exact advanced applications/features. Mye av ruckus har å gjøre med de mange avanserte webapplikasjoner har webutviklere som ser det, sikkel og ønsker sitt eget nettsted å ha de samme nøyaktige avanserte applikasjoner / funksjoner. But some of it also has to do with the group of people at AdaptivePath who have named this application Ajax Men noe av det har også å gjøre med en gruppe mennesker på AdaptivePath som har navngitt denne søknaden Ajax

Ajax Beginners: What in the world is Ajax? Ajax Nybegynnere: Hva i all verden er Ajax?

In a nutshell? I et nøtteskall? Well Ajax is a solution to web interfaces. Vel Ajax er en løsning for web-grensesnitt.

Commonly, the web user enters some data or makes a simple choice, and clicks a button finalizing that choice or data entry and sends the data over to the server. Commonly, trer nettbruker noen data eller gjør et enkelt valg, og klikker en knapp Kjøpet som valg eller dataregistrering og sender data over til serveren. The server hastily observes the data and sends back an entire new web page. Serveren observerer fort dataene og sender tilbake en helt ny nettside. Having to reload a page every time you want to do something is very annoying, disjunctive and extremely time-consuming for the user. Å måtte laste en side hver gang du ønsker å gjøre noe er veldig irriterende, Disjunktiv og ekstremt tidkrevende for brukeren. XMLHttpRequest resurfaces the browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! XMLHttpRequest resurfaces leseren-serveren interaksjon til bak scenen, slik at brukeren bare kan fortsette å spille med den samme siden, selv når elementer på siden snakker med serveren!

With JavaScript we've always been able to server-side script without anything happening in the browser by using a few classic tricks up our sleeves. Med JavaScript har vi alltid kunnet skript på serversiden uten at noe skjer i nettleseren ved hjelp av noen klassiske triks opp ermene.

Caching form data to a file with JavaScript on a server is good, but this usually doesn't return any useful information to the JavaScript that calls it, so its effectiveness is very limited. Caching skjemadata til en fil med JavaScript på en server er god, men dette vanligvis ikke returnerer noe nyttig informasjon til JavaScript som kaller den, slik at effektiviteten er svært begrenset. Ajax, however, can get a full parcel of data back from the script it calls. Ajax, men kan få en full pakke av data tilbake fra skriptet samtaler. Hence the “XML” part of the name – which really is just there for looks of sorts, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML isn't your preferred choice. Derav "XML" delen av navnet - som bare er der for utseende av slag, slik som "Java" del av JavaScript, fordi returnerte data kan være ren tekst, eller hva du vil, hvis XML ikke er din foretrukne valg.

This alone opens up so many exciting possibilities. Dette alene åpner opp så mange spennende muligheter. Every form submission, every JavaScript event, and whatever else application, can now interact with server-side databases and processing power! Hver innsending av skjemaet, kan hvert JavaScript hendelsen, og hva annet program, nå kommunisere med server-side databaser og prosessorkraft! Data retrieval, password authentication, image generation – you just name it, Ajax can activate it. Innhenting av data, passord autentisering, image generation - du bare navnet det, kan Ajax aktivere den.

Putting Ajax Into Practice Putting Ajax til praksis

The only thing that limits Ajax-enhanced web application is your imagination and by browser support. Det eneste som begrenser Ajax forbedret webapplikasjonen er din fantasi og av nettleseren støtte. Mozilla-based browsers can do it, Safari, and newer versions of Internet Explorer, and Opera 8 but not Opera 7. Mozilla-baserte nettlesere kan gjøre det, Safari og nyere versjoner av Internet Explorer og Opera 8, men ikke Opera 7. It's best to slot in an alternative way of doing things for users who aren't as witty as you'd hope for them to be. Det er best å havne i en alternativ måte å gjøre ting for brukere som ikke er like vittig som du håp for dem å være. Also, Internet Explorer does things somewhat differently (most definitely) from all the other browsers, so it's pretty essential to work the code to account for the irksome 80% of the population who rely on Explorer. Også, ikke Internet Explorer ting litt annerledes (definitivt) fra alle andre nettlesere, så det er ganske viktig å arbeide koden til kontoen for kjedsommelig 80% av befolkningen som er avhengige av Explorer.

Now to the exciting part! Nå til spennende! Let's generate a straightforward application that can accept input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser in use. La oss lage en enkel applikasjon som kan ta imot inndata fra brukeren, går det til noen PHP på serveren som sjekker det mot en database, og returnerer resultatet til leseren i bruk. We assimilate it in three parts. Vi assimilere den i tre deler.

First, we need an HTML form. Først trenger vi et HTML-skjema. As you' can see below: Som du kan se nedenfor:

 <html> <html> 
  <head> <head> 
  <title>Report</title> <title> rapport </ title> 
  <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post"> <script type='text/javascript' src='xhr.js'> </ script> </ head> <body> <form action="fallbackpage.php" method="post"> 
  <p>Welcome, student. <p> Velkommen, student. Please enter your essay here:<textarea name="essay" id="essay"> Fyll inn essayet her: <textarea name="essay" id="essay"> 
  </textarea> <input type="submit" name="submit" value="Submit" onClick="return </ textarea> <input type = "submit" name = "submit" value = "Send" onclick = "return 
  grade(this.form.essay.value);"> grade (this.form.essay.value); "> 
  </p> </ p> 
  </form> </ form> 
  </body> </ body> 
  </html </ html 

Note: For users without proper support for our script ( named 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. Merk: For brukere uten riktig støtte for skript våre (kalt xhr.js), vil skjemaet rettferdig bare sender til reservekultur siden på fallbackpage.php. Ok, dette er hvor JavaScript kommer inn, vil vi ta det rolig.

 function grade(essay) { funksjon grade (essay) ( 

The first thing we have to do is initialize the object. Det første vi må gjøre er å initialisere objektet. There are two ways we must do this, for different browsers. Det er to måter vi må gjøre dette for ulike nettlesere.

 // Mozilla version / / Mozilla versjon 
     if (window.XMLHttpRequest) { if (window.XMLHttpRequest) ( 
         xhr = new XMLHttpRequest(); xhr = new XMLHttpRequest (); 
     } ) 
     // IE version / / IE versjon 
     else if (window.ActiveXObject) { else if (window.ActiveXObject) ( 
         xhr = new ActiveXObject("Microsoft.XMLHTTP"); xhr = new ActiveXObject ( "Microsoft.XMLHTTP"); 
     } ) 

We then escape the user input to make it URL-safe: Vi så unnslippe brukerundersøkelser for å gjøre den URL-safe:

     essay=encodeURIComponent(essay); essay = encodeURIComponent (essay); 

and use the open method of the object to open a new connection to the PHP script: og bruke den åpne metoden på objektet for å åpne en ny forbindelse til PHP-script:

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

The method requires two arguments: first, the HTTP method (GET or POST) ; second, the URL of the script. A quick HTTP header asserts the script for what it's getting, and then the send method conveys the actual request: Metoden krever to argumenter: For det første, HTTP-metode (GET eller POST), andre hevder at nettadressen til skriptet. En rask HTTP header manuset for hva det blir, og deretter sende metoden formidler selve forespørselen:

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

This last step isn't necessary for GET requests, wherein all the data can be contained in the query string of the URL. Det siste trinnet er ikke nødvendig for GET-forespørsler, hvor alle data kan finnes i søkestrengen på webadressen.

Obtaining Final Results Innhente Final Results

We're finally ready to see if the HTTP request we made worked. Vi er endelig klare for å se om HTTP-forespørselen vi gjort arbeidet. The readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. Den readyState eiendommen teller opp fra null i løpet av forespørselen, og viser 4 når serveren siden har blitt lastet vellykket.

  xhr.onreadystatechange=function() { xhr.onreadystatechange = function () ( 
       if (xhr.readyState==4) { if (xhr.readyState == 4) ( 

If indeed the actual request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. Hvis ja selve forespørselen arbeidet, så vi kan få resultatet av skript på serversiden ved spørring mot responseText eiendommen, som inneholder en streng. For more of a complex server script output, a responseXML property, which can hold a full document object of XML data, is an option also accessible. For mer av et komplekst server script utgang, en responseXML eiendom, som kan holde en fullstendig dokument objekt av XML-data er et alternativ også tilgjengelig.

      grade = xhr.responseText; klasse = xhr.responseText; 
       alert ("Nice essay. Your grade is " + grade); alert ( "Nice essay. Din karakter er" + karakter); 
     } ) 
     return false; return false; 
  } ) 

In conclusion, the third component consist of PHP script, which basically lives on the server and waits patiently for the JavaScript to pass it some juicy data so it can thrive. Som konklusjon, den tredje komponenten består av PHP-skriptet, som i utgangspunktet lever på serveren og venter tålmodig på JavaScript for å gi det noen saftige data slik at den kan trives. This example uses some PHP, but any language you like — Ruby, Perl, C, ASP — can address your needs as well. Dette eksemplet bruker noen PHP, men alle språk du vil - Ruby, Perl, C, ASP - kan løse dine behov også. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. Kjernen i dette eksemplet skriptet er en naturlig-språk funksjon kalt grade_essay () at karakterene studentoppgaver 1 til 100, men jeg vil redact at en del å spare plass.

  <?php <? php 
  function grade_essay($essay) { funksjon grade_essay ($ essay) ( 
       return strlen($essay); return strlen ($ essay); 
  } ) 
  $essay = urldecode(implode(file('php://input'))); $ essay = urldecode (implode (file ( 'php: / / input'))); 
  $grade = grade_essay($essay); $ klasse = grade_essay ($ essay); 
  echo $grade; echo $ karakter; 
  ?> ?> 

The php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. Den php: / / input griper POST-data som blir satt i en streng, dekodes og sendes til smarte karakterskalaen algoritmen. The algorithm returns a numeric grade. Algoritmen returnerer en numerisk karakter. Lastly, we just output the grade with 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. Til slutt, vi bare utgang karakteren med ekko - Vanligvis vil dette vises i nettleseren, men siden PHP-script kjører "bak kulissene" strengen utgang er bare returneres til JavaScript som kalte det. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page basically must be set to text/xml . Hvis du trenger strukturerte data, et XML-dokument vil sendes ut med et ekko uttalelse i akkurat samme måte, men innholdet-typen produksjon siden utgangspunktet må være satt til text / xml.

What the user sees is this: She/He types their essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving him/her a final grade on the essay. Hva brukeren ser er dette: Hun / Han typer sitt essay i tekstområdet i leseren, klikk Send, og innen Instants en melding boks spretter opp og gi ham / henne en sluttkarakter på essayet. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP elves, and inevitably returned with a grade, without ever having to reload the page. Usynlig, har essayet er sendt til serveren, lest og vurdert av et team av PHP alver, og uunngåelig tilbake med en karakter, uten å måtte oppdatere siden. The user can modify her essay and resubmit it continuously. Brukeren kan endre sitt essay og sende den kontinuerlig.

And that's the general substance of the almost magical XMLHttpRequest object! Og det er den generelle substansen i nesten magisk XMLHttpRequest objektet! The example is pretty simple and straight forward, but the uses of the object can be highly, multi clever . Eksempelet er ganske enkelt og rett frem, men bruk av objektet kan være svært, mange flinke.

For further inspiration and great examples of ingenious Ajax applications you can momentarily steer away from SimpleHelp.Net and visit For ytterligere inspirasjon og gode eksempler på geniale Ajax-applikasjoner kan du øyeblikk styre unna SimpleHelp.Net og besøk iGoogle iGoogle , , Pageflakes Pageflakes , , Netflix Netflix and og Netvibes Netvibes . .

However, the data and functions that Ajax sends and acts out is simply up to you. Men de data og funksjoner som Ajax sender og handler ut er bare opp til deg.