Tip ExtJS.Ajax : Llamada Ajax JSON en Aplicacion ASP.Net

Un tip rapido para aquellos que desarrollan aplicaciones utilizando como las librerias javascript de Sencha ExtJS.

Estas librería, contiene una gran cantidad de widgets para que nos permite crear aplicaciones con un gran parecido a las aplicaciones de escritorio, ademas de muchas funcionalidades que pueden hacer de nuestros desarrollos un gran éxito con nuestros clientes.

Yo recomiendo si quieren utilizar ExtJS con ASP.Net utilizar Ext.Net, aunque en las ultimas versiones ya no se puede descargar la dll directamente para quitar el mensaje de utilizar una libreria de prueba, lastima eso.





Bueno imaginemos que deseamos hacer una llamada ajax utilizando ExtJS, asi que similar a como explique en el post Tutorial de ASP.NET JQuery AJAX usando WebMethods y JSON consulta LinQ o si quieren profundizar algo más avanzado sobre el uso de JQUERY, pueden ver Tutorial de ASP.NET JQuery AJAX, JSON y LINQ : Insertar registro en una tabla

Entonces, usaremos ExtJS en vez de usar JQuery.

Llamada AJAX con ExtJS

ExtJS tiene una funcion sencilla que es Ext.Ajax.Request, sus propiedades son :

• method: Definimos como viajan nuestros parametros, por POST o GET
• extraParams: Es donde definimos los parametros que recibirá nuestro servicio
• url: la dirección donde se encuentra nuestro servicio o página.
• defaultHeaders: Es un objeto que contiene la definición de la cabecera de nuestra llamada Ajax.

Definido esto podemos hacer una llamada AJAX a un servicio de ASP.Net de la siguiente manera:

Ext.Ajax.request({
   url: 'servicio.asmx/metodo',
   method: 'POST',
   success: function(response, opts){
     //Capturamos la informacion de respuesta
     var json=Ext.decode(response.responseText.d);
   },
   failure: function(response, opts){
    //Capturamos el error
     console.log('codigo de error del servidor : ' + response.status);
   },
   params: { foo: 'bar' }
});

Corregir Webservice error: Request format is unrecognized for URL unexpectedly

Si al hacer con ExtJS su llamada AJAX les aparece el siguiente error Webservice error: Request format is unrecognized for URL unexpectedly, lo que deben hacer es agregar en nuestra llamada un header donde definamos que la llamada es JSON, nuestro metodo queda de la siguiente manera:

Ext.Ajax.request({
   headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
   },
   url: 'servicio.asmx/metodo',
   method: 'POST',
   success: function(response, opts){
     //Capturamos la informacion de respuesta
     var json=Ext.decode(response.responseText.d);
   },
   failure: function(response, opts){
    //Capturamos el error
     console.log('codigo de error del servidor : ' + response.status);
   },
   params: { foo: 'bar' }
});

Espero les sea de ayuda.