JSON 2

---

En esta segunda entrada veremos cómo podemos enviar un objeto de forma asíncrona utilizando JSON.

Tomando el ejercicio anterior como preámbulo, utilizaremos el mismo objeto Product para realizar el envío de información.

El primer problema que podemos encontrar es que la notación JSON no es tan fácil de generar (no es algo del otro mundo pero definitivamente quita mucho tiempo).    Para facilitarnos el trabajo existe una librería llamada json.js que podemos descargar de aquí.

Esta librería expone una función llamada stringify que nos ayudará a traducir un objeto javascript a su notación JSON correspondiente.

Vamos a modificar nuestro handler AddProduct.ashx para que reciba el objeto y simule meterlo a una base de datos.    Primero debemos agregar referencia al espacio de nombres donde está definido el objeto JavaScriptSerializer:

using System.Web.Script.Serialization:

En el procedimiento ProcessRequest vamos a recibir el objeto JSON y lo vamos a "deserializar" al objeto Producto que tenemos en nuestra página web.

public void ProcessRequest(HttpContext context)
{
    string jsonProduct = context.Server.UrlDecode(Uri.UnescapeDataString(context.Request.Form.ToString()));
    JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
    DataObjects.Product product = jsSerializer.Deserialize<DataObjects.Product>(jsonProduct);
    System.Threading.Thread.Sleep(2000);
}

En la primera línea de código estamos primero decodificando con la función UnescapeDataString para quitar todos los caracteres que comienzan con "%", por ejemplo %20 que es el espacio en blanco; después estamos utilizando la función UrlDecode para cambiar todos los "+" por espacios en blanco.    Al final de estas dos funciones obtenemos el código JSON que nos fue enviado desde el cliente.

Con la tercera línea de código estamos tomando el código JSON y lo estamos convirtiendo en el objeto Product que le corresponde en nuestro proyecto.    Las características del objeto Product permiten realizar esta operación (propiedades públicas de lectura y escritura cuyos nombres coinciden con las propiedades del objeto JSON).

Finalmente estamos llamando a la función Sleep para simular que estamos llevando a cabo un proceso de registro.

Ahora vamos a ajustar nuestro archivo Products.htm para que haga la llamada al servidor.   Primero agregaremos una referencia a la librería json.js:

<script type="text/javascript" language="javascript" src="js/json.js"></script>

Después agregaremos un botón para ejecutar la función que enviará el objeto al servidor:

<input type="button" value="Send product" onclick="return sendProduct()" />

Y finalmente crearemos nuestro function sendProduct que será la encargada de realizar el POST al servidor:

function sendProduct() {
    var myProduct = new Product(1, 'Product 1');
    $.ajax({
        'type': 'POST',
        'dataType': 'json',
        'data': JSON.stringify(myProduct),
        'url': '/Handlers/AddProduct.ashx',
        'success': sendProduct_success,
        'error': sendProduct_error
    });
}
function Product(id, name) {
    this.Id = id;
    this.Name = name;
}
function sendProduct_success(d) {
    alert('El producto ha sido registrado');
}
function sendProduct_error(d) {
    alert('Mmm... algo anda mal');
}

Podemos darnos cuenta que:
1. He creado un objeto personalizado llamado "Product" que está definido de igual forma que el que tenemos en DataObjects.Product en el servidor, esto es para evitar problemas de serialización/deserialización.
2. El tipo de la llamada es POST.
3. Estamos especificando que el tipo de información que estamos enviando es json.
4. Utilizamos la función JSON.stringify para traducir nuestr objeto myProduct a JSON.

Espero les haya sido de mucha utilidad.