AJAX Expert Course (RESTful APIs | CORS | MORE) 2026

An intro to what we're going to build together.

It's time to set up our first mini project.
In this lecture i'll tell you a little about VSC, why I use Live Server and also set up the HTML.

In this lecture we will turn our ugly ducking into a beautiful swan, by using CSS.

For the first time in this course, I want you to now use the XMLHttpRequest() object to fetch a .txt file, wait for a response, and then display that text on your HTML page.

In this lecture I will show you how to add HTML to the DOM dynamically, and I also want to refactor our code slightly to have our main business logic outside of the AJAX onload callback.

We've dealt with text data.

Now its time to recap how you can work with JSON data received from a server.

The responseType property allows you to (a) define the expected response type you receive back from the server and (b) 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.

In this lecture I'll show you what third party API we will be using, so you can attempt to write the fetch request by yourself.

Good luck.

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

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.

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

A quick intro to this section

We are going to build a simple input field where a user types in a food item, and that items is sent to the server, and the server determines whether it is available. The appropriate message is then sent back to the client.

We will: 

1. create this example using a PHP server; and

2. create this example using a Node.js backend server

In this lecture I want us to build our HTML file.

We will approach this project in steps.

The first logical step is to grab what the user has typed in the <input> 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 which 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.

I want to 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.

A quick word before you continue

This course is not about server side code.

However, I think its important that you understand how AJAX is used on the server side to grab data, process it, and send something back to the browser.

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.

I want to show you how you can retrieve the data received from our PHP server and display it into the <div> tag.

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

In the previous lecture we finished off our PHP example.

It is now time to set up our Node server. In order to set up a server, we'll have to import the HTTP module. I will then show you how to define custom headers, and then send a response to a browser.

It can be daunting when first seeing a node.js file and coming across the concept of Modules.

But don't worry, let me break it down for you.

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

Difference between xhr.responseText and xhr.response and the role of binary data.

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

Don't get lost in the detail.

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 precisely why I want you to understand the Basic Authentication Scheme.

It can be difficult to wrap your head around the concept of the Authentication. Hopefully this short article will help.

I want to show you how you can use the browser and also the command prompt (the CURL) to see HTTP request header information.

I will then show you a high level overview of how Basic HTTP Auth is working.

Don't get lost in all of the detail

If you will recall from my AJAX Fundamentals course, the XHR.open() method takes 5 arguments, the last 2 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.

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.

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.

