[Mozilla] Inicio rápido de Ajax

Este artículo fue traducido del Traductor de Mozilla Developer Network
: Jin Yunlong
Dirección original: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

¿Qué es Ajax?

Ajax significa JavaScript y XML asincrónicos. En resumen, es un lenguaje de secuencias de comandos que utiliza el objeto XMLHttpRequest para comunicarse con el servidor. Puede enviar y recibir información en varios formatos, incluidos JSON, XML, HTML y archivos de texto. Lo más atractivo de Ajax es su función "asincrónica", lo que significa que Ajax puede comunicarse con el servidor sin actualizar la página. Le permite actualizar parte del contenido de la página según los eventos del usuario.

Dos características que se pueden considerar:

• Envía una solicitud al servidor sin recargar la página.
• Reciba datos del servidor y trátelos.

Paso 1: Cómo enviar una solicitud HTTP

Debe utilizar JavaScript para enviar una solicitud HTTP al servidor a través de XMLHttpRequest. E Internet Explorer (IE) se introduce en un ActiveXobjeto XMLHTTP con nombre que implementa la XMLHttpRequestmisma funcionalidad, se utilizan Mozilla, Safari y otros navegadores XMLHttpRequest.

Si desea ser compatible con varios navegadores, puede hacerlo así:

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

Nota : Para fines de demostración, el ejemplo XMLHTTP creado anteriormente es un código simplificado. Para obtener un ejemplo más realista, consulte el tercer paso de este artículo.

A continuación, cuando se recibe la respuesta del lado del servidor, se debe indicar al objeto de solicitud HTTP que utilice funciones de JavaScript para procesar la respuesta. La propiedad del XMLHttpRequestobjeto onreadystatechangeal nombre de la función, cuando la solicitud de cambio de estado, se llama a la función.

httpRequest.onreadystatechange = nameOfTheFunction;

Nota : El nombre de la función no pasa los paréntesis ni los parámetros de los parámetros, lo que significa que solo se asigna una referencia a la función, en lugar de llamar a la función. Por supuesto, también se puede definir dinámicamente una función anónima para que la respuesta se pueda procesar en tiempo real.

httpRequest.onreadystatechange = function(){
    // process the server response
};

Una vez procesada la respuesta del servidor, podemos llamar XMLHttpRequestal objeto open()y send()un método para enviar una solicitud al servidor.

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);

• open()El primer parámetro del método: método de solicitud HTTP: GET, POST, HEAD y cualquier método admitido por el servidor. Mantenga las mayúsculas de acuerdo con el estándar HTTP; de lo contrario, es posible que algunos navegadores (como Firefox) no puedan procesar la solicitud. Para obtener más información sobre los métodos de solicitud HTTP, puede consultar la especificación W3C
• open()El segundo parámetro del método: la URL solicitada. Por razones de seguridad, no se puede llamar al contenido de la página de un dominio de terceros. Cuando llame open()al método, asegúrese de verificar el uso de páginas dentro del mismo nombre de dominio, de lo contrario, obtendrán el error "permiso denegado". Un error común es usar domain.tld para acceder a un sitio web, pero use www.domain.tld para solicitar una página. Si realmente necesita enviar una solicitud a otro dominio, puede verificar el control de acceso HTTP
• open()El tercer parámetro del método: opcional, si es una solicitud asincrónica. Si es verdadero (el valor predeterminado), significa una solicitud asincrónica.

send()El parámetro de método indica que cuando la solicitud es POST, el contenido de datos solicitado se envía al servidor. Si se envía el formato de datos del formulario, el servidor puede analizarlo como una cadena.

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

El formato de datos enviado al servidor también puede ser JSON, SOAP, etc.

Nota : Si envía datos mediante el método POST, la llamada send()antes del método para establecer el tipo MIME de la solicitud.

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Paso 2: procesar la respuesta del servidor

Cuando se envía una solicitud, se ha definido una función para manejar la respuesta.

httpRequest.onreadystatechange = nameOfTheFunction;

¿Qué puede hacer esta función? Primero, la función necesita verificar el estado de la solicitud. Si el valor de estado es 4, significa que se recibe la respuesta completa del lado del servidor y el procesamiento puede continuar.

if (httpRequest.readyState === 4) {
    // everything is good, the response is received
} else {
    // still not ready
}

La lista de valores readyState es la siguiente:

• 0-no inicializado
• 1-Carga
• 2 cargas
• 3-interactuando
• 4-Acabado

A continuación, debe verificar el código de estado de la respuesta del servidor HTTP. El sitio web del W3C enumera todos los códigos de estado. En el siguiente ejemplo, 200 OKpara determinar si la llamada Ajax del código de estado es exitosa.

if (httpRequest.status === 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may contain a 404 (Not Found)
    // or 500 (Internal Server Error) response code
}

Después de verificar el estado de la solicitud y el código de estado de respuesta, los datos enviados por el servidor se pueden recibir y procesar. Hay dos opciones para acceder a estos datos:

• httpRequest.responseText: Devuelve la respuesta del lado del servidor como una cadena de texto
• httpRequest.responseXML: Como respuesta a las XMLDocumentdevoluciones de destino, el objeto puede utilizar la función transversal DOM de JavaScript.

