Sencha Touch - Ajax

Ajax est JavaScript et XML asynchrone. Ajax fournit la possibilité de récupérer et de charger les données sans actualiser la page entière.

Sencha Touch offre la possibilité d'utiliser ajax pour charger et stocker les données. En ajax, nous pouvons récupérer et stocker des données du même domaine. Cela ne nous permettra pas d'échanger les données entre différents domaines.

Par exemple, si vous utilisez un domaine www.myApp.com, vous pouvez alors échanger des données entre différentes pages du même domaine telles que www.myApp.com?page=1 ou www.myApp.com/#Page.html. Cependant, si vous êtes sur le domaine www.myApp.com et que vous souhaitez échanger les données vers ou depuis différents domaines tels que www.myNewApp.com, cela ne vous permettra pas de le faire.

Même si Ajax a la restriction, Sencha Touch vous donne la flexibilité d'échanger des données entre différents domaines, ce que nous apprendrons dans les chapitres suivants.

Requête Ajax simple

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 est la méthode pour faire une requête ajax.

Il existe différents paramètres passés dans un appel ajax. Le premier paramètre estURL du domaine où la requête ajax est effectuée.

Le deuxième paramètre est le methodqui décide du but de faire une requête ajax telle que GET, POST, PUT, DELETE. Get consiste à récupérer uniquement les données. POST consiste à créer de nouvelles données et à les enregistrer. PUT consiste à mettre à jour ou à remplacer les données existantes sur le serveur. DELETE consiste à supprimer certains enregistrements.

Le paramètre suivant est params dans lequel nous envoyons des données sous forme de JSON, ce qui aide à récupérer et à stocker des données.

Header parameteraffiche le type de données envoyées par le serveur pour la demande. Dans l'exemple ci-dessus, les données renvoyées seront json.

Callback dans la méthode la plus utile qui rend tout le concept ajax asynchrone. Lorsque la demande est envoyée, le serveur traite la demande et renvoie la réponse. Une fois que nous obtenons la réponse, la fonction de rappel sera appelée. Sur cette base, nous pouvons avoir un succès, un échec ou un rappel normal.

Par conséquent, si la réponse réussit, le rappel de réussite sera appelé, et si la réponse est un échec, le rappel d'échec sera appelé. Si nous ne définissons aucun succès ou échec, le rappel normal sera appelé. Dans les rappels, nous ne pouvons écrire le code que nous voulons traiter qu'après avoir obtenu une réponse particulière.

Parfois, une demande prend trop de temps pour répondre et un délai d'attente se produit. Le délai d'expiration par défaut est de 30 secondes. Nous pouvons le personnaliser par le paramètre timeout passé dans la requête ajax. Comme dans l'exemple ci-dessus, le délai d'expiration est de 5000 millisecondes. Une fois le délai écoulé, la fonction d'échec est appelée.

Il est également possible d'annuler la demande en appelant.

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

Une fois la demande abandonnée, le rappel d'échec est appelé. Si response.aborted renvoie true, l'échec se produit en raison d'une demande d'avortement.

Demande de domaine croisé

La requête Ajax ne peut être que dans le même domaine, cependant, Sencha fournit la possibilité de faire des requêtes inter-domaines.

Le navigateur moderne fournit une nouvelle fonctionnalité CORS (partage de demande inter-origine) afin que la demande inter-domaine puisse être effectuée sans restriction de sécurité du navigateur. Si votre serveur Web a activé CORS, alors dans Sencha Touch, vous devez fournir le paramètre dans la requête ajax et vous pouvez effectuer des requêtes inter-domaines.

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