AJAX Next Level (Authentication, Servers, Modules, Projects, and More)

1. Introduction

This video provides an introduction to the course.

2. Overview of AJAX

This video helps you with an overview of AJAX. When you surf the web, what you are really doing is making requests to servers. AJAX allows us to do this in an asynchronous way.

3. What Is AJAX and Where Did It Come From?

This video demonstrates how many developers starting out get intimidated with AJAX. But don't worry, it really is not a scary concept.

4. Traditional Request Versus AJAX Request

In this video, you will look at the differences between a traditional synchronous HTTP request and a modern AJAX request.

5. How Do You Write an AJAX Request?

This video explains that there are two options to make an AJAX request: you can use the XMLHttpRequest object, and you can also use the fetch() API.

1. Introduction - What Are We Going to Build

This video provides an introduction to what we are going to build together.

2. Setting Up the HTML

It's time to set up our first mini-project. In this video, you will look at VSC, why to use Live Server, and also set up the HTML.

3. Writing the CSS

In this video, we will turn our ugly duckling into a beautiful swan using CSS.

4. XHR AJAX - Fetching Text from Our Server

In this video, you will now use the XMLHttpRequest() object to fetch a .txt file, wait for a response, and then display that text on your HTML page.

5. XHR AJAX - Refactoring Code and Adding HTML to the DOM

This video shows you how to add HTML to the DOM dynamically and refactor our code slightly to have our main business logic outside of the AJAX onload callback.

6. XHR AJAX - Fetching JSON from Our Server

We have dealt with text data. Now, it's time to recap how you can work with JSON data received from a server.

7. The responseType Property

The responseType property allows you to define the expected response type you receive back from the server and convert whatever format is received from the server into your desired format. But do you think it works with JSON? The answer may surprise you.

8. Third-Party API

In this video, we will see what third-party API we will be using, so you can attempt to write the fetch request by yourself.

9. XHR AJAX - Fetching JSON from a Third-Party API

Let's finish off our XHR example by grabbing data from a third-party API.

10. Fetch AJAX - Retrieving Text from Our Own Server

Let's now refactor our XHR request into the modern Fetch API. First, we will perform a Fetch request to get/retrieve the contents of our internal text file.

11. Fetch AJAX - Retrieving JSON from Our Server and Third-Party API

It's time to finish off this entire example by completing our Fetch request to get JSON data.

1. Introduction to the Section

This video provides an introduction to this section.

2. What Are We Going to Build

We will build a simple input field where a user types in a food item, those items are sent to the server, and the server determines whether it is available. The appropriate message is then sent back to the client. We will create this example using a PHP server and using a Node.js backend server.

3. Write Our HTML

In this video, you will write and build our HTML file.

4. Setting Up Our AJAX Request

We will approach this project in steps. The first logical step is to grab what the user has typed in the element, and then send this to the server. In our example, we are sending the data to a PHP server. Luckily for us, PHP has a superglobal $_GET method that makes it easy for us (on the server) to grab a query string. That is why, in this example, we will insert the user input into the URL as a query parameter.

5. URL and Query Parameters

This video will finish off with completing our URL. You need to understand that when using a GET request, the data sent to the server will be done in key:value pairs. In other words, the data will be sent as a query string.

6. Writing Our PHP Server-Side Code

This course is not about server-side code. However, it's important that you understand how AJAX is used on the server side to grab data, process it, and send something back to the browser.

7. How to Access XML Data Returned by the Server

Usually, when working with the XHR object, we have to access data from the xhr.responseText property. But things are different when we start working with XML.

8. Retrieving Data from the PHP Server, and Inserting It into the DOM

This video shows you how you can retrieve the data received from our PHP server and display it into the

tag.

9. Finishing Off Our PHP Server Example

It's time to finish off our entire PHP / AJAX example.

10. Setting Up Node and Sending a Response

In the previous video, we finished our PHP example. It is now time to set up our Node server. In order to set up a server, we will import the HTTP module, see how to define custom headers, and then send a response to a browser.

