Getting started with AJAX Erste Schritte mit AJAX

This guide provides some background info on Ajax, and then jumps right in and gets you started with examples. Dieser Leitfaden enthält einige Hintergrund-Infos zu Ajax und dann springt und in der rechten geht's los mit Beispielen.

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 ist die wichtigste Verwendungszweck für XMLHttpRequest Objekte für eine gute Anzahl von Jahren, sondern erst in jüngster Zeit hat es zu Beginn eine gewisse "Berühmtheit". 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. Viele der Ruckus hat damit zu tun, die viele fortgeschrittene Web-Anwendungen mit Web-Entwickler, dass es sehe, drool und wollen, dass ihre eigenen Website zu haben dieselben genaue fortgeschrittene Anwendungen / Funktionen. But some of it also has to do with the group of people at AdaptivePath who have named this application Ajax Aber einige der es auch zu tun hat mit der Gruppe von Menschen auf AdaptivePath haben, die Namen dieser Anwendung Ajax

Ajax Beginners: What in the world is Ajax? Ajax Anfänger: Was in der Welt ist Ajax?

In a nutshell? Auf den Punkt gebracht? Well Ajax is a solution to web interfaces. Nun Ajax ist eine Lösung für Web-Schnittstellen.

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. Allgemein, die Web-Benutzer gibt einige Daten oder macht eine einfache Wahl, und klickt auf eine Schaltfläche Abschließen, dass die Wahl oder Daten Einreise und sendet die Daten an den Server. The server hastily observes the data and sends back an entire new web page. Der Server stellt fest, hastig die Daten und sendet eine ganze neue Web-Seite. Having to reload a page every time you want to do something is very annoying, disjunctive and extremely time-consuming for the user. Nachdem die Seite neu laden ein jedes Mal, wenn Sie wollen, etwas zu tun ist sehr ärgerlich, unzusammenhängenden und extrem zeitaufwändig sein für den Benutzer. 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 wieder an den Browser-Server-Interaktion, um hinter die Kulissen, so kann der Benutzer einfach weiter das Spiel mit der gleichen Seite, auch wenn Elemente auf der Seite sind im Gespräch mit dem Server!

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. Mit JavaScript haben wir immer in der Lage, Server-Side-Skript ohne irgendetwas passiert in den Browser, indem Sie ein paar klassische Tricks unsere Ärmel.

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 Form Daten in eine Datei mit JavaScript auf einem Server ist gut, aber dies in der Regel nicht wieder alle zweckdienlichen Informationen zu dem JavaScript, dass es nennt, so ihre Wirksamkeit ist sehr begrenzt. Ajax, however, can get a full parcel of data back from the script it calls. Ajax, jedoch kann eine vollständige Paket von Daten aus dem Skript ruft er. 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. Daraus ergibt sich die "XML" Teil des Namens - das ist wirklich nur dort sieht der Art, der Art wie die "Java" Teil von JavaScript, weil die zurückgegebenen Daten können einfacher Text oder was auch immer Sie möchten, wenn XML ist nicht Ihr bevorzugte Wahl.

This alone opens up so many exciting possibilities. Dies allein eröffnet so viele spannende Möglichkeiten. Every form submission, every JavaScript event, and whatever else application, can now interact with server-side databases and processing power! Jede Form Vorlage, alle JavaScript-Event, und was immer sonst Anwendung, können jetzt mit Server-Side-Datenbanken und-verarbeitung Macht! Data retrieval, password authentication, image generation - you just name it, Ajax can activate it. Data Retrieval, Passwort-Authentifizierung, Bild-Generation - die Sie gerade nennen Sie sie, Ajax kann es aktivieren.

Putting Ajax Into Practice Putting Ajax in der Praxis

