Welcome back! I ho[e that you had as much fun working through the last tutorial as I did creating the content. Today, we will briefly introduce JQuery, which is a lightweight JavaScript library. A library gives us access to additional functions that make our lives as programmers easier. The code presented below is an alteration of the code we finished last week. So, our app will have the same functionality with a more concise approach. So, how we download the JQuery library to use in our app. One way is to use the Google CDN by simply adding another script tag. The tag on line 44 of the HTML document below shows how this is done. Now, let’s look at the changes to our JavaScript file.

Below, you will notice some significant changes to the code that you wrote for our introduction into RESTful web services. Some of this is JQuery, and some is just making use of some new syntax offered in ES6 to clean up our code a little bit. I will start with explaining this difference in syntax. Look at line 21 below and you will see that we have taken out the string concatenation operator and substituted the syntax ${variable}. This is called using template literals. The strings are then surrounded by back ticks instead of quotes. This allows us to do away with the string concatenation, and make our code cleaner and more concise. I use this functionality throughout the rest of the file as well.

Now, let’s look at what I have done with replacing the for loops that we had last week. First look at line 30. Here I am using the spread operator to add all our books to the array instead of looping over all the JSON. Now, behind the scenes it is still conducting the same operation. It just cleans up our code a bit. Lastly, on lines 33 and 41, I am using a combination of the map and join array methods instead of the forEach loop that we used before.  The map method allows us to call a function on each item in an array, and returns a new array. The join method joins all the items of an array, in this case with an empty string.

Now, let’s get into the AJAX portion of the code. AJAX allows us to make an asynchronous request to a server and return the data. Under the hood, it is using the XMLHttpRequest that we used with our code from last week. The difference here is that we are calling a method from the JQuery library to complete the same task. This makes for more concise code. The $ before the ajax method call is shorthand for calling JQuery. Think of it as saying JQuery.ajax(). Next, we tell method that dataType coming back will be JSON, we give the URL to retrieve the data, and we tell it that it is going to be a GET request. The success parameter is a callback function that will execute on successful retrieval of the data.  And now we have made the same request using the JQuery.ajax() method.

Next week, we will dig a bit more into JQuery and start building a whole new app using this functionality. Thanks for stopping by. If you have any questions, post them in the comment section below. And, remember to share this post on your favorite social media platform.  I’ll see you again next week.

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s