11. Reading a Node Text Response

We have set up our Node server (using the HTTP module) but at this point, we have not received the data from the browser.

12. Completing Our Node Example

In this video, we will finish off our Node example to completion.

1. Introduction to Authentication

Don't get lost in the details. The original AJAX object had the ability to pass in user credentials (username and password). This was done to utilize the HTTP Basic Authentication scheme. This is why you should understand the Basic Authentication scheme.

2. Basic HTTP Auth in Action

This video shows you how you can use the browser and also the command prompt (the CURL) to see HTTP request header information. Then you will look at a high-level overview of how Basic HTTP Auth is working.

3. How Basic Authentication Works and Why Are We Discussing it in this Course

The XHR.open() method takes five arguments, the last two of which are username and password. The reason the open() method took these arguments was to make your life easier if you wanted to utilize HTTP Basic Auth.

4. Base64 Encoding Versus Encryption

If anyone can decode the base64 username and password, then what is its purpose? Is base64 the same as encryption? Let's dive into it.

5. Basic Authentication Compared to Traditional HTTP Requests

It wasn't until 1996 that the concept of authentication was introduced into the HTTP protocol. Before this, the Internet was only public. You could not have private URLs.

6. What Is Apache?

Apache is a web server. It is one of the most used webservers today (some say Apache is being run on over 70% of websites today).

7. Strike the Right Balance

This course is about AJAX. But to really understand AJAX, you need to understand why the XHR object had the option for passing in a username and password. In order to understand this, you need to understand Basic Authentication. And in order to understand Basic Authentication, you need to understand a little about server-side code.

8. How to Start an Apache Server

In order to use or "run" a server on your own machine, you need to download it first. For this, the easiest way is to install XAMPP. From there, you have a few options for how you want to start the server. You can start it from the command prompt and also start it from the XAMPP interface directly.

9. Setting Up Our Apache Server and .htaccess File

In this video, you will know how to start an Apache server and server your first index.html file. You will also set up a config file for your root directory in a file called .htaccess.

10. Adding Basic Authentication in Apache

You have to configure what type of authentication you are implementing on the server. Here, you will see how this can easily be done with Apache.

11. What Are We Going to Build

This is the project introduction video. You will be building a simple HTML form where the user types a username and password and clicks on a button that will reveal the secret message. We will use Basic Auth and AJAX to perform this request and authenticate the user.

12. Building the HTML

In this video, you will be building a simple HTML form. You will add an inline event listener to the form, listening for the "submit" event. When this event is fired, you will execute a function that will use AJAX to take the user input and send it to the server.

13. The preventDefault Method

The default behavior of a "submit" event inside of a

element is to refresh the entire page. We don't want this. Therefore, we can use the preventDefault() method. This method cancels the event if it is cancelable, meaning that the default action that belongs to the event (in our case, the page refresh) will not occur.

14. Sending User Credentials with AJAX, with Custom base64 Encoding

It's now time to finish off this example using the XHR object to send the user credentials alongside a request to access the protected secret.html file.

15. Using XHR for Basic Authentication

The entire purpose of this section was to get you to this point-to understand that the original AJAX object allowed you to pass in a username and password, and AJAX would set all the required headers in the background.

16. Creating a Custom Error Message in Apache

If the user types incorrect user credentials and hits cancel on the popup, we get sent back a generic Unauthorized Access message from Apache. In this video, we will see how we can send back a custom error message instead.

17. Updating Our Code to the Modern Fetch API

Today, we typically use the Fetch API to perform AJAX requests. So, this exercise would not be complete if you are not shown how to quickly convert your XHR object into a Fetch request.

18. Node Example - What Are We Going to Build?

This video talks about AJAX in this example and will introduce you to routes and how you can handle them on the Node server.

19. What is a Node Server?

In the previous example, we used an Apache server to serve files to the browser. In the next few videos, you will see how you can set up a Node server to do the same thing.