Apache is a web server. It is one of the mostly used web-servers today (some sites I've seen say that Apache is being run on over 70% of websites today). 

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.

But 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.

I know this may sound obvious, but in order to use or "run" a server on your own machine, you need to download it first.

For this, the most easy way is to install XAMPP.

From there, you have a few options in how you want to start the server. You can start it from the command prompt, and you can also start it from the XAMPP interface directly.

In this lecture I want to show you how to start an Apache server and server your first index.html file. I will also set up a config file for our root directory in a file called .htaccess.

Take a quick break, and don't forget what the .htaccess file is all about

You have to configure what type of authentication you are implementing on the server.

I will show you how this can easily be done with Apache.

By default the .htaccess file does not have any concept of sessions or logout functionality. This means once the correct user credentials have been entered, they will be saved in the browsers cache.

Wrapping your head around why the .htpasswd file exists is difficult.

I've been there.

That is why I've written this short page to help you understand why it is used.

This the project intro.

I want to build 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.

I want to build a simple HTML form.

I will add an inline event listener to the form, listening for the "submit" event. When this event is fired, we will execute a function that will use AJAX to take the user input and send it to the server.

The default behaviour of a "submit" event inside of a <form> 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.

The preventDefault() method is give to you on the Event interface by the browser. It's pretty powerful.

In the previous lecture I showed you 2 ways of accessing the Event object. Which one is best? Read this short article to find out.

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

The browser displays you a popup asking for a username and password when you try and use Basic Auth.

Is there a way to stop this from happening? 

Let's find out.

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.

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 lecture I want to show you how you can send back a custom error message instead.

Today we typically use the Fetch API to perform AJAX requests. So this exercise would not be complete if I did not show you how to quickly convert our XHR object into a Fetch request.

In the previous example we used an Apache server to serve files to the browser.

In the next few lectures I want to show you how you can set up a Node server to do the same thing.

I don't want to concentrate on AJAX in this example. Rather, I want to introduce you to routes and how you can handle them on Node server.

In the previous example we used an Apache server to serve files to the browser.

In the next few lectures I want to show you how you can set up a Node server to do the same thing.

If you want to code alongside me, you'll have to have Node installed on your machine.

In the upcoming lectures I will be using Express to help create routes.

Express is not a core module in Node, meaning that we have to install it separately.

There are 2 ways you can install Express: locally or globally. I will show you how to do both.

Remember, Node itself is a JavaScript environment. What I mean by this is that it is BIG. It can do different things like execute JavaScript, read files, etc. One of the things it can also do is set up an internal server.

In this lecture I want to show you how to set up a Node.js server. You can do this in one of 2 ways: 

1. use the HTTP module; or

2. use an express app

I will show you both ways.

The easiest way to set up a server in Node is to use Express. The reason why its easier is that Express also gives us the ability to create and define URL routes, very easily.

However, if your site is simple, you can just as easily use the HTTP module to create your server. The benefit with using the HTTP module is that you dont have to install it because it comes shipped with Node.

You may be curious how Node knows where and how to find a module that you require.

In our example we told Node that we want to use the express framework. Remember, our code looked like this: let express = require('express');

In this article I'll explain how node finds this framework on your machine.

The first step in implementing authorization to a webpage is for the server to tell the browser that it requires authentication.

In this lecture I want to show you how you can set this up on your server.

In this lecture I want to show you how you can extract grab the "Basic base64_string" containing the user credentials and then return the username and password in separate variables.

In order to do this, we need to use the Buffer.from() method, given to us by Node.

Remember what it is that we're trying to achieve.

• we want to grab the username and place it in a variable

• we want to grab the password and place it in a variable

• we then want to compare whether these values match our system

In the previous lecture I used the Buffer.from() method, but if this is all I did then we would have a list of integers that are meaningless to us.

This is why I had to then use the toString() method to convert the buffer into a readable string.

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

Basic Auth is not great when it comes to security.

In the previous lecture we used the next() function a few times. Sometimes, we passed in an error object. Sometimes, we passed in nothing.

In the previous video I went fast, and in doing so I missed a few errors.

So, in this lecture I want to explain more about the next() function and how you can use it. I also want to tidy up our code and improve the way it flows.

There are a few more important points I want you to understand about the next() function.

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 to /secret.

Let me show you how to fix this.

This course is about AJAX, so why did I then spend an entire section explaining how Basic Authentication works? 

It boils down to you really having a deep understanding on how the original XMLHttpRequest() object worked.

We've covered a lot in this section.

Well done.

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're dealing with AJAX, you are bound to come across CORS related issues all the time. That is why this section is so important.

CORS errors can occur when you are trying to do things like:

• Make an AJAX request to an API from a different domain

• Embed an image or video from a different domain

• Use a third-party JavaScript library that makes requests to a different domain

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.

A quick summary on why CORS was created

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

You have likely heard of common HTTP headers like 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 no body (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 a PNG file) on the server exists, whether cached data needs to be updated or to check whether a file was last updated. 

When your browser makes and AJAX request to a third party website, this request will be governed by CORS.

There are 2 types of CORS requests, and in this lecture 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

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

• multipart/form-data

will trigger a preflight request

It can get daunting learning about CORS. I've been there. And it only seems to add confusion when browsers decide to send a preflight request.

If you take a step back and try to understand the logic behind why it was introduced, things start to get easier.

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

Don't get lost in all of the detail.

Remember that CORS (and Same-Origin-Policy) is only applicable when you are making a request from SITE1 to SITE2. In other words, its only applicable when you perform a cross-origin request.

Now, why don't I show you CORS and SOP in action. Let's navigate to Google.com and send a request to apple.com and see what happens.

You'll notice the error message in Chrome is not as good (or correct) as the error message shown in Firefox.

In the next few lectures I want to set up an example with you where we will see CORS errors and then fix them together.

I want to 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)

Let's ignore a server configuration for now, and make an AJAX request to a cross-origin resource.

What do you think will happen? 

In the previous lecture we have seen 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.

As I've mentioned a few times, Same-Origin-Policy does not block CSRF attacks.

I don't want to get into too much detail around what a CSRF attack is, but you do need to understand it at a high level.

In this lecture I'll give you an example of how an attacker could perform a CSRF attack and why SOP does not prevent it from happening.

How do we solve our server error in the previous lecture? 

Answer: we need to set the Access-Control-Allow-Origin header on the server.

It is now time to configure our Apache server to accept cross-origin requests.