The only thing that limits Ajax-enhanced web application is your imagination and by browser support. Das einzige, was Grenzen Ajax-enhanced Web-Anwendung ist Ihre Vorstellungskraft und die Unterstützung durch Browser. Mozilla-based browsers can do it, Safari, and newer versions of Internet Explorer, and Opera 8 but not Opera 7. Mozilla-basierte Browser kann das erledigen, Safari, und neuere Versionen von Internet Explorer und Opera 8, aber nicht 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. Es ist am besten Slot in eine alternative Art, die Dinge für die Nutzer, die sich nicht so witzig wie Sie hoffen, für sie zu sein. 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. Auch, Internet Explorer macht die Dinge etwas anders (die meisten definitiv) aus allen anderen Browsern, so ist es ziemlich wichtig, den Code auf das Konto für die verdrießlich 80% der Bevölkerung, die sich auf Explorer.

Now to the exciting part! Nun zu den spannenden Teil! 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. Let's eine einfache Anwendung kann akzeptieren, dass die Eingaben des Benutzers, passiert es zu einigen PHP auf dem Server, die Kontrollen durchführt, die sie gegen einer Datenbank, und gibt das Ergebnis zurück an den Browser in Gebrauch ist. We assimilate it in three parts. Wir assimilieren es in drei Teile.

