Sencha Touch - Ajax

Ajax é JavaScript assíncrono e xml. O Ajax fornece a facilidade de buscar e carregar os dados sem atualizar a página inteira.

O Sencha Touch fornece a facilidade de usar ajax para carregar e armazenar os dados. No ajax, podemos buscar e armazenar dados do mesmo domínio. Não nos permite trocar dados entre domínios diferentes.

Por exemplo, se você estiver usando um domínio www.myApp.com, então você pode trocar dados entre diferentes páginas do mesmo domínio, como www.myApp.com?page=1 ou www.myApp.com/#Page.html. No entanto, se você estiver no domínio www.myApp.com e quiser trocar os dados de ou para domínios diferentes, como www.myNewApp.com, isso não permitirá que você faça isso.

Embora o Ajax tenha a restrição, o Sencha Touch oferece a flexibilidade de trocar dados entre diferentes domínios, o que aprenderemos nos capítulos subsequentes.

Solicitação Ajax simples

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 é o método para fazer uma solicitação ajax.

Existem diferentes parâmetros passados em uma chamada ajax. O primeiro parâmetro éURL do domínio onde a solicitação ajax é feita.

O segundo parâmetro é o methodque decide a finalidade de fazer uma solicitação ajax, como GET, POST, PUT, DELETE. Get é apenas buscar dados. POST é criar novos dados e salvá-los. PUT é para atualizar ou substituir os dados existentes no servidor. DELETE é excluir alguns dos registros.

O próximo parâmetro é params em que enviamos dados na forma de JSON, o que ajuda na busca e armazenamento de dados.

Header parametermostra o tipo de dados enviados pelo servidor para a solicitação. No exemplo acima, os dados retornados serão json.

Callback no método mais útil que torna todo o conceito de ajax assíncrono. Conforme a solicitação é enviada, o servidor irá processá-la e enviar a resposta de volta. Assim que obtivermos a resposta, a função de retorno de chamada será chamada. Com base nisso, podemos obter sucesso, falha ou retorno de chamada normal.

Portanto, se a resposta for bem-sucedida, o retorno de chamada bem-sucedido será chamado e, se a resposta for falha, o retorno de chamada com falha será chamado. Se não definirmos nenhum sucesso ou falha, o retorno de chamada normal será chamado. Nos retornos de chamada, podemos escrever o código que queremos processar somente depois de obter uma resposta específica.

Às vezes, uma solicitação demora muito para responder e ocorre um tempo limite. O tempo padrão para tempo limite é 30 segundos. Podemos personalizá-lo pelo parâmetro de tempo limite passado na solicitação ajax. Como no exemplo acima, o tempo limite é de 5000 milissegundos. Assim que o tempo limite ocorre, a função de falha é chamada.

Também é possível abortar a solicitação chamando.

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

Depois que a solicitação é abortada, o retorno de chamada com falha é chamado. Se response.aborted retornar verdadeiro, a falha ocorre devido à solicitação de aborto.

Solicitação de domínio cruzado

O pedido Ajax pode estar apenas no mesmo domínio, no entanto, o Sencha fornece o recurso de fazer pedidos entre domínios.

O navegador moderno oferece um novo recurso CORS (compartilhamento de solicitação de origem cruzada) para que a solicitação de domínio cruzado possa ser feita sem restrição de segurança do navegador. Se o seu servidor da web tiver CORS habilitado, então no Sencha Touch você precisa fornecer o parâmetro na solicitação ajax e você pode fazer solicitações entre domínios.

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

↰ Previous page