El objeto XMLHttpRequest se usa para intercambiar datos con un servidor.
Enviar una solicitud a un servidor
Para enviar una petición a un servidor, se utiliza el open() y send() métodos del objeto XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();| Método | Descripción |
|---|---|
| open(method, url, async) | Especifica el tipo de solicitud method : el tipo de solicitud: GET o POST url : el servidor (archivo) de ubicación async : true (asíncrono) o false (síncrona) |
| send() | Envía la solicitud al servidor (utilizado para GET ) |
| send(string) | Envía la petición al servidor (utilizado para POST ) |
GET o POST ?
GET es más simple y más rápido que POST , y se puede utilizar en la mayoría de los casos.
Sin embargo, siempre use POST peticiones cuando:
- Un archivo almacenado en caché no es una opción (actualizar un archivo o base de datos en el servidor).
- El envío de una gran cantidad de datos al servidor ( POST no tiene limitaciones de tamaño).
- Envío de entrada del usuario (que puede contener caracteres desconocidos), POST es más robusto y seguro que el GET .
GET solicitudes
Un simple GET solicitud:
En el ejemplo anterior, es posible obtener un resultado almacenado en caché. Para evitar esto, una solución única ID to the URL: ID to the URL:
Ejemplo
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send(); Inténtalo tú mismo " Si desea enviar información con el GET método, agregar la información en la URL:
Ejemplo
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send(); Inténtalo tú mismo " POST solicitudes
Un simple POST solicitud:
Para POST de datos como un formulario HTML, añadir una HTTP header con setRequestHeader() . Especificar los datos que desea enviar en el send() método:
Ejemplo
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); Inténtalo tú mismo " | Método | Descripción |
|---|---|
| setRequestHeader(header, value) | Añade cabeceras HTTP a la petición header : especifica el nombre de encabezado value : especifica el valor de la cabecera |
La url - un archivo en un servidor
La url de parámetros del open() método, 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 los archivos de secuencias de comandos de servidor como .asp y .php (que puede llevar a cabo acciones en el servidor antes de enviar la respuesta de vuelta).
Asíncrono - True o False ?
AJAX es sinónimo de JavaScript asíncrono y XML, y para el objeto XMLHttpRequest se comporte como AJAX, el async de parámetros del open() método tiene que ser establecido en true:
xhttp.open("GET", "ajax_test.asp", true);El envío de solicitudes asíncronas es una gran mejora para los desarrolladores web. Muchas de las tareas que se realizan en el servidor son mucho tiempo. Antes de AJAX, esta operación podría causar la aplicación para colgar o detener.
Con AJAX, el código JavaScript no tiene que esperar a la respuesta del servidor, sino que puede:
- ejecutar otros scripts a la espera de respuesta del servidor
- hacer frente a la respuesta cuando la respuesta preparada
Async=true
Al utilizar class = "notranslate" async = true, especificar la función que se ejecutará cuando la respuesta está listo en caso onreadystatechange:
Ejemplo
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); Inténtalo tú mismo " Usted aprenderá más sobre onreadystatechange en un capítulo posterior.
Async=false
Para utilizar async=false , cambie el tercer parámetro en el open() método en false:
xhttp.open("GET", "ajax_info.txt", false);El uso async=false no es recomendable, pero para algunos pedidos pequeños esto puede ser aceptable.
Recuerde que el JavaScript no continuará para ejecutar, hasta que la respuesta del servidor está listo. Si el servidor está ocupado o lento, la aplicación se cuelgue o se detiene.
Nota: Cuando se utiliza async=false , no escriba una función onreadystatechange - sólo hay que poner el código después de que el send() declaración:
Ejemplo
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; Inténtalo tú mismo "