Sencha Touch - Ajax

Ajax es JavaScript asincrónico y xml. Ajax proporciona la posibilidad de recuperar y cargar los datos sin actualizar toda la página.

Sencha Touch ofrece la posibilidad de utilizar ajax para cargar y almacenar los datos. En ajax, podemos obtener y almacenar datos del mismo dominio. No nos permitirá intercambiar datos entre diferentes dominios.

Por ejemplo, si está utilizando un dominio www.myApp.com, luego puede intercambiar datos entre diferentes páginas del mismo dominio, como www.myApp.com?page=1 o www.myApp.com/#Page.html. Sin embargo, si está en el dominio www.myApp.com y desea intercambiar los datos hacia o desde diferentes dominios, como www.myNewApp.com, entonces no le permitirá hacerlo.

Aunque Ajax tiene la restricción, Sencha Touch le brinda la flexibilidad de intercambiar datos entre diferentes dominios, lo que aprenderemos en capítulos posteriores.

Solicitud simple de Ajax

Ext.Ajax.request({
   url: 'myUrl', Method: 'GET', timeout: 5000, params: {
      username: 'Ed', id: '1234'
   },
   headers: {
      "Content-Type": "application/json"
   }, 
   success: function(response) {
      console.log("The request was successfull");
   }, 
   failure: function(response) {
      console.log("Request is failed");
   }, 
   callback: function(options, success, response) {
      console.log(response.responseText);
   }
});

Ext.Ajax.request es el método para realizar una solicitud ajax.

Hay diferentes parámetros pasados en una llamada ajax. El primer parámetro esURL del dominio donde se realiza la solicitud ajax.

El segundo parámetro es el methodque decide el propósito de realizar una solicitud ajax como GET, POST, PUT, DELETE. Obtener es solo obtener datos. POST es crear nuevos datos y guardarlos. PUT es actualizar o reemplazar los datos existentes en el servidor. ELIMINAR es eliminar algunos de los registros.

El siguiente parámetro es params en el que enviamos datos en forma de JSON, lo que ayuda a obtener y almacenar datos.

Header parametermuestra el tipo de datos enviados por el servidor para la solicitud. En el ejemplo anterior, los datos devueltos serán json.

Devolución de llamada en el método más útil que hace que todo el concepto de ajax sea asíncrono. A medida que se envía la solicitud, el servidor procesará la solicitud y devolverá la respuesta. Una vez que obtengamos la respuesta, se llamará a la función de devolución de llamada. En base a eso, podemos tener éxito, falla o devolución de llamada normal.

Por lo tanto, si la respuesta es exitosa, se llamará a la devolución de llamada exitosa, y si la respuesta es falla, se llamará a la devolución de llamada con falla. Si no definimos ningún éxito o fracaso, se llamará a la devolución de llamada normal. En las devoluciones de llamada, podemos escribir el código que queremos procesar solo después de obtener una respuesta en particular.

A veces, una solicitud tarda demasiado en responder y se agota el tiempo de espera. El tiempo de espera predeterminado es de 30 segundos. Podemos personalizarlo mediante el parámetro de tiempo de espera pasado en la solicitud ajax. Como en el ejemplo anterior, el tiempo de espera es de 5000 milisegundos. Una vez que se agota el tiempo de espera, se llama a la función de falla.

También es posible cancelar la solicitud llamando.

var myReq = Ext.Ajax.request({
   url: 'myUrl', failure: function(response) {
      console.log(response.aborted); 
   }
});
Ext.Ajax.abort(myReq);

Una vez que se cancela la solicitud, se llama a la devolución de llamada de falla. Si response.aborted devuelve verdadero, entonces la falla ocurre debido a la solicitud de aborto.

Solicitud de dominio cruzado

La solicitud Ajax solo puede estar en el mismo dominio, sin embargo, Sencha proporciona la posibilidad de realizar solicitudes entre dominios.

El navegador moderno proporciona una nueva característica CORS (intercambio de solicitud de origen cruzado) para que la solicitud de dominio cruzado se pueda realizar sin restricciones de seguridad del navegador. Si su servidor web tiene habilitado CORS, entonces en Sencha Touch debe proporcionar el parámetro en la solicitud ajax y puede realizar solicitudes entre dominios.

Ext.Ajax.request({
   url: 'https://www.myNewDomain.com/newPage.html', withCredentials: true, useDefaultXhrHeader: false
});

↰ Previous page