20. Setting Up Our Node Server

Remember, Node itself is a JavaScript environment. It can do different things such as execute JavaScript, read files, and so on. One of the things it can also do is set up an internal server. In this video, you will look at how to set up a Node.js server. You will look at two ways to do this. First, use the HTTP module; the second one is to use an express app.

21. Checking Whether the Authorization Header Exists

The first step in implementing authorization to a webpage is for the server to tell the browser that it requires authentication. In this video, you will see how you can set this up on your server.

22. Extract User Credentials Using Buffer

In this video, you will extract the "Basic base64_string" containing the user credentials and then return the username and password in separate variables. In order to do this, you need to use the Buffer.from() method, given by Node. You want to grab the username and place it in a variable. We want to grab the password and place it in a variable. Then compare whether these values match your system.

23. No Server-Side Language is Perfect

In the previous video, we used the Buffer.from() method, but if this is all we did then we would have a list of integers that are meaningless to us. This is why we have to then use the toString() method to convert the buffer into a readable string.

24. Finishing Off Our Node Example

Finally! In this video, we will finish off our Node example of adding authentication to our /secret URL.

25. The next() Function Stops Middleware

In this video, a few errors will be discussed. It explains more about the next() function and how you can use it. The code will be further cleaned up.

26. More about the next() Function

There are a few more important points about the next() function that will be covered in this video.

27. Spotted an Error

We have a slight issue here because if the user types in the incorrect credentials, we are redirecting the user to the /error page. Only after we redirect the user here, do we set the WWW-Authenticate header and the status code of 401. This will have the effect of telling the browser that we require user credentials to enter the /error page, when in fact we still want the request to be /secret.

28. Basic Authentication - Section Summary

This course is about AJAX, so why spend an entire section explaining how Basic Authentication works? It boils down to you really having a deep understanding of how the original XMLHttpRequest() object worked.

29. Section Outro

This is the outro video of the section.

1. Introduction to CORS

Before the web became complex, we did not have any concept of "origin". In other words, the web did not envisage that cross-site requests would ever be made. Fast-forward to today, and cross-site requests are being made all the time. In fact, when you are dealing with AJAX, you are bound to come across CORS-related issues all the time. That is why this section is so important.

2. Introduction to Same-Origin-Policy (SOP)

The Same-Origin-Policy was given to us a long time ago, even before AJAX as we know it today was introduced. SOP blocks all AJAX cross-origin requests.

3. Two Types of CORS Requests - Simple + Preflight

There are different types of CORS request that the browser can execute-SIMPLE and PREFLIGHT.

4. What is the HEAD Method

You have likely heard of common HTTP headers such as GET, POST, and DELETE. But did you know there is another method called HEAD? The HEAD method is used to request HTTP headers from the server. This means that nobody (in other words, no heavy resources) will be sent back by the server to the browser. This saves time compared to issuing a GET request. The reasons why you would want to use a HEAD request are numerous; for example, if you want to determine whether a resource (such as a PNG file) o

5. Simple CORS Request

When your browser makes an AJAX request to a third-party website, this request will be governed by CORS. There are two types of CORS requests, and in this video, we will look at the SIMPLE request. To remind you, this will apply if the HTTP method is GET, POST, or HEAD, and the Content-Type is text/plain, multipart/form-data or application/x-www-form-urlendcoded.

6. Foreword on the Purpose of a Preflight Request

Any request that is using a method that isn't GET or POST or HEAD or uses a Content-Type that isn't text/plain, application/x-www-form-urlencoded, and multipart/form-data will be triggered by a preflight request in this video.

7. CORS Preflight Request

Sometimes, before the main request is sent to a server, the browser decides to send a preflight request. Find out why in this video.

8. CORS in Action

