Getting started with AJAX Primeros pasos con AJAX

This guide provides some background info on Ajax, and then jumps right in and gets you started with examples. Esta guía proporciona información de antecedentes sobre Ajax y, a continuación, saltos y derecho en que se inició con ejemplos.

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 ha sido el principal uso de objetos XMLHttpRequest para un buen número de años, pero sólo recientemente lo hizo empezar a ganar "fama". 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. Muchos de los alboroto tiene que ver con las numerosas aplicaciones web avanzadas que tengan los desarrolladores web que veo, babean y quieren que su propio sitio para tener las mismas aplicaciones avanzadas exacto / características. But some of it also has to do with the group of people at AdaptivePath who have named this application Ajax Sin embargo, algunos de ellos también tiene que ver con el grupo de personas en AdaptivePath que han llamado esta aplicación Ajax

Ajax Beginners: What in the world is Ajax? Ajax Principiantes: ¿Qué en el mundo es Ajax?

In a nutshell? En pocas palabras? Well Ajax is a solution to web interfaces. Bueno Ajax es una solución a interfaces web.

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. Comúnmente, el usuario introduce ciertos datos o hace una simple elección, y hace clic en un botón de finalización de esa elección o la entrada de datos y envía los datos al servidor. The server hastily observes the data and sends back an entire new web page. El servidor apresuradamente observa los datos y los envía de vuelta a toda una nueva página web. Having to reload a page every time you want to do something is very annoying, disjunctive and extremely time-consuming for the user. El hecho de tener que recargar una página cada vez que quieres hacer es algo muy molesto, muy disyuntiva y que consumen mucho tiempo para el usuario. 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 reaparece el navegador-servidor a la interacción entre bastidores, de modo que el usuario puede seguir jugando con la misma página, aunque elementos de la página están hablando con el servidor!

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. Con JavaScript siempre hemos sido capaces de servidor de secuencias de comandos sin nada sucede en el navegador mediante el uso de algunos trucos clásicos hasta nuestros mangas.

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. El almacenamiento en caché de datos a un archivo con código JavaScript en un servidor es bueno, pero esto no suele devolver cualquier información útil para el código JavaScript que se pide, por lo que su eficacia es muy limitada. Ajax, however, can get a full parcel of data back from the script it calls. Ajax, sin embargo, puede obtener un completo paquete de datos desde el script que llama. 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. De ahí la "XML" parte del nombre - lo que es realmente justo allí se ve de clase, tipo, como el de "Java" parte de JavaScript, porque la devolución de datos puede ser texto plano o lo que sea que te gusta, si XML no es su opción preferida.

This alone opens up so many exciting possibilities. Esto por sí solo abre tantas posibilidades emocionantes. Every form submission, every JavaScript event, and whatever else application, can now interact with server-side databases and processing power! Cada formulario de presentación, cada caso de JavaScript, y cualquier otra cosa que la aplicación, ahora pueden interactuar con los del lado del servidor de bases de datos y potencia de procesamiento! Data retrieval, password authentication, image generation - you just name it, Ajax can activate it. Recuperación de datos, contraseña de autenticación, generación de la imagen - que acaba de nombre, Ajax puede activarla.

Putting Ajax Into Practice Poner en práctica Ajax

The only thing that limits Ajax-enhanced web application is your imagination and by browser support. La única cosa que limita Ajax potenciado por la aplicación web es su imaginación y por el apoyo del navegador. Mozilla-based browsers can do it, Safari, and newer versions of Internet Explorer, and Opera 8 but not Opera 7. Navegadores basados en Mozilla puede hacerlo, Safari, y nuevas versiones de Internet Explorer, y Opera 8, pero no 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 mejor en la ranura de una forma alternativa de hacer las cosas para los usuarios que no son tan ingenioso como usted la esperanza de que sean. 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. Además, Internet Explorer hace las cosas un poco diferente (sin duda) de todos los otros navegadores, por lo que es muy esencial para trabajar el código para tener en cuenta la irritante el 80% de la población que dependen de Explorer.

Now to the exciting part! Ahora a la parte emocionante! 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. Vamos a generar una sencilla aplicación que puede aceptar las aportaciones de los usuarios, pasa a algunas PHP en el servidor que los controles contra una base de datos, y devuelve el resultado en el navegador en uso. We assimilate it in three parts. Tenemos que asimilar en tres partes.

