[Pregunta]: ¿Qué quiere decir esto? ($.ajax)

[Leguim]

Buenos días,
estuve escarbando por internet sobre long-polling y encontré este fragmento:

Código (javascript) [Seleccionar] Expandir


// long polling
subscribe: (callback) => { // esto no entiendo
   const pollUserEvents = () => { // esto no entiendo
       $.ajax({
           method: 'GET',
           url: 'http://localhost:8080/githubEvents',
           success: (data) => {
               callback(data) // process the data // esto no entiendo
           },
           complete: () => { // esto no entiendo
               pollUserEvents(); // esto no entiendo
           },
           timeout: 30000 // tampoco esto
       })
   }
   pollUserEvents() // esto no entiendo ¿por qué es ejecutado acá?
}


No explicó nada de este código simplemente dijo algo como "yo hago así" y mandó ese fragmento, capaz es una pelotudes pero no entiendo esas partes después lo demás que no marque si lo entiendo.

Muchas gracias...

[MinusFour]

Son expresiones de funciones flecha. La primera función espera una función de argumento que se ejecute cuando la petición termina (y esta solo en el caso cuando la petición fue exitosa). La segunda función que está anidada dentro de la primera función realiza la petición y crea el ciclo (independientemente del resultado), de modo que cuando termine esa petición vuelve a llamar a la segunda función que lanza nuevamente una petición y hace lo mismo.

Subscribe -> pollUserEvents -> callback -> pollUserEvents -> callback -> pollUserEvents

[@XSStringManolo]

IDENTIFICADOR:
subscribe: Es la key, identificador o referencia de una propiedad o metodo que pertence a un objeto.
Esto se entiende muy fácil con un objeto simple:

Código (javascript) [Seleccionar] Expandir

var persona =
{
nombre: "desconocido" ,
nombrar: function(nombre)
{ this.nombre = nombre; } ,
edad: 0
};

alert(persona["nombre"]);
persona.nombrar("Miguel");
alert(persona.nombre);Es igual que el índice de un array, pero en vez de utilizar un número, se usan palabras. También se puede usar el operador punto. En el ejemplo tienes ambos para acceder a nombre.

Como ves en mi ejemplo, nombrar sirve para dar nombre. En los objetos se suelen utilizar verbos como identificadores de las funciones/metodos. Y se usan nombres como identificadores para valores/propiedades.

subscribe se interpreta que va a ser una referencia de un metodo que servirá para subscribir. Teniendo por identificador del parámetro "callback", y entendiendo como funciona Long Polling se puede entender que es el método encargado de que una vez se reciba una petición del servidor, se vuelva a enviar otra petición al servidor para quedarse en modo escucha a la espera de que el servidor responda.


OPERADOR FLECHA
Es la sintaxis de una función con el operador flecha. Se introdujeron en EcmaScript6. Son funciones normales, como las de siempre, con pequeñas variaciones en el comportmiento, tipo de objetos disponibles, a que hace referencia this... Lo que más cambia a primera vista es la sintaxis.

Función Declarada sumar

Código (javascript) [Seleccionar] Expandir

function sumar ( sum1, sum2 ) { return sum1 + sum2; }

var resultado = sumar(5, 6); //11

Función Declarada Operador Flecha sumar

Código (javascript) [Seleccionar] Expandir

var sumar = ( sum1, sum2 ) => sum1 + sum2;

var resultado = sumar(5, 6); //11

Funcion Declarada saludar

Código (javascript) [Seleccionar] Expandir

function saludar(nombre) { alert("Hola " + nombre); }

Funcion Declarada Operador Flecha saludar

Código (javascript) [Seleccionar] Expandir

saludar = nombre => alert("Hola " + nombre);

function identificador (parámetro1, parámetro2) { expresion1; expresion2; return valor; }

() parámetro1 => expresión; {}

Color Rojo representa que es obligatorio.
Color Azul representa que se puede subtituir por el color Rojo anterior.
Color Verde es opcional.

Hay muchas más formas de crear funciones y otro tipos de funciones distintas. Pero no vienen al caso.


RESTO CÓDIGO
const pollUserEvents = () => { expresion; expresion2; ... }

const es una forma de definir una variable con valor fijo.

pollUserEvents es el identificador de la funcion.

() la función no recibe parámetros.

{ } corchetes que delimitan el cuerpo de la función.

Lo siguiente, mirando en su totalidad sin centrarnos en nada en específico, es un objeto como el objeto persona que te hice antes. Es un objeto que sirve para indicar las propiedades y métodos que queremos que tenga el metodo .ajax()
A simple vista puede liarte la sintaxis porque es un objeto grande, pero es lo mismo que hacer:
function mostrar (array)
{
alert(array);
}

mostrar( [1, 2, 3, 4, 5] );

Es decir, al método ajax() se le pasa como parámetro un objeto.

Por ejemplo el objeto persona

Código (javascript) [Seleccionar] Expandir

var persona =
{
nombre: "desconocido" ,
nombrar: function(nombre)
{ this.nombre = nombre; } ,
edad: 0
}; quedaría así dentro de $.ajax()

Código (javascript) [Seleccionar] Expandir

$.ajax({
nombre: "desconocido" ,
nombrar: function(nombre)
{ this.nombre = nombre; } ,
edad: 0
})


success: (data) => { }
success es llamada cuando se recive la respuesta. success es una referencia a una función flecha que utiliza data(lo que se recibe del server) como parámetro y ejecuta las expresiones que contiene en el cuerpo de la función/metodo.

callback(data)
El comentario de //process the data va dirigido a ti. Te dice que hagas lo que quieras con la respuesta del servidor. El callback lo que hace es esperar a que se ejecute tu expresión.


complete: () => { }
Cuando se complete de procesar la respuesta independientemente de que tenga errores o no, se ejecutan las expresiones que contiene entre corchetes.

pollUserEvents();
La llamada está dentro del cuerpo de complete cuando se complete una respuesta, se llamara al método.

timeout: 30000
Este es el tiempo máximo que se espera por una respuesta antes de cerrarla. Casi siempre se suelen indicar en milisegundos. Es decir que si yo te mando Hola! A tu servidor, y no recibo respuesta, al pasar 30 segundos, se cierra la conexión.

})
Se cierra la definición del objeto. Se cierra la lista de de parámetros de $.ajax()

} Se cierra la definición del método pollUserEvents

Se llama al método pollUserEvents()
de forma recursiva para establecer un bucle infinito de escuchas al servidor, en el cual el cliente dice al servidor:
Chrome: Hola, espero tu respuesta.

Apache: Hola.

Apache: Qué tal todo?

Lo que hace el bucle nada más recibir "Hola" desde el servidor, es enviar otra petición al servidor para poder recibir "Qué tal todo?"

Es una forma de tener una conexión pseudopermanente para applicaciones que no sepan cuando el servidor les va a responder exactamente pero se esperen varias respuestas en espacios de tiempo cortos.

Aquí tienes varios métodos de $.ajax()

Aquí tienes las distintas versiones de javascript. La ES5 y la ES6 son las imprescindibles. ES5 la soportan 99% de los navegadores de hoy en día. ES6 así a ojo rondará un 95+% de soporte. En ES6 se introducen cambios muy importantes y que cada vez los verás de forma mucho más y más frecuente.