First, we need an HTML form. Erstens, wir brauchen ein HTML-Formular. As you’ can see below: Wie Sie "können siehe unten:

 <html> 
  <head> 
  <title>Report</title> <title> Bericht </ 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> Willkommen, Student. Please enter your essay here:<textarea name="essay" id="essay"> Bitte geben Sie Ihren Text hier: <textarea name="essay" id="essay"> 
  </textarea> <input type="submit" name="submit" value="Submit" onClick="return </ textarea> <input type = "submit" name = "submit" value = "Submit" onclick = "return 
  grade(this.form.essay.value);"> Besoldungsgruppe (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. Hinweis: Für Benutzer ohne entsprechende Unterstützung für unsere Skript (namens xhr.js), der Form wird einfach an die Fallback-Seite auf fallbackpage.php. Ok, das ist, wo die JavaScript kommt in, wir bringen Sie es langsam.

 function grade(essay) { Funktion Besoldungsgruppe (Essay) ( 

The first thing we have to do is initialize the object. Das erste, was wir zu tun haben, ist das Objekt initialisieren. There are two ways we must do this, for different browsers. Es gibt zwei Möglichkeiten, wir müssen dies tun, für verschiedene Browser.

 // Mozilla version / / Mozilla-Version 
     if (window.XMLHttpRequest) { if (window.XMLHttpRequest) ( 
         xhr = new XMLHttpRequest(); xhr = new XMLHttpRequest (); 
     } ) 
     // IE version / / IE-Version 
     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: Wir haben dann die Flucht Benutzereingaben zu machen, 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: und der Verwendung der offene Methode des Objekts, um eine neue Verbindung zum PHP-Skript:

     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: Das Verfahren erfordert zwei Argumente: Erstens, der HTTP-Methode (GET oder POST), zweitens die URL des Skripts. Ein kurzer HTTP-Header behauptet, das Skript für das, was sie bekommen, und dann schicken Sie die Methode vermittelt die tatsächliche Anfrage:

  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. Dieser letzte Schritt ist nicht erforderlich für GET-Anforderungen, wobei alle Daten können in der Abfrage-String der URL.

Obtaining Final Results Den Erhalt der endgültigen Ergebnisse

We’re finally ready to see if the HTTP request we made worked. Wir sind endlich bereit, um zu sehen, wenn die HTTP-Anfrage haben wir gearbeitet. The readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. Die readyState Eigentum zählt ab Null während der den Antrag begründet, und zeigt, 4, wenn der Server-Seite erfolgreich geladen wurde.

  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. Wenn ja die eigentliche Anfrage bearbeitet, dann können wir die Ausgabe der Server-Side-Skript durch Abfragen der responseText Eigenschaft, die einen String enthält. 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. Für mehr einer komplexen Server-Skript-Ausgabe, ein responseXML Eigenschaft, die eine vollständige Dokument Objekt von XML-Daten, ist eine Option auch zugänglich sein.

      grade = xhr.responseText; Note = xhr.responseText; 
       alert ("Nice essay. Your grade is " + grade); alert ( "Nizza Essay. Ihre Note" + Klasse); 
     } ) 
     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. Zusammenfassend lässt sich sagen, die dritte Komponente besteht aus PHP-Skript, das im Grunde lebt auf dem Server und wartet geduldig auf die JavaScript, um es einige saftige Daten, so kann sie gedeihen. This example uses some PHP, but any language you like — Ruby, Perl, C, ASP — can address your needs as well. In diesem Beispiel werden einige PHP, aber jede Sprache, die Sie gerne - Ruby, Perl, C, ASP - können sich Ihren Bedürfnissen an. 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. Der Kern dieses Beispiel-Script ist eine natürliche Sprache-Funktion, die aufgerufen wird grade_essay (), dass Noten Student Essays 1-100, aber ich werde unkenntlich, dass ein Teil zur Erhaltung Raum.

  <?php <? php 
  function grade_essay($essay) { Funktion grade_essay ($ Essay) ( 
       return strlen($essay); Rückkehr strlen ($ Essay); 
  } ) 
  $essay = urldecode(implode(file('php://input'))); $ Essay = urldecode (implodieren (file ( "php: / / input'))); 
  $grade = grade_essay($essay); $ Note = grade_essay ($ Essay); 
  echo $grade; echo $ Typ; 
  ?> 

The php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. Die php: / / input Greifer die POST-Daten, die sich in einem String, decodiert und an die Einstufung von clever-Algorithmus. The algorithm returns a numeric grade. Der Algorithmus liefert einen numerischen Besoldungsgruppe. 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. Schließlich haben wir nur die Note Ausgabe mit echo - normalerweise würde dies die Anzeige im Browser, aber da das PHP-Skript ausgeführt wird "hinter den Kulissen", den String-Ausgabe ist einfach wieder auf die JavaScript, dass es nannte. 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 . Wenn Sie strukturierte Daten, ein XML-Dokument ausgegeben werden würde mit einer echo-Anweisung in genau der gleichen Art, aber die Content-Type der Ausgabe-Seite im Grunde muss auf 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. Was der Benutzer sieht, ist dieser: Sie / Er Arten ihren Aufsatz in den Text im Browser, Klicks Senden, und innerhalb von Augenblicken eine Warnmeldung erscheint eine ihm / ihr eine Abschlussnote auf dem Aufsatz. 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. Unsichtbar, der Aufsatz wurde an den Server gesendet, gelesen und bewertet von einem Team von PHP Elfen, und zwangsläufig wieder mit einer Klasse, ohne jemals auf Neuladen der Seite. The user can modify her essay and resubmit it continuously. Der Benutzer kann ändern ihrem Essay und reichen Sie sie kontinuierlich.

And that’s the general substance of the almost magical XMLHttpRequest object! Und das ist die allgemeine Substanz der fast magische XMLHttpRequest Objekt! The example is pretty simple and straight forward, but the uses of the object can be highly, multi clever . Das Beispiel ist ziemlich einfach und direkt nach vorn, aber die Verwendung des Objekts kann sehr, Multi clever.

For further inspiration and great examples of ingenious Ajax applications you can momentarily steer away from SimpleHelp.Net and visit Für weitere Inspiration und große Beispiele für geniale Ajax-Anwendungen können Sie momentan steuern weg von SimpleHelp.Net und besuchen Sie iGoogle iGoogle , , Pageflakes Pageflakes , , Netflix Phänomene and und Netvibes Netvibes . .

However, the data and functions that Ajax sends and acts out is simply up to you. Allerdings sind die Daten und Funktionen, Ajax sendet und Handlungen aus ist einfach an Ihnen.