First, we need an HTML form. En primer lugar, tenemos un formulario HTML. As you’ can see below: Como usted puede ver a continuación:

 <html> 
  <head> 
  <title>Report</title> <title> Informe </ 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> Bienvenido, estudiante. Please enter your essay here:<textarea name="essay" id="essay"> Por favor, introduzca su ensayo aquí: <textarea name="essay" id="essay"> 
  </textarea> <input type="submit" name="submit" value="Submit" onClick="return </ texto> <input type = "submit" name = "submit" value = "Enviar" onclick = "return 
  grade(this.form.essay.value);"> grado (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. Nota: Para los usuarios sin el debido apoyo a nuestro script (llamado xhr.js), el formulario simplemente presentar a la página de repliegue en fallbackpage.php. Ok, aquí es donde viene el código JavaScript en, vamos a tener que lento.

 function grade(essay) { función grado (ensayo) ( 

The first thing we have to do is initialize the object. Lo primero que tenemos que hacer es inicializar el objeto. There are two ways we must do this, for different browsers. Hay dos maneras que tenemos que hacer esto, para los distintos navegadores.

 // Mozilla version / / Mozilla versión 
     if (window.XMLHttpRequest) { if (window.XMLHttpRequest) ( 
         xhr = new XMLHttpRequest(); xhr = new XMLHttpRequest (); 
     } ) 
     // IE version / / IE versión 
     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: A continuación, escapar de la entrada del usuario para que sea seguro-URL:

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

and use the open method of the object to open a new connection to the PHP script: y el uso del método abierto de objeto para abrir una nueva conexión con el script PHP:

     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: El método requiere dos argumentos: en primer lugar, el método HTTP (GET o POST), en segundo lugar, la dirección URL de la secuencia de comandos. Un rápido cabecera HTTP afirma el guión de lo que está haciendo y, a continuación, enviar el método transmite la solicitud:

  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 (ensayo); 

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL. Este último paso no es necesario para las solicitudes GET, en el que todos los datos pueden ser contenidas en la cadena de consulta de la URL.

Obtaining Final Results La obtención de resultados finales

We’re finally ready to see if the HTTP request we made worked. Estamos finalmente listos para ver si la petición HTTP que hicimos funcionó. The readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. La propiedad readyState cuenta a partir de cero en la solicitud, y muestra 4 cuando el servidor de la página se ha cargado con éxito.

  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. Si, efectivamente, la solicitud de trabajo, entonces podemos obtener la salida del servidor de secuencias de comandos de la consulta por responseText propiedad, que contiene una cadena. 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. Por más de una compleja secuencia de comandos de servidor de salida, un responseXML propiedad, que puede contener un documento completo del objeto XML de datos, es también una opción accesible.

      grade = xhr.responseText; Xhr.responseText = grado; 
       alert ("Nice essay. Your grade is " + grade); alert ( "ensayo de Niza. Su grado es" + grado); 
     } ) 
     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. En conclusión, el tercer componente constará de script PHP, que básicamente vive en el servidor y espera pacientemente a que el JavaScript para dárselo algunos jugosos datos para que pueda prosperar. This example uses some PHP, but any language you like — Ruby, Perl, C, ASP — can address your needs as well. En este ejemplo se utiliza algunas PHP, pero cualquier idioma te gusta - Ruby, Perl, C, ASP - pueden hacer frente a sus necesidades como así. 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. El núcleo de este ejemplo de secuencia de comandos es una lengua natural función llamada grade_essay () que los grados estudiante ensayos de 1 a 100, pero voy a redactar la parte a conservar el espacio.

  <?php <? php 
  function grade_essay($essay) { función grade_essay ($ ensayo) ( 
       return strlen($essay); volver strlen ($ ensayo); 
  } ) 
  $essay = urldecode(implode(file('php://input'))); $ = urldecode ensayo (implosión (archivo ( 'php: / / input'))); 
  $grade = grade_essay($essay); $ grado = grade_essay ($ ensayo); 
  echo $grade; echo $ grado; 
  ?> 

The php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. El php: / / input cangilones los datos POST, la cual se ponen en una cadena, decodificada y pasó a la inteligente algoritmo de clasificación. The algorithm returns a numeric grade. El algoritmo devuelve un grado numérico. 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. Por último, acabamos de salida con el grado de eco - normalmente, se muestran en el navegador, pero desde el script PHP se está ejecutando "detrás de las escenas", la cadena de salida es simplemente regresó a la activación de JavaScript que lo llamó. 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 . Si necesita datos estructurados, un documento XML sería la salida con un eco en la declaración de la misma manera, pero el tipo de contenido de la página de salida, básicamente, deberá ponerse en 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. Lo que el usuario ve es la siguiente: él / ella sus tipos de ensayo en el área de texto en el navegador, hace clic en Enviar, y dentro de instantes un cuadro de alerta que aparece él / ella una nota final sobre el ensayo. 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. Invisible, el ensayo se ha enviado al servidor, leer y evaluadas por un equipo de PHP elfos, inevitablemente y regresó con una serie, sin tener que recargar la página. The user can modify her essay and resubmit it continuously. El usuario puede modificar su redacción y volver continuamente.

And that’s the general substance of the almost magical XMLHttpRequest object! Y ese es el fondo general de los casi mágico objeto XMLHttpRequest! The example is pretty simple and straight forward, but the uses of the object can be highly, multi clever . El ejemplo es bastante simple y sencillo, pero los usos del objeto puede ser muy, multi inteligente.

For further inspiration and great examples of ingenious Ajax applications you can momentarily steer away from SimpleHelp.Net and visit Para más inspiración y ejemplos de gran ingenio de aplicaciones AJAX se pueden dirigir momentáneamente fuera de la visita y SimpleHelp.Net iGoogle iGoogle , , Pageflakes Pageflakes , , Netflix Netflix and y Netvibes Netvibes . .

However, the data and functions that Ajax sends and acts out is simply up to you. Sin embargo, los datos y las funciones que Ajax y envía a los actos es simplemente depende de ti.