Don't get lost in all of the details. Remember that CORS (and Same-Origin-Policy) is only applicable when you are making a request from SITE1 to SITE2. In other words, it's only applicable when you perform a cross-origin request. Now, we have seen CORS and SOP in action. Let's navigate to Google.com and send a request to apple.com and see what happens. You will notice the error message in Chrome is not as good (or correct) as the error message shown in Firefox.

9. Setting the Scene for a CORS Example

In the next few videos, we will set up an example where we will see CORS errors and then fix them together.

10. Setting Up Our HTML

In this video, we will write up our (very) simple HTML code so that we are ready to execute our AJAX requests. I have attached the index.html file here if you don't feel like coding alongside me. (Remember, you need to set up your project in the xampp/htdocs directly in order for Apache to serve the appropriate files.)

11. Performing a SIMPLE CORS Request

Let's ignore the server configuration for now and make an AJAX request to a cross-origin resource. What do you think will happen?

12. Missing the Access-Control-Allow-Origin Header

In the previous video, we saw that we are getting an error from the server. Basically, what is happening is that the server is not allowing any website that is cross-origin to request a resource. In order to fix this problem, we have to set the Access-Control-Allow-Origin header.

13. CSRF Attacks

Same-Origin-Policy does not block CSRF attacks. This video will not get into too much detail about what a CSRF attack is, but you do need to understand it at a high level. In this video, we will see an example of how an attacker could perform a CSRF attack and why SOP does not prevent it from happening.

14. How to Enable CORS on a SIMPLE Request

How do we solve our server error in the previous video? Answer: we need to set the Access-Control-Allow-Origin header on the server.

15. Adding the Access-Control-Allow-Origin on Our Server

It is now time to configure our Apache server to accept cross-origin requests. To do this, we need to set the Access-Control-Allow-Origin header on the server.

16. How to Initiate a PREFLIGHT CORS Request

Up until now, we have dealt with a very simple HTTP request. It is so simple, in fact, that the browser could send a SIMPLE CORS request to the server, without first sending a preflight request. Remember, in order for a SIMPLE CORS request to apply, the HTTP method needs to be either GET POST or HEAD, and the Content-Type needs to be either plain/text, x-www-form-urlencoded, or multipart/form-data. So, why don't we mix things up a little and configure the browser request to fetch JSON data inste

17. Sending a PREFLIGHT CORS Request by Setting Custom Content-Type Header

Let's jump back to our example and configure our front-end to send a more complicated CORS request. We will set the Content-Type header to application/json and this will trigger a preflight CORS request.

18. Setting the Access-Control-Allow-Headers on the Server

In the previous example, we tried to send a preflight request to the server, but we got an error. This error happened because the server needs to specify to the browser that it will accept a Content-Type header. We can fix this error by configuring the Access-Control-Allow-Headers directive in Apache.

19. Adding Basic Authentication

Up until this point, we have not had to deal with any authentication details. So, to finish off this entire example, let's add Basic Auth and see how it affects CORS.

20. CORS Summary

This entire section has been about CORS, a topic that scares the bravest and most experienced developer.

21. Outro

This is the section's outro video, where you have learned all about Same-Origin Policy and CORS.

1. Introduction to Section

Before we start writing our AJAX APIs, I want to start with defining the API endpoints in a server file. This may be a difficult section because we will be using Node.js to create our server and define routes. However, the author wants you to become a grandmaster at coding and therefore, you need to understand (even at a high level) what happens when an AJAX request hits a server.

2. Defining RESTful API Endpoints

In our course project, we will be defining various API endpoints. This is done so that different actions a user takes (adding a new dog, updating an existing dog, or deleting a dog) will get processed by the server in the correct way. We will keep our application REST compliant. But what exactly is REST and what makes a URL endpoint REST compliant?

3. First, We Will Build Server-Side Code and Then Only AJAX

As a developer, you have the artistic flare to build an application the way you wish. You will often see experienced developers writing server-side code before completing front-end code. So, in our course project, the author will show you how you can do this too.

4. Sneak Peek

This video will give you a sneak peek into our final course project and understand what we will be building.

