El objeto XMLHttpRequest se utiliza para solicitar datos de un servidor.
Para enviar una solicitud a un servidor, utilizamos los métodos open() y send() del objeto XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();Especifica el tipo de solicitud
método: el tipo de solicitud: GET o POST
url: la ubicación del servidor (archivo)
async: verdadero (asincrónico) o falso (sincrónico)
Envía la solicitud al servidor (usado para GET)
Envía la solicitud al servidor (usado para POST)
El parámetro URL del método open() es una dirección a un archivo en un servidor:
xhttp.open("GET", "ajax_test.asp", true);El archivo puede ser cualquier tipo de archivo, como .txt y .xml o archivos de secuencias de comandos del servidor como .asp y .php (que pueden realizar acciones en el servidor antes de enviar la respuesta).
Las solicitudes del servidor deben enviarse de forma asincrónica.
El parámetro asíncrono de open() El método debe establecerse en verdadero:
xhttp.open("GET", "ajax_test.asp", true);Al enviar de forma asincrónica, el JavaScript no tiene que esperar la respuesta del servidor, sino que puede:
ejecutar otros scripts mientras espera la respuesta del servidor
lidiar con la respuesta después de que la respuesta esté lista
El valor predeterminado para el parámetro async es async=true.
Puede eliminar de forma segura el tercer parámetro de su código.
No se recomienda XMLHttpRequest síncrono (async=false) porque JavaScript deje de ejecutarse hasta que la respuesta del servidor esté lista. Si el servidor está ocupado o es lento, el La aplicación se bloqueará o se detendrá.
GET o POST?GET es más simple y rápido que POST y se puede utilizar en la mayoría de los casos.
Sin embargo, utilice siempre solicitudes POST cuando:
Un archivo en caché no es una opción (actualizar un archivo o base de datos en el servidor).
Envío de una gran cantidad de datos al servidor (POST no tiene limitaciones de tamaño).
Al enviar entradas del usuario (que pueden contener caracteres desconocidos), POST es más sólido y seguro que GET.
Una solicitud GET simple:
xhttp.open("GET", "demo_get.asp");
xhttp.send();Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp");
xhttp.send();
}
</script>
</body>
</html>
En el ejemplo anterior, es posible que obtenga un resultado almacenado en caché. Para evitar esto, agregue una identificación única a la URL:
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
}
</script>
</body>
</html>
Si desea enviar información con el método GET, agregue la información a la URL:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
}
</script>
</body>
</html>
En un capítulo posterior se explica cómo el servidor utiliza la entrada y cómo responde a una solicitud.
Una solicitud POST simple:
xhttp.open("POST", "demo_post.asp");
xhttp.send();Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post.asp");
xhttp.send();
}
</script>
</body>
</html>
Para PUBLICAR datos como un formulario HTML, agregue un encabezado HTTP con setRequestHeader(). Especifique los datos que desea enviar en el método send():
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post2.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
}
</script>
</body>
</html>
Agrega encabezados HTTP a la solicitud
encabezado: especifica el nombre del encabezado
valor: especifica el valor del encabezado
Para ejecutar una solicitud sincrónica, cambie el tercer parámetro en el método open() a false:
xhttp.open("GET", "ajax_info.txt", false);A veces, async=false se utilizan para pruebas rápidas. También encontrarás Solicitudes sincrónicas en código JavaScript antiguo.
Dado que el código esperará a que se complete el servidor, no es necesario realizar un onreadystatechange función:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>
No se recomienda XMLHttpRequest síncrono (async=false) porque JavaScript deje de ejecutarse hasta que la respuesta del servidor esté lista. Si el servidor está ocupado o es lento, el La aplicación se bloqueará o se detendrá.
Se recomienda que las herramientas de desarrollo modernas adviertan sobre el uso solicitudes sincrónicas y puede generar una excepción InvalidAccessError cuando ocurre.