The first method you will create is the add method to store customer order data on the remote web service.
Add a prototype method to RemoteDataStore. Like
DataStore’s add method, it
will accept arguments called key
and
val
. Note that it is not required for you to use
the same parameter names, but it is good practice to keep them
consistent.
... function RemoteDataStore(url) { ... } RemoteDataStore.prototype.add = function (key, val) { // Code will go here }; App.RemoteDataStore = RemoteDataStore; window.App = App; ...
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).
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).
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).
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).
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).
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.
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.
52.15.78.83