AJAX: el objeto XMLHttpRequest
La piedra angular de AJAX es el objeto XMLHttpRequest.
El objeto XMLHttpRequest
Todos los navegadores modernos admiten el objeto XMLHttpRequest.
El objeto XMLHttpRequest se puede utilizar para intercambiar datos con un servidor 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, Edge (e IE7+), Safari, Opera) tienen un objeto XMLHttpRequest incorporado.
Sintaxis para crear un objeto XMLHttpRequest:
variable = new XMLHttpRequest();
Ejemplo
var xhttp = new XMLHttpRequest();
El archivo "ajax_info.txt" utilizado en el ejemplo anterior es un archivo de texto simple y se ve así:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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 |
---|---|
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") |