Tutorial JS

JS INICIO JS Introducción JS Dónde Salida JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS JS Vamos Constante JS Operadores JS Aritmética JS Tarea JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadena JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matriz JS Iteración de matriz JS Constante de matriz JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Matemáticas JS JS al azar Booleanos JS Comparaciones JS Condiciones JS Interruptor JS Bucle JS para Bucle JS para entrada Bucle JS para de Bucle JS mientras descanso JS Iterables JS Conjuntos JS Mapas JS JS Tipo de Conversión de tipo JS JS bit a bit JS expresión regular Errores JS Alcance JS JS Elevación Modo estricto JS JS esta palabra clave Función de flecha JS Clases JS JSJSON Depuración JS Guía de estilo JS Prácticas recomendadas de JS Errores JS Rendimiento JS Palabras reservadas de JS

Versiones JS

Versiones JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Borde Historia de JS

Objetos JS

Definiciones de objetos Propiedades del objeto Métodos de objetos Visualización de objetos Accesores de objetos Constructores de objetos Prototipos de objetos Objeto iterables Conjuntos de objetos Mapas de objetos Referencia de objeto

Funciones JS

Definiciones de funciones Parámetros de función Invocación de funciones Llamada de función Función Aplicar Cierres de funciones

Clases JS

Introducción a la clase Herencia de clase Clase estática

JS asíncrono

Devoluciones de llamada JS JS asíncrono Promesas JS JS asíncrono/espera

JS HTML DOM

Introducción al DOM Métodos DOM Documento DOM Elementos DOM DOM HTML Formularios DOM DOM CSS Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos DOM

Lista de materiales del navegador JS

Ventana JS Pantalla JS Ubicación de JS Historia de JS Navegador JS Alerta emergente JS Tiempo JS Galletas JS

API web de JS

Introducción a la API web API de formularios web API de historial web API de almacenamiento web API de trabajo web API de búsqueda web API de geolocalización web

JS AJAX

Introducción a AJAX AJAX XMLHttp Solicitud AJAX Respuesta AJAX Archivo XML AJAX AJAXPHP Ajax ASP Base de datos AJAX Aplicaciones AJAX Ejemplos de AJAX

JSJSON

Introducción JSON Sintaxis JSON JSON frente a XML Tipos de datos JSON Análisis JSON Cadena JSON Objetos JSON Matrices JSON Servidor JSON JSONPHP JSONHTML JSON JSONP

JS frente a jQuery

Selectores jQuery HTML de jQuery CSS de jQuery DOM de jQuery

Gráficos JS

Gráficos JS Lienzo JS JS Trazado Gráfico JS.js Gráfico de Google JS JS D3.js

Ejemplos de JS

Ejemplos de JS JS HTML DOM Entrada HTML JS Objetos JS HTML Eventos JS HTML Navegador JS Editor JS Ejercicios JS Prueba JS Certificado JS

Referencias JS

Objetos JavaScript Objetos HTML DOM


AJAX: el objeto XMLHttpRequest

La piedra angular de AJAX es el objeto XMLHttpRequest.

  1. Crear un objeto XMLHttpRequest
  2. Definir una función de devolución de llamada
  3. Abra el objeto XMLHttpRequest
  4. Enviar una solicitud a un servidor

El objeto XMLHttpRequest

Todos los navegadores modernos admiten el XMLHttpRequestobjeto.

El XMLHttpRequestobjeto se puede utilizar para intercambiar datos con un servidor web en segundo plano. Esto significa que es posible actualizar partes de una página web sin recargar toda la página.


Crear un objeto XMLHttpRequest

Todos los navegadores modernos (Chrome, Firefox, IE, Edge, Safari, Opera) tienen un XMLHttpRequestobjeto incorporado.

Sintaxis para crear un XMLHttpRequestobjeto:

variable = new XMLHttpRequest();

Definir una función de devolución de llamada

Una función de devolución de llamada es una función que se pasa como parámetro a otra función.

En este caso, la función de devolución de llamada debe contener el código para ejecutar cuando la respuesta esté lista.

xhttp.onload = function() {
  // What to do when the response is ready
}

Enviar una solicitud

Para enviar una solicitud a un servidor, puede usar los métodos open() y send() del XMLHttpRequestobjeto:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Ejemplo

// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function
xhttp.onload = function() {
  // Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Acceso a través de dominios

Por razones de seguridad, los navegadores modernos no permiten el acceso entre dominios.

Esto significa que tanto la página web como el archivo XML que intenta cargar deben estar ubicados en el mismo servidor.

Todos los ejemplos en W3Schools abren archivos XML ubicados en el dominio de W3Schools.

Si desea utilizar el ejemplo anterior en una de sus propias páginas web, los archivos XML que cargue deben estar ubicados en su propio servidor.



Métodos de objeto XMLHttpRequest

Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method, url, async, user, psw) Specifies the request

method: the request type GET or POST
url: the file location
async: true (asynchronous) or false (synchronous)
user: optional user name
psw: optional password
send() Sends the request to the server
Used for GET requests
send(string) Sends the request to the server.
Used for POST requests
setRequestHeader() Adds a label/value pair to the header to be sent

Propiedades del objeto XMLHttpRequest

Property Description
onload Defines a function to be called when the request is recieved (loaded)
onreadystatechange Defines a function to be called when the readyState property changes
readyState Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
responseText Returns the response data as a string
responseXML Returns the response data as XML data
status Returns the status-number of a request
200: "OK"
403: "Forbidden"
404: "Not Found"
For a complete list go to the Http Messages Reference
statusText Returns the status-text (e.g. "OK" or "Not Found")

La propiedad onload

Con el XMLHttpRequestobjeto puede definir una función de devolución de llamada que se ejecutará cuando la solicitud reciba una respuesta.

La función se define en la onloadpropiedad del XMLHttpRequestobjeto:

Ejemplo

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Múltiples funciones de devolución de llamada

Si tiene más de una tarea AJAX en un sitio web, debe crear una función para ejecutar el XMLHttpRequestobjeto y una función de devolución de llamada para cada tarea AJAX.

La llamada a la función debe contener la URL y qué función llamar cuando la respuesta esté lista.

Ejemplo

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
}
function myFunction2(xhttp) {
  // action goes here
}

La propiedad onreadystatechange

La readyStatepropiedad mantiene el estado de XMLHttpRequest.

La onreadystatechangepropiedad define una función de devolución de llamada que se ejecutará cuando cambie readyState.

La statuspropiedad y las statusTextpropiedades mantienen el estado del objeto XMLHttpRequest.

Property Description
onreadystatechange Defines a function to be called when the readyState property changes
readyState Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: "OK"
403: "Forbidden"
404: "Page not found"
For a complete list go to the Http Messages Reference
statusText Returns the status-text (e.g. "OK" or "Not Found")

La onreadystatechangefunción se llama cada vez que cambia readyState.

Cuando readyStatees 4 y el estado es 200, la respuesta está lista:

Ejemplo

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}

El onreadystatechangeevento se activa cuatro veces (1-4), una vez por cada cambio en el estado listo.