Sencha Touch - Ajax

---

---

Ajax is Asynchronous JavaScript and xml. Ajax provides the facility to fetch and load the data without refreshing the whole page.

Sencha Touch provides the facility to use ajax to load and store the data. In ajax, we can fetch and store data from the same domain. It won’t allow us to exchange the data between different domains.

For example, if you are using a domain www.myApp.com, then you can exchange data between different pages of the same domain such as www.myApp.com?page=1 or www.myApp.com/#Page.html. However, if you are at domain www.myApp.com and you want to exchange the data to or from different domains such as www.myNewApp.com, then it will not permit you to do so.

Even though Ajax has the restriction, Sencha Touch gives you the flexibility to exchange data between different domains, which we will learn in subsequent chapters.

Simple Ajax request

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 is the method to make ajax request.

There are different parameters passed in an ajax call. First parameter is URL of the domain where the ajax request is made.

Second parameter is the method which decides the purpose to make ajax request such as GET, POST, PUT, DELETE. Get is to only fetch data. POST is to create new data and save it. PUT is to update or replace the existing data on the server. DELETE is to delete some of the records.

Next parameter is params in which we send data in the form of JSON, which helps in fetching and storing data.

Header parameter shows the type of data sent by the server for the request. In the above example, the data returned will be json.

Callback in the most useful method which makes the whole ajax concept asynchronous. As the request is sent, the server will process the request and send the response back. Once we get the response, the callback function will be called. Based on that, we can have got success, failure, or normal callback.

Hence, if the response is successful, the success callback will be called, and if the response is failure, then the failure callback will be called. If we do not define any success or failure, then the normal callback will be called. In the callbacks, we can write the code we want to process only after getting a particular response.

Sometimes a request takes too long to respond back and a timeout occurs. The default time for timeout is 30 seconds. We can customize it by the timeout parameter passed in the ajax request. As in the above example, the timeout is 5000 milliseconds. Once the timeout occurs, the failure function is called.

It is also possible to abort the request by calling.

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

Once the request is aborted, the failure callback is called. If response.aborted returns true, then the failure occurs due to request abortion.

Cross Domain Request

Ajax request can be only in the same domain, however, Sencha provides the facility to make cross-domain requests.

Modern browser provides a new feature CORS (cross- origin request sharing) so that the cross-domain request can be made without browser security restriction. If your webserver has CORS enables, then in Sencha Touch you need to provide the parameter in the ajax request and you can make cross-domain requests.

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