¿Alguna vez te has preguntado cómo se envían solicitudes y se reciben respuestas en una página web sin tener que actualizarla constantemente? ¡La respuesta se llama Ajax XMLHttpRequest! En este artículo, te explicaremos qué son estos datos de solicitud, cómo se usan en el desarrollo web y cómo puedes incorporarlos en tu propio sitio web. ¡No te lo pierdas!
El XMLHttpRequest objeto se utiliza para enviar y recibir datos entre un navegador web y un servidor web. En este artículo, vamos a ver cómo enviar datos a un servidor web. Mandar una solicitud a un servidor, necesitaremos usar el open() y send() métodos de la XMLHttpRequest objeto.
Ejemplo HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// ... JavaScript code
</script>
</head>
<body>
<img id="img1" onclick="loadAjax()" src="https://www.itgeared.com/ajax-open-send-data-tutorial/go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Sintaxis
xhr.open(method,url,async);
xhr.send(string);Métodos open() y send()
| Método | Descripción |
|---|---|
open(method,url) |
Especifica el método y la URL (GET, POST, HEAD) |
open(method,url,async) |
El async el parámetro especifica si la solicitud es asíncrona o síncrona; true = asíncrono, asíncrono es predeterminado |
open(method,url,async,userName) |
Especifica el nombre de usuario para conectarse |
open(method,url,async,userName,password) |
Especifica la contraseña para conectarse |
send(string) |
Envía la solicitud al servidor. |
setRequestHeader(header,value) |
Especifique el nombre y el valor del encabezado |
Método
GET es mucho más simple y rápido en comparación con POST. En la mayoría de los casos, GET será suficiente. POST debe usarse en situaciones como:
- Quiere evitar los archivos en caché
- Necesita enviar grandes cantidades de datos al servidor web
- Necesita seguridad adicional sobre
GET
Si estás usando GET y desea evitar los resultados almacenados en caché, agregue un querystring parámetro que es único para garantizar que el navegador del cliente evite los resultados almacenados en caché. Esto es importante si sus datos de back-end son dinámica. Desea asegurarse de que los datos dinámicos se presenten al usuario.
xhr.open("GET","/demo/ajax_load.aspx?q=" + Math.random(),true);
xhr.send();Como puede ver, puede utilizar el GET método para enviar parámetros a través de un querystring. También puede utilizar el POST método para enviar datos de formulario sin el uso de un querystring. Aquí hay dos ejemplos; usando POST y POST envío de datos del formulario.
xhr.open("POST","/demo/ajax_load.aspx",true);
xhr.send();xhr.open("POST","/demo/ajax_load.aspx",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("firstname=John&lastname;=Smith");URL
Dentro de open() método, el parámetro URL se utiliza para especificar la dirección de un archivo en un servidor web.
xhr.open("GET","/demo/ajax_load.aspx",true);Puede especificar diferentes tipos de archivos como .txt, .asp, .aspx, .phpy .xml.
asíncrono
Enviando asincrónico solicitudes es una gran mejora para las aplicaciones web. Antes de Ajax, cada solicitud requería una recarga de página para mostrar nuevos datos al usuario. Con Ajax, JavaScript puede enviar una solicitud al servidor y seguir ejecutando otros guiones.
Tan pronto como se recibe la respuesta del servidor, el código JavaScript trabajaría con los datos de respuesta. Esto es mucho más eficiente cuando se trata de múltiples scripts dentro de un documento. La configuración predeterminada para async es TRUE. Sin embargo, si requiere que el código JavaScript se ejecute sincrónicamenteluego establezca esta propiedad en FALSE.
xhr.open("GET","/demo/ajax_load.aspx",true);
(OR)
xhr.open("GET","/demo/ajax_load.aspx",false);Ejemplo
function loadAjax() {
var xhr = false;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// IE5/IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "/demo/ajax_load.txt", true);
xhr.send(null);
}
}