AJAX, El complemento perfecto. Parte 3

Hola csharpedianos, les voy a compartir la ultima parte de de esta serie de posts hacerca de AJAX, y a decir verdad esta forma de utilizar AJAX es mi favorita, porque se hace con JQUERY, es super rapido, funcional y adaptable.
Cuando utlilizamos ScriptManager, al compilar la pagina, se inserta una cantidad de JavaScript que la hacen un poco mas pesada, afortunadamente con jquery esto no pasa.

JQuery trae incorporado un "módulo" de AJAX, que hace muy facil la utilización de este. Accedemos a la funcion de la siguiente manera:

$(document).ready(function(){
        $.ajax({
        });
})

Parámetros

JQuery admite un gran numero de parámetros para ajax. (Hay ejemplos de código despues de la tabla):
Esto lo he tomado de Cristalab ya que esta muy bien explicado y se me hacer mas facil y rapido. ;)

Parámetro	Explicacion	Valores
async	Determina que la cargada del objeto ajax se síncrona o asíncrona. Por lo general asíncrona es más útil, ya que la forma síncroa puede trabar el navegador hasta que la carga este completa	Boolean: true por defecto
beforeSend	Permite llamar una función antes de mandar el objeto ajax.	Función: El unico parametro el el objeto.
complete	Es una funcion que se ejecuta cuando el llamado al ajax esta completo. Permite saber si fue existoso	Funcion: Los valores que retorna son el objeto XMLHttpRequest y un string que indica el resultado.
contentType	Se usa cuando se mandan datos a los servidores a modo de encabezado.	String: "application/x-www-form-urlencoded" funciona perfectamente
data	Se usa para especificar datos a mandar. Estos tienen la siguiente forma: foo=bar&foo2=bar2;. Si los datos a enviar son un vector(array) jQuery los convierte a varios valores con un mismo nombre (si foo["alt1","alt2"], foo="alt1"&foo="alt2";)	Array / String con la forma antes mencionada.
dataType	Indica el tipo de datos que se van a llamar. Si no se especifica jQuery automaticamente encontrará el tipo basado en el header del archivo llamado (pero toma mas tiempo en cargar, asi que especificalo u_u)	"xml": Devuelve un documento XML. "html": Devuelve HTML con texto plano, y respeta las etiquetas. "script": Evalua el JavaScript y devuelve texto plano. "json": Evalua la respuesta JSON y devuelve un objeto Javascript
error	Se ejecuta si ocurre un error al llamar el archivo. Devuelve 3 parametros: El objeto, un string con el error, y un objeto adicional de error, si este ocurre.
global	Permite hacer que el objeto ajax obedezca o desobedezca las reglas para objetos ajax que el usuario pone.	Boolean: Por defecto true
ifModified	Permite que el objeto ajax se active solo si la pagina a cargar se ha modificado.	Boolean: Por defecto false
processData	Por defecto, cada objeto que no sea un string y sea pasado de otro documento, sera transformado en cadena. Para evitar que esto pase, este parametro se puede poner en false	Boolean: Por defecto true.
success	Permite ejecutar código al ser exitoso un llamado.	Función: Recibe los datos que fueron llamados
timeout	Permite definir un tiempo de espera antes de ejecutar un objeto ajax.	Núemro: Un número de milisegundos (ms)
type	Indica el método que se va a usar	"GET" o "POST"
url	Indica la url de la que va a cargar datos el objeto ajax.	String: La url local del documento.

Ejemplos

El codigo que necesitamos para hacer funcionar AJAX es el siguiente:

$.ajax({
      type: "GET",
      url: "prueba.js",
      dataType: "script"
      async:false;
}); 

En el codigo anterior estamos diciendo que el typo de peticion es GET, la url donde se ejecutara el codigo es prueba.js (Quiere decir que es un archivo local), el tipo de dato es script y que no es asincrono (osea que el usuario no podra interactuar con la pagina hasta que se termine la peticion de AJAX).

Para llamar a un metodo en una pagina ASPX, tendremos que declararlo como habialos indicado en la parte 2 de este posts, en el CodeBehind iria algo parecido a esto:

public partial class _Default : Page 
{ 

    [WebMethod]
    public static string HelloWorld()
    {
        return "Hello: " + DateTime.Now.Millisecond;
    }
}

y desde AJAX se llamaria asi:

          $.ajax({
                type: "POST",
                url: "Pagina.aspx/HelloWorld",
                data: "{}",
                contentType: "application/json",
                dataType: "json",
                success: function (msg) {
                   
                    $("#Resultado").text(msg.d);
                }
            });

En url indicamos la pagina en la cual haremos el llamado seguido por / y el nombre del metodo, en data pasaremos los parametros (en caso de que los necesitemos) que recogeremos en el metodo y en success declararemos una funcion que recibira un parametro el cual es el return del metodo en el servidor.


Aqui les dejo el codigo fuente

Les dejare la documentacion oficial de AJAX en JQuery:
Pagina oficial AJAX - JQuery

Les dejo tambien una presentacion en Power point que explica muy bien y da buenos ejemplos de AJAX y JQUERY:
Descargar


Un libro de AJAX en español, muy bueno:
Descargar

AJAX Y JQUERY es un mundo en el cual podremos pasarnos horas y escribir miles de posts hacerca de esto, asi que poco a poco iremos descubriendo mas cosas interesantes hacerca de esta tecnologia.

Que lo disfruten y no olviden comentar. ;)