5. Using NPM to Install the Express Framework

We don't have to use Express to build a successful application. We could, for example, use Node's inbuilt HTTP Module to set up a server and define routes. However, by using Express, our lives become a lot easier.

6. What is NPM and Node Modules

You would have noticed in the previous video that, to install Node, the terminal was opened and typed "npm install express". What do the letters "NPM" mean, and how could we just type it inside the terminal?

7. Viewing the Express Source Code Inside the node_modules Folder

You may have noticed that when we installed the Express framework to our project, a node_modules folder was created. If you open this up, you can find the express.js source file.

8. Setting Up Our Node Server

It is now time to set up our application using the Express framework to define and set up a Node server.

9. Difference Between res.send() Versus res.end()

When you are finished processing a request on the server, you have to end the process and send something back to the browser. You can do this in a number of ways. For example, in the previous video, we used the res.send() method. An alternative is to use the res.end() function. In this video, you will understand the differences between them.

10. Defining Routes on Our Server

In this video, we will start with setting up our API endpoints on the server. Warning: this is not AJAX. We have not yet defined our AJAX code. Remember, we are going to start with building our server-side code and then finish off with our AJAX, HTML, and CSS.

11. Defining Our Routes in a Separate File

To organize our project files, it is almost always best practice to define your routes in a separate file.

12. Exporting Our Routes Through the module.exports Command

All of our dog routes are defined in a separate file. In order to use our routes in our main express.js file (which is the route file of our entire Node application), we have to let Node know that we want our routes to be exported. We do this by accessing Node's module object and then attaching our router object to the exports property.

13. JavaScript Modules (ES Modules) Versus Node Modules (CommonJS)

In order to use a module in Node.js, we have seen that we had to use the require() keyword to import a module and had to access the module.exports property to export a module. But hang on! When you use modules in the browser, you use the import and export keywords. Why are they different to the way we use modules in Node? This video answers this question.

14. Testing Our Router Object

Before we start defining our GET, POST, PUT, and DELETE requests for our application, the author wants to test our router.js file to determine whether our Router object is working.

15. Creating the GET Route

This video shows how to create a dogs variable (an array) in JavaScript. It is this array that we will store all of our dogs that belong to our Doggy Daycare center. Once we define this array, let's define our GET route and send back the dog data as JSON data.

16. Installing Nodemon

Nodemon is used by developers all over the world. It effectively listens for any changes made to your node file, and then will automatically restart your server. Perfect for development.

17. Postman Introduction

Postman is a computer program that is used to test your API routes. Postman sends an API request to your web server and receives the response, whatever it is. No extra work or setting up of a framework is required while sending and receiving requests in Postman. Pretty neat, huh?

18. Creating a POST Route

In this video, we will see how to set up a POST route on the server. We will have to access the push method on the Array object to push or insert our new Dog into the existing array of dogs we have on the server.

19. Express.json() Versus Express.urlencoded()

The Express does not allow us to read the body of an HTTP request natively. In order to read an incoming HTTP request body, we need to tell Express that this is what we want. We can do this by including a middleware function called express.json() or express.urlencoded().

20. Creating a Unique ID Function

When we defined our POST route, we manually inserted an ID number. In practice, when we are dealing with databases, a unique ID will be generated automatically for us. But as mentioned, in this course, we don't want to involve databases - we are already getting quite deep into the rabbit hole. So, this video will show you how we can create a very simple function that will generate a unique ID for us.

21. Creating a PUT Route - Part 1 (Using the find Method)

Let's now tackle the hardest route-the PUT route. Why do we say it is the most difficult route? Well, for a few reasons. Reason #1. We have to access the req.params property to grab the ID from the URL. Remember, to be REST compliant, we need to include scoping information in the URL request sent to the server. Reason #2. We have to access the find() method on the Array object to find our existing dog in the array of dogs on our server. Reason #3. We have to access the Splice method to replace t

