Ajax con query desde Netbeans

Usando AJAX con JQuery desde NetBeans
Posted by Ikarus on 18 June 2011, 2:01 am
Una de las principales razones para utilizar JQuery es la sencillez con la que podemos trabajar con JavaScript y con las llamadas Ajax, sin tener que lidiar con los respectivos objetos xmlhttprequest de los navegadores web. A través de este breve artículo pretendo explicar de una forma sencilla cómo utilizar lafunción Ajax que incorpora JQuery (centrado en xml), así como, algún que otro elemento propio de esta biblioteca. Sí, he dicho biblioteca, al fin y al cabo eso es JQuery: un conjunto de funciones que nos evitará tener que escribir más código JavaScript. Si queremos podemos descargar la versión sin comprimir y podremos ver todo el código que contiene. La última versión a fecha de hoy es la 1.6.1.Durante bastante tiempo he estado buscando un ide que me permita acceder a un menú contextual con las funciones de JQuery y, a ser posible, que no sea de pago. Encontré CodeLobster que está bien, es rápido con ficheros PHP/JavaScript que superen las mil lineas. Tiene una versión de pago y una gratuita, la parte negativa de esta última es que el soporte del ide para JQuery es de prueba y sólo duraunos pocos días. Si queremos tener dicha ayuda deberemos pagar por la versión pro que ronda los 100$usd. De ahí que al final me decantase por Netbeans, ya que, si usamos la versión sin comprimir de JQuery podremos acceder al menú contextual cuando pulsemos el punto, mostrándonos información muy útil sobre cada función (navegadores soportados, modo de uso, ejemplos, etc).

Antes de entrar de llenocon la función ajax de JQuery explicaré lévemente el uso de esta biblioteca.
Hasta ahora, cuando queríamos acceder a un elemento de la página web mediante JavaScript debíamos ejecutar la instrucción document.getElementById(‘’). Con JQuery la cosa cambia, debemos usar la función factory ($()) para acceder a los elementos de la página web. Por ejemplo, si tenemos un textbox con el identificadorTBnombre, para poder acceder a su texto ejecutaríamos la instrucción $(‘#TBnombre’).val(); y para establecer un texto en él $(‘#TBnombre’).val(“David”);. En el caso en el que quisiéramos seleccionar todos los objetos que pertenecen a una clase en concreto deberíamos usar la función factory así, $(‘.miClase’).
Otra característica de JQuery es su función ready, la cual nos permite ejecutar códigoJavaScript una vez se ha cargado el DOM. Podemos usar esta función tantas veces como queramos. Así nos desligamos totalmente del evento onload que se produce cuando una página web se ha cargado completamente, permitiendo así, evitar tocar el propio código html de la página. Podemos utilizar esta función para asociar eventos a objetos de la página, como eventos click a un botón, eventos blur a textbox,eventos change a combobox, etc. Para asociar un evento a un objeto lo realizaremos de la siguiente manera,$(‘#Benviar’).click(function(){//aquí el código que ejecutará el manejador del evento});. Los eventos click, blur y change pertenecen a una serie de eventos abreviados, ya que, la forma normal que nos permite asociar cualquier evento a un objeto es $(‘#Benviar’).bind(‘click’, function(){//aquíel código que ejecutará el manejador del evento});. Estos son algunos de los eventos abreviados:
blur
change
click
dblclick
error
focus
keydown
keyup
keypress
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload
Tras esta breve introducción pasaré a explicar el uso de Ajax. Para ello utilizaré un ejemplo que he creado y que consta de tresficheros. Por un lado está la biblioteca JQuery sin comprimir, y por otro la página web index.html que es la encargada de realizar las llamadas y un fichero rpcDatos.php encargado de recibir la petición, procesarla y devolver en un fichero xml los resultados. En este caso, la página index.html contiene un combobox con una serie de ciudades de manera que, cuando pulsemos el botón ‘Obtener datos’, se...