Latest web development tutorials

AJAX - el envío de una solicitud al servidor

objeto XMLHttpRequest para intercambiar datos con el servidor.


Envía una petición al servidor

Para enviar una solicitud al servidor, se utiliza el método Open del objeto XMLHttpRequest () y send ():

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

camino descripción
abierta(método, URL, asíncrono)

Tipo especifica la solicitud, la URL y el procesamiento de las solicitudes ya sean síncronos.

  • Método:el tipo de solicitud; GET o POST
  • url:la ubicación del archivo en el servidor
  • asíncrono: verdadero (asíncrono)o falso (síncrona)
enviar(cadena)

Envía una petición al servidor.

  • cadena:sólo para peticiones POST


GET o POST?

En comparación con el POST, GET más fácil y más rápido, y en la mayoría de los casos se puede utilizar.

Sin embargo, en los siguientes casos, por favor utilice la solicitud POST:

  • No se puede utilizar los archivos de caché (archivos o actualizar la base de datos en el servidor)
  • Enviar grandes cantidades de datos (POST no limitar la cantidad de datos) al servidor
  • Cuando se envía la entrada del usuario contiene caracteres desconocidos, POST es más estable y más fiable que GET

petición GET

Una petición GET sencilla:

Ejemplos

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

Trate »

En el ejemplo anterior, es posible obtener los resultados en caché.

Para evitar esto, añada un identificador único a la URL:

Ejemplos

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

Trate »

Si desea enviar información a través de método GET, agregar la información en la URL:

Ejemplos

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

Trate »


solicitud POST

Una solicitud POST sencilla:

Ejemplos

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

Trate »

Si necesita que los datos como una forma de POST HTML, use setRequestHeader () para añadir cabeceras HTTP. A continuación, especifica que desea enviar datos en el método send ():

Ejemplos

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

Trate »

方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值


URL - archivos en el servidor

argumentourlabierta () método es la dirección del servidor de archivos:

xmlhttp.open("GET","ajax_test.html",true);

El archivo puede ser cualquier tipo de archivo, por ejemplo, .txt y .xml o los archivos de comandos de servidor, como .asp y .php (antes de devolver una respuesta, para realizar tareas en el servidor).


Asíncrono - Verdadero o Falso?

AJAX significa JavaScript asíncrono y XML (JavaScript asíncrono y XML).

Si desea utilizar AJAX objeto XMLHttpRequest, a continuación, el parámetro asíncrono cuya abierto () método debe establecerse en true:

xmlhttp.open("GET","ajax_test.html",true);

Para los desarrolladores web, enviar una solicitud asincrónica es un gran paso adelante. En el servidor para realizar muchas tareas son mucho tiempo. Antes de producirse AJAX, lo que puede provocar que la aplicación para colgar o detener.

A través de AJAX, Javascript, sin esperar a la respuesta del servidor, pero:

  • Otras secuencias de comandos se ejecutan a la espera de respuesta del servidor
  • Cuando la respuesta está preparado para responder a procesar

Async = true

Cuando se utiliza async = true, por favor disposiciones en respuesta a los eventos en onreadystatechange disposición para realizar una función:

Ejemplos

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Trate »

Usted aprenderá más sobre el contenido onreadystatechange en un capítulo posterior.


Async = false

Para utilizar el async = falso, establecer el método open () en el tercer parámetro a false:

xmlhttp.open("GET","test1.txt",false);

No se recomienda el uso de async = falso, pero por alguna pequeña petición, también es posible.

Recuerde, JavaScript esperará hasta que la respuesta del servidor está listo para proceder. Si el servidor está ocupado o lento, o detener la aplicación se bloquea.

Nota: Cuando se utiliza el async = falso, por favor no escribir onreadystatechange función - poner el código en el send () de nuevo a la declaración:

Ejemplos

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Trate »