Ajax, que consta de HTML, tecnología JavaScript™, DHTML y DOM, es una manera brillante de transformar engorrosas interfaces web en aplicaciones Ajax interactivas. Para Ajax, el objeto principal es XMLHttpRequest y todas las operaciones de Ajax son inseparables de la operación de este objeto.
Primero, comprendamos cómo crear este objeto en javascript:
varxmlHttp=newXMLHttpRequest();
Esta simple línea de código crea un objeto XMLHttpRequest en Mozilla, Firefox, Safari, Opera y básicamente cualquier navegador que no sea de Microsoft que admita Ajax en cualquier forma. Pero para IE, que tiene una participación de mercado del 70%, este método no es posible y las diferentes versiones de IE tienen diferentes métodos de creación, por lo que debemos utilizar los dos métodos siguientes para crear objetos en IE:
intentar {
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//Para navegadores más nuevos
}captura(errar){
intentar{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//Para navegadores más antiguos
}captura(err2){
xmlHttp=falso;
}
}
Aun así, no podemos predecir que algunos navegadores no puedan crear este objeto, por lo que si la creación no tiene éxito, debemos agregar una oración:
if(!xmlHttp){
alert("¡No se puede crear el objeto XMLHttpRequest!");
}
La combinación es:
varxmlHttp=false;
intentar{
xmlHttp=newXMLHttpRequest();
}catch(pruebamicrosoft){
intentar{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(otromicrosoft){
intentar{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}captura(falló){
xmlHttp=falso;
}
}
}
si(!xmlHttp){
alert("¡No se puede crear el objeto XMLHttpRequest!");
}
Luego, creemos una función getInfo() para habilitar solicitudes asincrónicas:
functiongetInfo(){
varnum=document.getElementById("num").value;//Obtener los datos del formulario
varurl="/ajax/1.php?n="+escape(núm);
xmlHttp.open("GET",url,true);//true aquí representa una solicitud asincrónica
}
Una vez configurado con open(), puede enviar solicitudes. Aunque puedes enviar datos usando send(), también puedes enviar datos a través de la propia URL. De hecho, en la mayoría de las solicitudes GET, es mucho más fácil enviar datos usando la URL, así que use null como parámetro de send() aquí. El archivo php en la dirección URL es el archivo php que se solicita para procesar los datos requeridos, al igual que cuando usamos PHP habitualmente, se pueden agregar y separar varios parámetros con &.
xmlHttp.send(nulo);
Después de enviar los datos, necesitamos usar el método de devolución de llamada para obtener el estado del servidor, por lo que se usa el atributo onreadystatechange.
xmlHttp.onreadystatechange=updatePage;
Esta declaración debe colocarse antes de la declaración send() para que sea efectiva. La página de actualización posterior es una función que procesa la información devuelta. El getInfo() completo es el siguiente:
funcióngetInfo(){
varnum=document.getElementById("num").value;//Obtener los datos del formulario
varurl="/ajax/1.php?n="+escape(núm);
xmlHttp.open("GET",url,true);//true aquí representa una solicitud asincrónica
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(nulo);
}
También necesitamos activar esta función en html:
<inputname="num"id="num"onblur="getInfo()"tipo="texto"/>
A continuación necesitamos escribir la función updatePage():
functionupdatePage(){
si(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("ciudad").value=respuesta;
}
}
El estado listo en el código anterior es un estado devuelto por el servidor. Este estado 4 indica que la solicitud ha sido enviada y procesada. ResponseText es para obtener la información devuelta por el servidor y luego asignarla al formulario con ID de ciudad a través de javascript.
En este punto, se completa un programa Ajax simple. El código javascript completo es el siguiente:
varxmlHttp=false;
intentar{
xmlHttp=newXMLHttpRequest();
}catch(pruebamicrosoft){
intentar{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(otromicrosoft){
intentar{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}captura(falló){
xmlHttp=falso;
}
}
}
si(!xmlHttp){
alert("¡No se puede crear el objeto XMLHttpRequest!");
}
funcióngetInfo(){
varnum=document.getElementById("num").value;//Obtener los datos del formulario
varurl="/ajax/1.php?n="+escape(núm);
xmlHttp.open("GET",url,true);//true aquí representa una solicitud asincrónica
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(nulo);
}
funciónactualizarPágina(){
si(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("ciudad").value=respuesta;
}
}
Todavía falta un archivo php aquí. Dado que el método de procesamiento y el método de escritura son diferentes, y esta no es la parte principal de Ajax, el código no se incluirá aquí. Solo recuerde que PHP genera y devuelve los datos requeridos.
No se ha actualizado durante mucho tiempo. Vi este tutorial hoy y es muy adecuado para principiantes.