DOM XML - HttpRequest objetos
A través objeto XMLHttpRequest, puede actualizar una sección de una página web sin necesidad de volver a cargar la página entera.
objeto XMLHttpRequest
objeto XMLHttpRequest se utiliza para intercambiar datos con el servidor en segundo plano.
objeto XMLHttpRequest es elsueño de un desarrollador,ya que pueden:
- Actualización de la página web sin tener que recargar la página
- Después de que la página se carga desde el servidor de datos de la solicitud
- Después de que la página se ha cargado los datos recibidos del servidor
- El envío de datos al servidor en segundo plano
Crear objeto XMLHttpRequest
Todos los navegadores modernos (IE7 +, Firefox, Chrome, Safari y Opera) tiene un objeto incorporado XMLHttpRequest.
Crear sintaxis objeto XMLHttpRequest
Las versiones anteriores de Internet Explorer (IE5 e IE6) utilizando objetos ActiveX:
Para hacer frente a todos los navegadores modernos, incluyendo IE5 y IE6, por favor, compruebe si el navegador es compatible con el objeto XMLHttpRequest. Si es así, a continuación, crear un objeto XMLHttpRequest, si no es así, crear un objeto ActiveX:
Ejemplos
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Trate »
Enviar una petición al servidor
Con el fin de enviar una solicitud al servidor, utilizamos abierta del objeto XMLHttpRequest () y send () Método:
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型，URL，请求是否应该进行异步处理。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
| send(string) | 发送请求到服务器。 string：仅用于 POST 请求 |
GET o POST?
GET simple que POST y rápida y se puede utilizar en la mayoría de los casos.
Sin embargo, utilizar siempre solicitud POST en las siguientes circunstancias:
- archivos almacenados en caché no es una opción (o un archivo de base de datos en el servidor de actualizaciones)
- La cantidad de datos enviados al servidor (Mensaje No hay límite de tamaño) grande
- Envío de entrada del usuario (puede contener caracteres desconocidos), POST más fuerte y más seguro que el GET
URL - archivo en el servidor
argumento url método open (), es la dirección de un archivo en el servidor:
El archivo puede ser cualquier tipo de archivo (por ejemplo, .txt y .xml), o archivos de comandos del servidor (por ejemplo, .html y .php, puede realizar acciones en el servidor antes de devolver la respuesta).
Asíncrono - Verdadero o Falso?
Por petición de transmisión asíncrona, el método asíncrono argumento abierta () debe establecerse en true:
Enviar una solicitud asincrónica para un desarrollador Web es un gran paso adelante. En el servidor para realizar muchas de las tareas son mucho tiempo.
A través de enviado de forma asíncrona, JavaScript no necesita esperar a que la respuesta del servidor, pero puede ser sustituido por:
- A la espera de respuesta del servidor, para ejecutar secuencias de comandos adicionales
- Listo para manejar la respuesta cuando la respuesta
Async = true
Cuando se utiliza async = true, cuando en respuesta a un evento predeterminado función onreadystatechange listo para ser ejecutado:
Ejemplos
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
Trate »
Async = false
Por tercer parámetro asíncrono = false, cambiar el método open () es falso:
No se recomienda async = falso, pero si se maneja varios petición pequeña o lata.
Recuerde, JavaScript en la respuesta del servidor no continúa hasta que esté listo. Si el servidor está ocupado o lento, la aplicación se suspende o se detiene.
Nota: Cuando se utiliza el async = falso, no escribir la función onreadystatechange - sólo tiene que colocar el código después de que el send () declaraciones a:
Ejemplos
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Trate »
Respuesta del servidor
Para obtener una respuesta del servidor, utilice la propiedad responseText o responseXML del objeto XMLHttpRequest.
| 属性 | 描述 |
|---|---|
| responseText | 获取响应数据作为字符串 |
| responseXML | 获取响应数据作为 XML 数据 |
propiedad responseText
Si la respuesta del servidor no es XML, por favor utilice la propiedad responseText.
responseText propiedad devuelve la respuesta como una cadena, se puede utilizar en consecuencia:
propiedad responseXML
Si la respuesta no es XML desde el servidor, y quiere resolverlo a un objeto XML, utilizar las propiedades responseXML:
Ejemplos
Solicitar el archivo cd_catalog.xml y analizar la respuesta:
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;
Trate »
onreadystatechange
Cuando la solicitud se envía al servidor, tenemos que realizar alguna acción basándose en la respuesta.
onreadystatechange se activa cada vez que cambia el readyState.
propiedad XMLHttpRequest readyState mantiene el estado.
Tres importantes propiedades del objeto XMLHttpRequest:
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用 |
| readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪 |
| status | 200："OK" 404：找不到页面 |
En el caso onreadystatechange, especificamos lo que sucederá cuando el tiempo está listo para procesar la respuesta del servidor.
Cuando el readyState es 4 o 200 estado, la respuesta preparada:
Ejemplos
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Trate »
Nota: onreadystatechange evento se dispara cada vez que cambia el readyState, provocó un total de cuatro veces.
más ejemplos
Por getAllResponseHeaders () para recuperar la información de cabecera
Para recuperar la información del encabezado de recursos (documento).
() Recupera la información de encabezado especificado getResponseHeader
Para recuperar el recurso (archivo) para especificar la información del encabezado.
archivo ASP recuperación de contenidos
Cuando los usuarios escriben caracteres en el campo de entrada, el número de páginas Web se comunican con el servidor Web.
Recuperar contenido de la base de datos
página web cómo extraer información de la base de datos a través del objeto XMLHttpRequest.
archivo XML recuperación de contenidos
Crear un XMLHttpRequest para recuperar los datos del archivo XML y mostrar los datos en una tabla HTML.