Inside the RemoteDataStore module, you will use jQuery’s $.post method. This method sends a POST request in the background as an XMLHttpRequest object (Figure 13.3).

Figure 13.3  RemoteDataStore uses jQuery for Ajax

The $.post method only requires two pieces of information: the URL of the server to send the request to and what data to include.

In remotedatastore.js, update the body of the add method so that it calls $.post, passing it this.serverUrl and the val.

...
  RemoteDataStore.prototype.add = function (key, val) {
  // Code will go here
    $.post(this.serverUrl, val);
  };

  App.RemoteDataStore = RemoteDataStore;
  window.App = App;
...

Notice that the key argument is not used. It is kept as part of the method declaration so that the add method of RemoteDataStore is identical to the add method of DataStore. Both take the coffee order information as the second argument. For the RemoteDataStore, this is the crucial part.

Like many jQuery methods, $.post can accept additional, optional arguments. You are going to pass it a callback function as a third argument. When the response arrives from the server, this function will be called and the data in the response will be passed to it.

This is similar to the event handling code you have written – you register a function to run at some point in the future. When handling events, this point is something like a mouse click or a form submission. When handling remote data, it is the the arrival of a response from the server.

Add an anonymous function as the third argument to $.post. This anonymous function should expect an argument, which you will label serverResponse. Print this serverResponse to the console using console.log.

...
  RemoteDataStore.prototype.add = function (key, val) {
    $.post(this.serverUrl, val, function (serverResponse) {
      console.log(serverResponse);
    });
  };

  App.RemoteDataStore = RemoteDataStore;
  window.App = App;
...

Now $.post knows three things: who to talk to, what to say, and what to do with the information it gets back in the response.

After you save these changes to remotedatastore.js, start browser-sync and open the console in your browser. Instantiate a RemoteDataStore object with the URL shown below, which is the address of the test server created for this book. (Once again, this line is broken in order to fit on the page; enter it on one line.)

var remoteDS = new App.RemoteDataStore
    ("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders");

Now invoke its add method, passing it some test data:

remoteDS.add('[email protected]', {emailAddress: '[email protected]', coffee: 'espresso'});

In the console, look at what was printed from your console.log statement (Figure 13.4).

Figure 13.4  Console showing result of calling RemoteDataStore.add

The object in the console’s log statement contains some information sent back by the server in its response: the coffee and emailAddress information, in addition to some bookkeeping data that will vary from server to server.

In the DevTools, open the network panel by clicking Network in the menu at the top (between Sources and Timeline). This panel shows a list of requests that your browser has made and lets you inspect each of them for more information (Figure 13.5).

Figure 13.5  Viewing Ajax requests in the network panel

Your network panel will likely have many network requests in the list. Clear it out by clicking the icon near the upper left of the DevTools. Then activate the console drawer at the bottom so you can see the console as well as the network panel. You can do this by pressing the Escape key on your keyboard or by clicking the icon in the upper right. This will open a menu with the option Show console.

The console drawer will appear at the bottom of the DevTools (Figure 13.6).

Figure 13.6  Console drawer open below the network panel

In the console, enter the following:

var remoteDS = new App.RemoteDataStore
    ("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders");
remoteDS.add('[email protected]', {emailAddress: '[email protected]', coffee: 'espresso'});

You will see a new entry in the network panel (Figure 13.7).

Figure 13.7  Ajax request in network panel

To find out more about the request, click on its entry (Figure 13.8). You may find it easier to view the details if you hide the console drawer.

Figure 13.8  Request details

The details include some general information about the request at the top and the form data at the bottom. In the middle are panes that show the request and response headers. Headers are metadata and options that have been specified for the request and response.

Of all this data, the status code (in the General pane) and the Form Data pane are usually the most useful while developing and debugging Ajax requests.