22. What is the Array.find() Method

Our end goal is to replace the existing dog object with our updated dog object. To do this, the starting point is to FIND the existing dog in our entire array. We can achieve this using JavaScript's inbuilt array object. Specifically, we can use the find() method.

23. Creating a PUT Route - Part 2 (Using the splice Method)

It is now time to finish defining our PUT route. In order to complete the route code, we need to access yet another array method, called splice.

24. What is the Array.splice() Method

The Array.splice() method will change our array by removing or replacing existing Dog objects and/or adding new dog elements in its place.

25. Testing Our Routes in Postman

Before we deal with our final DELETE route, let's test all of our routes thus far using Postman.

26. Creating a DELETE Route

We are almost done with our CRUD operations. The final letter in CRUD is "D", so, let's define our DELETE route.

27. Server Outro

This was a tricky section, but now you understand high-level understanding of what happens on a server when you send an AJAX request to fetch, add, delete, or update a resource.

1. Introduction to Section

We have created our node.js server. Now, it's time to start task 2-that is, to define and code our AJAX APIs. We will start doing this using the XMLHttpRequest() object.

2. What Are We Going to Build Together?

Before we end up building our final course project frontend, let's first build a basic frontend so that we can make sure that our entire AJAX library is working as expected.

3. HTML and File Overview

In this simple front-end scenario, we don't want to build the entire HTML and CSS files directly. It is rather simple, and we would rather build the HTML and CSS for the main front-end application (in the next section).

4. XHR AJAX GET Request

This video helps you perform our AJAX GET request, using the old-school XHR object.

5. Fixing CORS by Writing a Custom Middleware Function

In the previous video, we wrote our AJAX GET request. But what happened when we clicked on the GET button? That's right, we are faced with a CORS error. This is because our front-end code is being run on port 5500 and it's sending a request to port 3000. There are a few ways we can fix this CORS issue. This video shows you the hard-slog approach, by writing our own custom middleware.

6. Fixing CORS by Installing the "cors" Module with NPM

In the previous video, we defined our own custom CORS resolver middleware. But there's an easier way. This video shows you how we can install the "cors" middleware into our package.json file and use it in our project.

7. Adding Dynamic Text to the GET Request

This video helps you improve our existing GET request by changing paragraph text when the GET button has been clicked.

8. Creating an AJAX Library/Module

Before we move on to defining POST, PUT, and DELETE requests, let's start creating an AJAX library. In other words, we will create a separate AJAX module that we can then use in our main app.js file. This is to make our code easier to read and easier to maintain. This is also an advanced course, so let's start thinking about how real-world projects get built.

9. Converting Our GET Request into a Module

Let's now refactor our existing AJAX GET request code and include all business logic in our module file.

10. Overview of Our GET Request

This can all be quite daunting, I know. So, let's take a step back and recap what we have done so far.

11. XHR AJAX POST Request

We will start speeding up now, as we have a solid foundation. In this video, we will write our POST request in the module file.

12. Improving Our GET Request (Turning Our AJAX Call into a Synchronous One)

Have you noticed that we have a slight error with our GET request? The problem is that even if our actual AJAX GET request fails, the dynamic paragraph text still displays a successful message. We can fix this in a few ways, but the simplest way is to turn our AJAX request into a synchronous one so that the JS parser does not execute any code after our fetchDogs() function before it's fully complete.

13. Completing the POST Request by Initiating the Request in the app.js File

This video helps us finish our POST request using our module in our main app.js file.

14. Updating the POST Paragraph Text Dynamically

Although our POST request is working as expected, we have not dealt with updating the paragraph text. We did this with the GET request, but the structure of our POST (and PUT and DELETE) requests is different. Remember in our server-side code, we are sending back a message property when a POST request is made. Therefore, we will see how to access this message property and display it dynamically to the page.

15. Adding Some Error Handling

You may have noticed that the author skipped over some error handling in our POST request. This was done to keep things really focused. In this video, you will see how you can throw an error, listen for the status property being equal to 200, and also access the xhr.onerror callback.