Tenga en cuenta que los pasos anteriores solo son válidos cuando las solicitudes asincrónicas ( open()el tercer parámetro del método se establece en verdadero). Si usa una solicitud síncrona, no es necesario que especifique una función. En la llamada send()después de formas de acceder a los datos devueltos por el servidor, porque el script se detendrá y esperará una respuesta del lado del servidor.

Paso 3: un ejemplo sencillo

Hagamos una solicitud HTTP simple. JavaScript solicitará que contenga "Soy una prueba". Texto "prueba.html" documento HTML, y luego usará el alert()método para imprimir test.htmlel contenido del archivo.

<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>
<script type="text/javascript">
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); };

  function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', url);
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>

En este ejemplo:

• En el navegador, el usuario hace clic en el enlace "Realizar una solicitud";
• Llame al makeRequest()método del controlador de eventos , el parámetro pasado a la función, una solicitud está en el mismo directorio que el archivo HTML "test.html";
• Después de la solicitud, ( onreadystatechange) realiza alertContents()el método;
• alertContents()Un método para comprobar si una respuesta se recibe correctamente, utilizando el alert()método de contenido de impresión que contiene el archivo "test.html".

Nota :

• Si envía una solicitud y devuelve un fragmento de código XML en lugar de un archivo XML estático, algunos encabezados de respuesta deben configurarse en Internet Explorer. Si el encabezado de respuesta "Content-Type: application / xml" no está configurado, IE arrojará un error de JavaScript de "Objeto esperado" al intentar acceder al elemento XML.
• Si el encabezado "Cache-Control: no-cache" no está configurado, el navegador almacenará en caché la respuesta y no volverá a enviar la solicitud. Puede agregar diferentes parámetros de solicitud GET, como una marca de tiempo o un número aleatorio (consulte omitir el caché ).
• Si la httpRequestvariable es global, makeRequest()el método podría reescribirse debido a un conflicto. La httpRequestvariable se define, luego en un paquete cerrado, para evitar el conflicto de la función Ajax.
• Si se produce un error de comunicación (por ejemplo, el servidor está apagado), cuando se intenta acceder al campo de estado, los onreadystatechangemétodos arrojarán una excepción. Asegúrese de que la ifdeclaración para declarar una declaración try ... catch.

function alertContents() {
  try {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
  catch( e ) {
    alert('Caught Exception: ' + e.description);
  }
}

Paso 4: usa XML para responder

En el ejemplo anterior, después de recibir la respuesta utilizando las propiedades del XMLHttpRequestobjeto responseTextaccesible, el archivo "test.html" contiene. Ahora prueba las responseXMLpropiedades.

Primero, cree un documento XML válido llamado "test.xml" para la solicitud, el código es el siguiente:

<?xml version="1.0" ?>
<root>
    I'm a test.
</root>

En el script, solo es necesario modificar la línea de solicitud:

οnclick="makeRequest('test.xml')"

Entonces alertContents()es necesario un método para usar el siguiente código para reemplazar alert(httpRequest.responseText);esta línea de código:

var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

Este código requiere un objeto responseXMLdado XMLDocumenty luego usa métodos DOM para acceder a los datos en un documento XML.

Paso 5: procesa los datos

Finalmente, envía algunos datos al servidor y recibe la respuesta. El script JavaScript solicita una página dinámica "test.php", que devolverá una página basada en los datos enviados "computedString" - "¡Hola, [ datos del usuario]!", Y utilice el alert()método para imprimir.

Primero, agregue un cuadro de texto a la página HTML, a través del cual el usuario puede ingresar su nombre:

<label>Your name: 
  <input type="text" id="ajaxTextbox" />
</label>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>

El controlador de eventos también debe agregar una línea para adquirir datos de usuario desde el cuadro de texto y los datos con la URL al makeRequest()método:

document.getElementById("ajaxButton").onclick = function() { 
	var userName = document.getElementById("ajaxTextbox").value;
	makeRequest('test.php',userName); 
}

Modifica makeRequest()el método para recibir datos del usuario y envía al servidor. La solicitud GET para modificar el POST, los datos del usuario se pasan como parámetro al httpRequest.send()método:

function makeRequest(url, userName) {

	...

	httpRequest.onreadystatechange = alertContents;
	httpRequest.open('POST', url);
	httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	httpRequest.send('userName=' + encodeURIComponent(userName));
}

alertContents()El método se puede utilizar como tercer paso del alert()método de los datos de impresión devueltos desde el servidor. Supongamos que el servidor devuelve computedStringlos datos del usuario y, si el contenido del usuario en el cuadro de texto "Jane", el servidor responderá así:

{"UserData": "Jane", "computedString": "¡Hola, Jane!"}

En el alertContents()método de uso de estos datos, no solo es un alert()método para imprimir responseTextcontenido, también se puede resolver e imprimir computedStringatributo del contenido:

function alertContents() {
  if (httpRequest.readyState === 4) {
    if (httpRequest.status === 200) {
      var response = JSON.parse(httpRequest.responseText);
      alert(response.computedString);
    } else {
      alert('There was a problem with the request.');
    }
  }
}