lunes, marzo 13, 2006

Traducción de Artículo de AJAX VIII

Enviar peticiones con XMLHttpRequest
Una vez que tenés tu objeto de petición, podés empezar el ciclo petición/respuesta. Recuerda, el único proposito de XMLHttpRequest es permitirtehacer peticiones y recibir respuestas. Todo lo demás -cambiar la interfaz del usuario, intercambio de imagenes, interpretar la información devuelta por el servidor- es trabajo de Javascript, CSS u otro código en tus paginas. Con XMLHttpRequest listo para usar, podes hacer una petición al servidor.
Bienvenido al cajón de arena1
Ajax tiene un modelo de seguridad sandbox. Como resultado, tu código Ajax (y especificamente, el objeto XMLHttpRequest) solamente puede hacer peticiones en el servidor en el cual esta ejecutandose. Vas a aprender mucho más sobre seguridad y Ajax en un artículo próximo, pero por ahora tené en cuenta que el código ejecutandose en tu máquina local solo puede hacer peticiones al los scripts del lado servidor en tu máquina local. Si tenés código Ajax ejecutandose en www.breakneckpizza.com, deberá hacer peticiones a los scripts que se ejecutan en www.breackneckpizza.com.
Establecer la URL del servidor
La primera cosa que necesitas determinar el la URL para conectarse con el servidor. Esto no es especifico de Ajax -obviamente ya tenes que saber como contruir una URL- pero es esencial para hacer una conexión. En la mayoria de las aplicacione, contruirias la URL con algo de información estática convinada con información del formulario con el que trabajan tus usuarios. Por ejemplo, el listing 7 muestrs algo de JavaScript que toma el valor del campo del número de teléfono y luego construye una URL usando esa información.
Listing 7. Construir una URL de petición

<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft){
try {
request=new ActiveXObject("Msxml2.XMLHTTP");
} catch(othermicrosoft) {
try {
request= new ActivexObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error al inicializar XMLHttpRequest!");

function getCustomerInfo(){
var phone = document.getElementById("phone").value;
var url = "cgi-local/lookupCustomer.php?phone=" + escape(phone);
}
</script>
Nada de esto debería confundirte. Primero, el código crea una nueva variable llamada phone y le asigna el valor del campo del formulario con el id igual a phone. El listing 8 muestra el XHTML para este formulario en particular donde podés ver el campo phone y su atributo id.

Listing 8. El formulario de Break Neck Pizza

<body>
<p><img src="breakneck-logo_4c.gif" alt = "Breack Neck Pizza" /></p>
<form action ="POST">
<p>
<input type = "text" size="14" name="phone" id="phone" onChange="getCustomerInfo();" />
</p>
<p>YOur order will be delivered to:</p>
<div id="address"></div>
<p>Type your order here</p>
<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
<p><input type = "submit" value "Order Pizza" id="submit"/></p>
</form>
</body>
Tambien fijense que cuando el usuario ingresa su número de teléfono o lo cambia, dispara el método getCustomerInfo() mostrado en el listing 7. Ese método toma el numero y lo usa para construir una cadena URL, guardada en la variable URL. Recuerda, dado que el codigo Ajax tiene caja de arena y solo se puede conectar con el mismo servidor, no necesitarías el nombre deldominio en tu URL. En este ejemplo, el nombre del script es /cgi-local/lookupCustomer.php. Finalemnte, el número de teléfono es asociado a este script como un parámetro GET: "phone="+escape(phone).
Si no habías visto antes el método escape() , se usa para deschar todo caracter que no pueda ser enviado correctamente como texto. Por ejemplo, cualquier especio en el nuemro de telefono es convertido a los caracteres %20, haciendo posible el pasaje de los caracteres a traves de la URL.
Podes agregar tantos parametros como necesites. Por ejemplo, si queres agregar otro parametro, solo asocialo en la URL y separa los parametroscon el caracter ampersans & (el primer parametro es separado del nombre del script con un signo de pregunta ?)
Abriendo la petición
Con una URL para conectarse, podés configurar la petición. Lo logras usando el método open() de tu objeto XMLHttpRequest. Este método tiene tantos como 5 parámetros:
  • request-type: el tipo de petición a enviar. los valores tipicos son GET o POST, pero tambien podes mandar peticiones HEAD
  • url: LaURL para contectarse
  • asynch: Verdadero (true) que la petición sea asincrónica y falso (false) si tiene que ser una peticion sincrónica. Este parametro es opcional y por defecto es verdadero.
  • username: si se requiere autenticacion, podes especificar el nombre de usuario acá. Es un parametro opcional y no tiene valor por defecto.
  • password: si se requiere autenticacion, podes especificar la contraseña acá. Es un parametro opcional y no tiene valor por defecto.
Tipicamenter, vas a usar en primero de los tres. De hecho, hasta cuando quieras una peticion asincronica, deberías espesificar verdadero como tercer parametro. Ese es el valor por defecto , pero es un buen poco de auto-documentación para indicar si la peticion es asincronica o no.
Ponelo todo junto y normalemnte terminar con una linea que se ve como el listing 9:
Listing 9. Abrir la peticion
function getCustomerInfo(){
var phone = document.getElementById("phone").value;
var url = "cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
}
Una vez que tenes la URL resulta, esto es bastante simple. Para la mayoria de las peticiones, usar GET es suficiciente (vas a ver situaciones en las cuales usarías post en articulos futuros); esto, junto con la URL, es todo lo que necesitas para usar open().



1. sandbox

Etiquetas:

posted by Lau @ 4:21 p. m.   0 comments