16. Completing the PUT XHR Request

We have completed the GET and POST requests. It is now time to allow a user to update dog data and send that to the server using the PUT method.

17. Completing the DELETE XHR Request

We have completed the GET, POST and PUT requests. It is now time to allow a user to delete a dog on a server using the DELETE method. Remember that to be RESTful compliant, we should include scoping information in the URL request.

18. XHR Outro

Nice work! You have now done arguably the hardest part of the course-completing your AJAX module that we will use constantly throughout this course.

1. Introduction to Section

In this section, you will convert our old-school XHR object to use the modern Fetch API.

2. GET Fetch Request - Setup

We will use our base code as a starting point, but now convert our XHR request to use the modern Fetch API. The first step is to define our GET request. There is a slight nuance here, though, because, unlike the XHR object, Fetch relies on Promises. This means that we need a way to access the result of the promise in our main app.js file. In this video, you will see one way to do this, and then in the next video, you will look at a better way.

3. Using a Callback Function to Write Our GET Fetch Request

An intuitive way to send data from our fetch request back to our app.js file is to pass in the data object inside of a callback function. This is exactly what we did when we defined our GET request.

4. POST Fetch Request

It's now time to convert our XHR POST request into the modern Fetch API. It is a little different to the GET method, because now we have to pass in some data. Remember what it is we are doing with a POST request-we are adding a new dog to the server. This means we have to send that new dog (that data object) to the server. You do this by attaching the data to the body of the HTTP request. In this video, you will see how to use the Request Interface and the Headers Interface to make our code stre

5. PUT Fetch Request

This video will help you convert our XHR PUT request into one using the Fetch API.

6. DELETE Fetch Request

Let's finish off our AJAX API library by completing a fetch DELETE request.

7. Summary - Our AJAX Requests Are RESTful Compliant

This video helps you examine the Networks tab and shows you how each of our GET, PUT, POST, and DELETE requests are RESTful. Remember, to define RESTful requests, all you need to do is make your requests logical and intuitive. This means we should include the correct HTTP verb (GET, PUT, POST, or DELETE) and include scoping information (the dog ID) on a PUT and DELETE request.

8. Fetch Outro

Well done for completing this section. Your AJAX API library is now using the modern Fetch API that relies on the Promises API.

1. Section Introduction

In this section, you will be installing a third-party library called Axios to make an AJAX request.

2. Basic Challenge - Introduction to What We Are Going to Build with Axios

Before we convert our main course project code into using Axios, you will first complete our basic project example using Axios.

3. Installing AXIOS

There are a few ways you can use AXIOS, just like any other third-party library. You can reference the CDN link or you can download the actual file and include it in your project directory.

4. Fetching Text Data with AXIOS

This video helps you use Axios to fetch simple text data from our own server file.

5. Fetching JSON Data with AXIOS

Let's finish off our simple example using Axios to fetch (1) our own JSON data and (2) third-party JSON data.

6. Setting Up Our Main Course Project Files for Axios

Let's return to our main course project file and convert our AJAX GET, POST, PUT, and DELETE requests to using Axios.

7. GET Request Using Axios

This video helps you use Axios to send a GET request to our server to retrieve our dogs' array.

8. Inspecting the Axios Response Object

As of now, you don't know why we are accessing the res.data property. Where is this "data" property from and how does Axios know how to correctly format the data type into this property? This video will answer all these questions.

9. POST Request Using Axios

Let's add a new dog to our serve, by submitting a POST request using Axios.

10. PUT Request Using Axios

Let's update Skinny, with ID of 1, by submitting a PUT request using Axios.

11. DELETE Request Using Axios

Let's continue to pick on Skinny and delete her (with id=1) from our server, by submitting a DELETE request using Axios.

12. Axios Outro

This video provides an outro to Axios and this section.

1. Introduction to Section

