martes, junio 14, 2011

Actualización de datos en página web mediante AJAX y JSON

Supongamos que tenemos una página web en la que queremos rellenar una lista o un combo en función de otro dato introducido o seleccionado por el usuario. ¿Cómo podemos hacerlo sin tener refrescar la página? La respuesta es AJAX.

Utilizando la técnica AJAX desde la página web (cliente) mediante Javascript se pueden hacer peticiones de datos al servidor (GET, POST). Para ello se utiliza el objeto XMLHttpRequest como se muestra en el siguiente ejemplo:

<head>
<script type="text/javascript">
    peticion = new XMLHttpRequest();
    function obtenerDatos(url) {
        if (peticion) {
            peticion.open("GET", url, false); // Abrimos la url de forma síncrona (que no es lo habitual en AJAX)
            peticion.send(null); // Enviar la petición, sin datos adicionales.
            document.getElementByID('listaDeDatos').innerHTML = peticion.responseText; //Escribir la respuesta en el campo listaDeDatos
        }
    }
script>
head>
 
<body>
    <button onclick="obtenerDatos('miPagina/datosDeLoQueSea.xml')" >Obtener datosbutton>
    <table>
        <tr>
            <td>
                <span id="listaDeDatos">Pulsar botón para obtener datosspan>
            td>
        tr>
    table>
body>

En el ejemplo anterior se incrusta el fichero de datos datosDeLoQueSea.xml en la página web. Pero si lo que queremos es obtener un conjunto de datos y trabajar con ellos en nuestro fragmente de Javascript, necesitaremos un método en la parte servidor (identificable por una url determinada) que retorne los datos.


public JsonResult Combinaciones(subconjunto)
{
    private MyEntities db = new MyEntities();

    var list = from medida in db.MedidasNeumaticos
where medida.Subconjunto = subconjunto
        select new { Text = medida.Ancho, Value = medida.Ancho };
 
    return this.Json(list.ToList(), JsonRequestBehavior.AllowGet);
}

En este caso, la url a la que se debería llamar en el open es ruta/Combinaciones/225, donde 225 es el parámetro que se le para al método Combinaciones. En peticion.responseText tendremos el resultado. Obsérvese el uso de JSON en vez de XML. La gran ventaja de JSON frente a XML es que para utilizar los datos JSON desde Javascript es suficiente con hacer un eval:


var miObjeto = eval('(' + peticion.responseText + ')');

Esto tiene alguna implicaciones respecto a la seguridad, porque el eval de JavaScript acepta cualquier cádena valida que contenga código JavaScript. Para evitar esto problemas es mejor usar un parser de JSON para JavaScript, que solo acepta JSON valido. El parser permite hacer:

var miObjeto = miobjeto_como_Json_string.parseJSON();

para reconstruir el objeto JavaScript desde su representación textual en JSON y
 
var miobjeto_como_Json_string = miobjeto.toJSONString();

para obtener la representación JSON del objeto, por ejemplo para devolverlo usando técnicas AJAX al servidor.


Un ejemplo utilizando el modo asíncrono:

    var http_request = new XMLHttpRequest();
    var url = "http://example.net/jsondata.php"// Esta URL debería devolver datos JSON
 
    // Descarga los datos JSON del servidor.
    http_request.onreadystatechange = handle_json;
    http_request.open("GET", url, true);
    http_request.send(null);
 
    function handle_json() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                var json_data = http_request.responseText;
                var the_object = eval("(" + json_data + ")");
            } else {
                alert("Ocurrio un problema con la URL.");
            }
            http_request = null;
        }
    }


Más información en:

http://es.wikipedia.org/wiki/AJAX
http://es.wikipedia.org/wiki/JSON
http://www.json.org/ 
http://geeks.ms/blogs/rcorral/archive/2006/06/23/545.aspx#8422
http://www.elrincondeajax.com/manual-ajax/
http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx

No hay comentarios:

Publicar un comentario