To do this, as you know, we need to set the Access-Control-Allow-Origin header on the server.

Up until now we have dealt with a very simple HTTP request.

It is so simple in fact that the browser could sent 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 instead of plain/text.

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.

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.

Up until this point we have not had to deal with any authentication details.

So to finish off this entire example, lets add Basic Auth and see how it affects CORS.

You've done it! Well done.

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

Well done.

Well done for finishing this section, all about Same-Origin Policy and CORS.

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, I want you to become a Grandmaster at coding and therefore you need to understand (even at a high level) what happens when an AJAX requests hits a server.

In our course project we will be defining various API endpoints. This is done so that different actions a user takes (like 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? 

As a developer you have artistic flare to build an application the way you wish. You'll often see experienced developers writing server side code before completing front-end code.

So in our course project I'll show you how you can do this too.

here is a sneak peak into our final course project - what we'll be building.

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.

You would have noticed in the previous lecture that to install node, I opened up the terminal and typed "npm install express".

Huh? 

What do the letters "NPM" mean, and how could I just type it inside the terminal? 

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.

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

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 an number of ways. For example, in the previous lecture I used the res.send() method.

An alternative is to use the res.end() function.

In this lecture I'll show you the differences between them.

In this lecture I want to start setting up our API endpoints on the server.

Warning: this is not AJAX. We have not yet defined our AJAX code. Remember what I said a few lectures back - we are going to start with building our server side code, and then finish off with our AJAX, HTML and CSS.

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

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.

In order to use a module in Node.js, we've seen that we had to use the require() keyword to import a module, and we 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? 

Great question.

In this lecture, I'll show you.

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

I want us 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 us define our GET route and send back the dog data as JSON data.

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.

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 framework is required while sending and receiving requests in Postman.

Pretty neat huh? 

In this lecture I will show you 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.

As I mentioned at the end of the previous lecture, 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().

When we defined our POST route, I manually inserted an ID number.

In practice when we are dealing with databases, a unique ID will be generated automatically for us.

But as I have mentioned, in this course I don't want to involve databases - we are already getting quite deep into the rabbit hole.

So what I want to do in this lecture is show you how we can create a very simple function that will generate a unique ID for us.

Let us now tackle the hardest route - the PUT route.

Why do I 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 including 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 the existing dog object with the updated dog object we have received from the browser.

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 by using JavaScript's inbuilt Array object. Specifically, we can use the find() 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.

The Array.splice () method will change our array by removing or replacing existing Dog objects and/or adding new dog elements in its place. In this lecture I will break down how it works so it becomes more clear to you.

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

We are almost done with our CRUD operations.

The final letter in CRUD is ... "D", so with that said, let us know define our DELETE route.

Server side languages are beyond the scope of this course, so the fact that you've followed me this far is amazing. Well done.

W00T W00T => you've done it!

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

Well done.

We've created our node.js server.

Now its time to start Task 2 - that is, to define and code our AJAX APIs.

I want to start with doing with this using the XMLHttpRequest() object.

Enjoy!

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

All we're doing now is setting up our AJAX library and making sure it works.

In this simple frontend scenario, I don't want to build teh entire HTML and CSS files with you directly. It is rather simple, and I would rather build the HTML and CSS with you for the main frontend application (in the next section)

I want to now perform our AJAX GET request, using the old-school XHR object.

In the previous lecture 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 frontend code is being run on port 5500 and its sending a request to port 3000.

There are a few ways we can fix this CORS issue. In this lecture I'll show you the hard-slog approach, by writing our own custom middleware.

In the previous lecture we defined our own custom CORS resolver middleware. But there's an easier way.

In this lecture I'll show you how we can install the "cors" middleware into our package.json file and use it in our project.

I want to improve our existing GET request by changing paragraph text when the GET button has been clicked.

Before we move on to defining POST, PUT and DELETE requests, I want to start creating an AJAX library. In other words, I want to create a separate AJAX module that we can then use in our main app.js file.

Why am I doing this? 

Simple, to make our code easier to read and easier to maintain.

This is also an advanced course, so I would like you to start thinking about how real world projects get built.

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

This can all be quite daunting, I know.

So let's take a step back, and recap what we've done so far.

We will start speeding up now, as we have a solid foundation.

In this lecture I want to write our POST request in the module file.

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 its fully complete.

I want us to finish our POST request by using our module in our main app.js file.

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 are different. Remember in our server side code, we are sending back a message property when a POST request is made. Therefore, let me show you how to access this message property and display it dynamically to the page.

You may have noticed that I skipped over some error handling in our POST request. I did this because I want to keep things really focused.

In this lecture I'll show you how you can throw an error, listen for the status property being equal to 200 and also accessing the xhr.onerror callback.

We've 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.

We've 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 to be RESTful compliant we should include scoping information in the URL request.

A summary and final section files.

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

Well done.

In this section I want to convert our old-school XHR object into using the modern Fetch API.

We will use our base code as a starting point, but now convert our XHR request into using 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 lecture I'll show you one way to do this, and then in the next lecture I'll show you a better way.

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.

If we get an error in our fetchDogs() function, the paragraph text will still update. This is not necessarily what we want. In the next section when I define our Axios call, I will show you how you can fix this issue.

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're 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 lecture I'll also show you how to use the Request Interface and the Headers Interface to make our code streamlined.

I can't wait.

In this lecture we will convert our XHR PUT request into one using the Fetch API.

Good luck.

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

I want to examine the Networks tab and show you how each of our GET, PUT, POST and DELETE request 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 (like the dog ID) on a PUT and DELETE request.

Well done for completing this section.

Your AJAX API library is now using the modern Fetch API that relies on the Promises API.

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

Before we convert our main course project code into using Axios, I want to first complete our basic project example using 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.

I want to use Axios to fetch simple text data from our own server file.

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

You may be wondering why people use Axios when we have the Fetch API? 

Let me clarify a few things.

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

I want to use Axios to send a GET request to our server to retrieve our dogs array.

I have only just realized that I have not shown you why I am 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? 

Let us add a new dog to our server, by submitting a POST request using Axios

Let us update Skinny, with id of 1, by submitting a PUT request using Axios

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

Well done for completing this section.

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

This section is the final task in this course - writing HTML, CSS and some JavaScript to glue everything together.

An overview of what we're going to build in this section together

Let us code the HTML for our Navbar and Add Dog button

In the previous lecture I created the closing X button by writing this code: &times;

What is this, and where does this syntax come from?

Let us complete the Add Dog modal

In this lecture let us finish the HTML for our update dog modal. It will follow a similar structure to our Add Dog modal, but in this case I want to also include headings so that the user knows what dog attribute he/she is updating.

When creating our <form> I have 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 <form> action attribute.

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

Let us style up our Add Dog modal

Let us now write CSS to add flare to our Update Dog modal

I want to listen for a click event and use the event.target to close our modals.

We have reached the final lecture on styling our page ... finally. In this lecture I want to complete the styling for our table, so when we update the table with our dog data, it looks stunning.

It's now time to incorporate our AJAX library into our Frontend. As you guessed it, this means we need to add a little JavaScript.

When the page loads, I 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 I want to listen for the DOMContentLoaded event.

When we execute our fetchDogs() function, we populate the table with data. I now want to also include a final column in our table, that contains an update and delete button.

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

I want to improve our clearForms() function, as well as clear the form data if the user hits 'cancel'.

Breath. You've come a long way.

Sometimes things can seem overwhelming. That's why I want to take a step back, and explain what we've done so far. 

Before we move onto the PUT request, I want to show you that you can easily use the Form.reset() method to clear form values. As its name suggests, the the reset () method resets the values of all elements in a form to their default state.

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.

Please don't get intimidated by what I just did. All I did was traverse the DOM tree in order to get the ID of the dog.

In the previous lecture I showed you how to traverse the DOM tree to extract the relevant dog ID. In this lecture I want to use the ID to initiate a GET request and return the selected Dog details.

We are almost done. In the previous lecture we used the ID to initiate a GET request and fetch the relevant dog. In this lecture I'll show you how to use this object to insert the values into the form. It is really easy.

Before we move on to completing our PUT request, I want to do 2 things: 

1. let us disable the gender dropdown to prevent an admin user accidentally updating a dog's gender.

2. let us make sure that if the delete button is clicked, the code related to the update button is not executed.

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

You've reached the final destination - WELL DONE!

The final piece of the puzzle is completing the "D" in "CRUD".

Take a step back, and appreciate all of the knowledge you've learned in a short space of time.

You now know: 

1. how to work with AJAX

2. what Basic Authentication is

3. what CORS is

4. how to define server-side routes

5. how to set up AJAX APIs

6. how to execute JavaScript, HTML and CSS on the frontend to glue everything together