In this section, you will learn to code up the HTML, CSS, and JavaScript that will act like the glue to make an awesome application.

2. What Are We Going to Build?

This video provides an overview of what we are going to build in this section together.

3. HTML - Navbar and Add Dog Button

Let's code the HTML for our Navbar and Add Dog button.

4. What Are HTML Entities

In the previous video, we created the closing X button by writing this code: ×. This video will talk about the code/syntax and where does this syntax come from.

5. HTML - Add Dog Modal

Let's complete the Add Dog modal.

6. HTML - Update Dog Modal

In this video, let's finish the HTML for our updated dog modal. It will follow a similar structure to our Add Dog modal, but in this case, we will also include headings so that the user knows what dog attribute he/she is updating.

7. We Don't Need the Name Attributes

When creating our , the author has been including the name attributes. However, I want to show you that we don't actually need them in our course application because we are not using the action attribute.

8. CSS - Headings and Buttons

Given that our HTML is done, let's turn our attention to building the CSS file and styling up our headings and buttons.

9. CSS - Add Dog Modal

Let's style up our Add Dog modal in this video.

10. CSS - Update Dog Modal

Let's now write CSS to add flare to our Update Dog modal in this video.

11. Using JavaScript to Close Our Modals

This video will help you listen for a click event and use the event.target to close our modals.

12. CSS - Tables

We have reached the final video on styling our page. In this video, we will complete the styling for our table, so that when we update the table with our dog data, it looks stunning.

13. AJAX GET Request - Perform a GET Request on the DOMContentLoaded Event

When the page loads, we may want an AJAX GET request to be sent to the server so that the user does not have to click on a "GET" button. There are many ways to do this, but let's listen for the DOMContentLoaded event.

14. Using JavaScript to Add an Update and Delete Button to Our Table

When we execute our fetchDogs() function, we populate the table with data. Now, let's include a final column in our table, which contains an update and delete button.

15. POST Request

It is now time to complete our POST request using our AJAX library.

16. Clearing Form Data When a User Hits 'Submit'

Let's improve our clearForms() function as well as clear the form data if the user hits 'cancel'.

17. Take a Step Back

Breathe. You have come a long way. Sometimes things can seem overwhelming. That's why you should take a step back and go through the things done so far.

18. Using the reset() Method to Clear Form Values

Before we move on to the PUT request, let's see how we can easily use the Form.reset() method to clear form values. As its name suggests, the reset() method resets the values of all elements in a form to their default state.

19. Populating the Update Modal - Part 1 - Traversing the DOM to Find the ID

Our goal is to update the modal form when the "update" button is clicked. The first step in making this possible is to identify the ID of the dog that corresponds to the update button clicked on.

20. Take a Step Back: Traversing the DOM

In this video, we will traverse the DOM tree in order to get the ID of the dog.

21. Populating the Update Modal - Part 2 - Using the find() Method to GET Our Dog

In the previous video, we saw how to traverse the DOM tree to extract the relevant dog ID. In this video, we will use the ID to initiate a GET request and return the selected Dog details.

22. Populating the Update Modal - Part 3 - Finishing

In the previous video, we used the ID to initiate a GET request and fetch the relevant dog. In this video, we will see how to use this object to insert the values into the form. It is really easy.

23. Improving Our Code - Disabled and classList Properties

Before we move on to completing our PUT request, let's disable the gender dropdown to prevent an admin user from accidentally updating a dog's gender. After that, let's make sure that if the delete button is clicked, the code related to the update button is not executed.

24. PUT Request - Updating a Dog

It's time to put everything together (no pun intended) by completing our PUT request.

25. DELETE Request - Removing a Dog

The final piece of the puzzle is completing the "D" in "CRUD", which is "delete". This video focuses on that and helps you remove a dog.

26. Recap - You Have Come a Long Way

This video helps you with revising some of the concepts that you have learned so far.

1. Outro

This is an outro video, and the author thanks you along with the next journey ahead.