Request / Ajax

Framework7 comes with handy Request library to work with XHR requests (Ajax) right from the box.

It is available as a **request** property of Framework7 class (Framework7.request) and same property on initialized app instance (app.request):

// If we need it in place where we don't have access to app instance or before we init the app
Framework7.request.get('somepage.html', function (data) {
  console.log(data);
});
// After we init the app we can access it as app instance property
var app = new Framework7({ /*...*/ });
app.request.get('somepage.html', function (data) {
  console.log(data);
});

API

app.request(parameters)- Load data from the server

• parameters - object - Request parameters

Returns plain XHR object

Framework7.request(parameters)- Load data from the server

• parameters - object - Request parameters

Returns plain XHR object

Let’s look at the list of available parameters

app.request({
  url: ‘somepage.html’,
  statusCode: {
    404: function (xhr) {
      alert(‘page not found’);
    }
  }
})

Shorthand Methods

Request comes with some pre configured methods for ease of use.

Get

app.request.get(url, data, success, error, dataType)- Load data from the server using a HTTP GET request

• url - string - Request url
• data - object - A plain object or string that is sent to the server with the request. Optional
• success - function (data, status, xhr) - A callback function that is executed if the request succeeds. Optional
• error - function (xhr, status) - A callback function that is executed if the request fails. Optional
• dataType - string - The type of data that you’re expecting back from the server. Could be text or json. Optional

Returns plain XHR object

Framework7.request.get(url, data, success, error, dataType)- Load data from the server using a HTTP GET request

Returns plain XHR object

For example:

var app = new Framework7();
var $$ = Dom7;
app.request.get('blog-post.php', { foo:'bar', id:5 }, function (data) {
  $$('.articles').html(data);
  console.log('Load was performed');
});

Post

app.request.post(url, data, success, error, dataType)- Load data from the server using a HTTP POST request

• url - string - Request url
• data - object - A plain object or FormData or string that is sent to the server with the request. Optional
• success - function (data, status, xhr) - A callback function that is executed if the request succeeds. Optional
• error - function (xhr, status) - A callback function that is executed if the request fails. Optional
• dataType - string - The type of data that you’re expecting back from the server. Could be text or json. Optional

Returns plain XHR object

Framework7.request.post(url, data, success, error, dataType)- Load data from the server using a HTTP POST request

Returns plain XHR object

For example:

var app = new Framework7();
var $$ = Dom7;
app.request.post('auth.php', { username:'foo', password: 'bar' }, function (data) {
  $$('.login').html(data);
  console.log('Load was performed');
});

Json

app.request.json(url, data, success, error)- Load JSON-encoded data from the server using a GET HTTP request

• url - string - Request url
• data - object - A plain object or FormData or string that is sent to the server with the request. Optional
• success - function (data, status, xhr) - A callback function that is executed if the request succeeds. Optional
• error - function (xhr, status) - A callback function that is executed if the request fails. Optional

Method nothing returns

Framework7.request.json(url, data, success, error)

Method returns nothing

For example:

Framework7.request.json('items.json', function (data) {
  console.log(data);
});
var app = new Framework7();
app.request.json('users.json', function (data) {
  console.log(data);
});

PostJSON

app.request.postJSON(url, data, success, error, dataType)- Send JSON data using a HTTP POST request

• url - string - Request url
• data - object - A plain object
• success - function (data, status, xhr) - A callback function that is executed if the request succeeds. Optional
• error - function (xhr, status) - A callback function that is executed if the request fails. Optional
• dataType - string - The type of data that you’re expecting back from the server. Could be text or json. By default is json. Optional

Returns plain XHR object

Framework7.request.postJSON(url, data, success, error, dataType)- Send JSON data using a HTTP POST request

Returns plain XHR object

For example:

var app = new Framework7();
var $$ = Dom7;
app.request.postJSON('http://api.myapp.com', { username:'foo', password: 'bar' }, function (data) {
  console.log(data);
});

Request Setup

app.request.setup(parameters)- Set default values for future Ajax requests. Its use is not recommended

• parameters - object - Default requests parameters

Framework7.request.setup(parameters)- Set default values for future Ajax requests. Its use is not recommended

For example:

// After the following setup all XHR requests will have additional 'Autorization' header
Framework7.request.setup({
  headers: {
    'Authorization': 'sometokenvalue'
  }
})

Original Request Parameters

Each of request methods returns plain XHR object, which is also available in callbacks. This default XHR object is extended with the following properties: