AJAX Expert Course (Next Level) 2025

Many developers starting out get intimidated with AJAX.

But don't worry, it really is not a scary concept.

While the core principles of AJAX remain unchanged, the landscape of web development is constantly evolving. Frameworks like React, Angular, and Vue have introduced new patterns and best practices for implementing AJAX functionality. Libraries such as Axios and Fetch have also become popular choices for making HTTP requests.Despite these advancements, AJAX remains a fundamental technique that every web developer should understand. It's the backbone of many modern web applications, enabling seamless user experiences and efficient data handling.

In this lecture I want to show you the differences between a traditional synchronous HTTP request versus a modern AJAX request. Pictures speak louder than 1000 words.

Enjoy!

To make an AJAX request, you have 2 options: 

1. you can use the XMLHttpRequest object

2. you can use the fetch() API

There are 2 pure ways to make an AJAX request: the Fetch API and using the XMLHttpRequest (XHR) object.

The Fetch API is a newer and more modern way to make AJAX requests. It is a promise-based API, which means that it is easier to use and write code for. The Fetch API is also more flexible than the XHR object, and it supports more features, such as the ability to chain multiple requests together.

The XHR object is an older way to make AJAX requests.

In addition to the Fetch API and the XHR object, there are a number of JavaScript libraries that can be used to make AJAX requests, such as jQuery and Axios.

FIRST SECTION NAILED!

Back in the old days, when I was growing up, websites returned complete web pages when you visited a page. To reload any data, you had to reload the entire page.

This was an inefficient way of serving information to users and wasn't good for user experience. It also increased the load on servers and the bandwidth needed to serve data.

Something had to change.

Microsoft created the ActiveXObject, and in the early 2000's Google added functionality to Gmail that allowed data to be fetched in the background. They did the same thing for Google Maps.

Both Google's and Microsoft's techniques allowed developers to fetch data from a web server using JavaScript without a page reload.

This is AJAX.

Try your hand at these few questions.

Have fun, and I'll see you in the next section.

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.

NICE WORK, COMRADE!

In this section you have built a mini app with 3 buttons

1. GET text

2. GET JSON

3. GET API Data

Yes, it was rather basic.

We first used the XMLHttpRequest() object, and then refactored the code to use the modern Fetch API.

This project was a recap. It should have reminded you of some important skills that you'll need for the rest of this course.

Give this quiz a shot, and in the next section we'll tackle a simple, but slightly more advanced, example.

I can't wait.

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

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

YOU'RE BECOMING A PRO!

In this section, we created 2 variations of the same example.

Specifically: 

1. we set up a PHP server on port 8000, and served our HTML file on the same port => no CORS policy required

2. we set up a Node server on port 8001, and served our HTML file on another port -> CORS policy was required

We set up custom headers in each example, and sent back appropriate responses.

Pretty cool huh? 

But don't get lost in all of the detail.

AJAX is really a front-end concept, and this means you don't need to understand server side code in order to master AJAX. However, understanding how servers pick up AJAX data is an important skill and puts a (rather large) feather in your cap. 

I can't wait for the next section.

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.

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.

W00T W00T!

A user's initial request to a URL is usually anonymous (think about when you land on a random webpage), so it doesn’t have any information to confirm that the user is who they say they are.

Sometimes this is fine.

But the flip side is that this can be dangerous if the URL contains sensitive data.

This is where authentication comes into the picture.

To filter user access, the server first denies the anonymous request and indicates that client authentication is required (it does this via the WWW-Authenticate header).

Usually, authentication by a server entails the use of a username and password.

HTTP supports the use of several authentication mechanisms. In this section we looked at one of the most common methods of authentication that HTTP gives us.

Before you continue to the next section, try these fun questions.

Smile.

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)