NEW AJAX fundamentals simply put

Master AJAX using plain JavaScript. Learn the XHR object, Fetch API, Promises, HTTP, Streams, Async/Await & much more!
NEW AJAX fundamentals simply put
File Size :
4.20 GB
Total length :
12h 7m



Clyde Matthew


Last update

Last updated 11/2022



NEW AJAX fundamentals simply put

What you’ll learn

Master AJAX
Learn the fundamentals of AJAX without third party libraries
Practical examples and fun challenges to make learning easy
Become a fullstack developer by knowing how to send data to a server, listen for a response and do something with the data
Learn how to dynamically update a webpage without a page refresh
Become a pro at AJAX and learn about Streams, Promises, Event Loops and more!
Learn JSON and XML data formats (and the XML DomParser), and how you can use them with AJAX
Understand Promises
Learn about the Streams API
Learn about the latest techniques (such as the Fetch API) to make an AJAX request
Understand where AJAX came from and why it was invented
Understand the HTTP protocol and how browsers communicate with servers
Learn why we need to use the NEW keyword with the XHR object
Understand constructor functions
Master the XMLHttpRequest() object
Learn the differences between asynchronous and synchronous code
Learn how to handle errors with AJAX
Become and expert at using the Fetch API
From beginner to expert (advanced +)
Gain the knowledge to achieve and lead
Understand how to use Async & Await keywords with the newer Fetch API
Gives you depth of knowledge to boost your ability and confidence
… and a bunch more!

NEW AJAX fundamentals simply put


Basic HTML and JavaScript knowledge is required (if you’re unsure of JavaScript, check out my JavaScript course)
A desire to become an informed full stack web developer
An inquiring mind as I help you understand how data is sent from your browser, to a server
A goal to take your website and skills to the next level
Desire to KNOW how AJAX works, how to be effective and how data gets sent to a server and received by a browser
Desire to KNOW how to update parts of a webpage without a page refresh
A computer is required as you need to code alongside me to learn effectively


****Always Updated****+ Get instant access to >11.5 hours of high quality videos+ Get access to downloaded resources+ Instructor supportUnderstanding web development is an ongoing process. To give you a foot up, I’ve gone all out to structure an all-encompassing, focused, AJAX course which I deliver to you in a way that will benefit you the most.My course is distinguishable in teaching you “why” things work and not just “how” to do something mindlessly.WHO IS MY AJAX COURSE FOR?My course is for everybody, from beginner and advanced coders. You won’t need to do any other course after mine to know what AJAX is.You only need to know a little HTML and JavaScript. If you hardly know JavaScript, it may be beneficial for you to first do my JavaScript course.This course can be taken alone (you don’t need to do any other course) to achieve your goals.WHAT IS AJAX?AJAX allows you to update information on your web app dynamically, without a page refresh, and facilitates all-important streaming. A fine addition to your skill set. Smart and powerful.For example. If a user wants to rate your product. You don’t want the entire page to refresh when the user decides to give your product a star review, because of the unnecessary time it wastes, especially if your page is large.Another example is a chat room. For obvious reasons, you don’t want the page to refresh every time a new comment or a reply is posted.AJAX goes further than just updating data on your page without a page refresh. With AJAX, you can also stream data. Think about watching a video before the entire video has downloaded to your machine. Think about Google Maps where you only need to download data that is relevant to you. AJAX makes this all possible.Can you begin to see how powerful AJAX is, how essential it is today? Knowing AJAX is crucial if you want to become a fullstack developer, as it will allow you to make server requests and listen for incoming data, asynchronously. It has been noted that AJAX can get tricky at times, and I don’t dispute this, but with correct training which includes explaining the fundamentals in a simple way, you will, like me, learn to master and love AJAX.If you want to become a full stack web developer, you need to know about AJAX and that’s what this course is all about.WHY IS THIS COURSE SO IMPORTANT?Your favorite websites today almost certainly use AJAXOther courses teach you about third-party libraries when using AJAX (like jQuery or Axios). This course will teach you how to use pure AJAX. No shortcuts. The real deal!Making HTTP requests asynchronously is at the forefront of today’s web development. In fact, it is no longer advisable or the done thing to make HTTP requests synchronouslyKnowing how to make a server request and listen for a response, fast, is a vital skill for any web developer to masterAs a developer, you deal with data. This data can take many forms, but the most common is XML and JSONYou can use AJAX to transport HTML, images, JavaScript, XML, JSON and even plain text over the internet. My course covers all thisUsing AJAX saves memory usage and speed up your site. For instance, Google Maps uses AJAX, so instead of loading the entire page for every event it loads the required section that you are looking at only. How efficient isn’t thatAJAX makes for better user experience, no argument in thatEvery browser today has a built-in API (or object) called the XMLHttpRequest object, or the Fetch API. These objects give browsers the ability to communicate with servers, behind the scenes. This means a page can update (not totally upload) seamlessly without blocking anything on the user interfaceAfter completing this AJAX course, you will certainly be knowledgeable, confident and able to manage or help others make AJAX requests.LET ME SHARE MY AJAX KNOWLEDGE WITH YOUUnderstanding how AJAX works will equip you to be an awesome fullstack programmer, relevant for today. Using AJAX effectively will allow you to update parts of your website dynamically without a page refresh, stream, and save you download time, save memory space and therefore ultimately improve user experience.Take control through understanding and providing today’s users with the fast web experience they are coming to expect. Mastering AJAX is challenging. In this course, I take a deep-dive into explaining AJAX and how it works in a clear and simple way. Why do we need AJAX? Where did it come from? Why was the newer Fetch() API introduced? Why did we have to replace the XMLHttpRequest() object? Why do we have to use the new keyword when using the XHR object? What are Promises? What are Streams? What are the different data formats that we can transfer over the internet? By understanding (really understanding) these questions, and many more in the course, you will be able to easily build advanced websites and use the full stack process. You will be able to create dynamic sites that improve user engagement and experience.WHERE IS AJAX USED1. Form validationIt can be impractical and tedious to get validation results only after submitting a form. You can use AJAX in form validation, to give near instant real-time updates on validation.2. Fetching data from a database dynamically without a page refresh If you need to fetch data from a database and display it to your page (like a blog comment, a chat response, or user’s name), then using AJAX is a necessity.3. Sort or FilterIf you need to fetch data from a database and display it to your page (like a blog comment, a chat response, or user’s name), then using AJAX is a necessity.4. Votes or RatingThe whole site need not to be refreshed if a user votes for something or rates your product. The voting and the displaying of the results can be done most efficiently using AJAX.5. Chat websitesChatting is always real time. That’s why AJAX is a must have if you are going to make a successful chatting panel in your website.6. Blog CommentsYou can load previous comments or can post a new blog comments with AJAX, easy peasy.7. CaptchaTo make captcha (reloading captcha basically) AJAX is also the best platform to use.8. Streaming data & moreAJAX is used to consume data before its fully downloaded (saving you memory space and time), and a whole bunch more!After experiencing my AJAX course, which I present in a fun way, you will be knowledgeable and confident.WHAT THIS COURSE COVERSThis course is comprehensive, covering the essential fundamentals of AJAX.AJAX refers to how browsers make HTTP requests to servers asynchronously, listen for results, and then do something with the data when it is received. AJAX is about speed and efficiency.You can therefore think of AJAX as the engine that handles this entire back-and-forth process between the browser and the server.Simple enough.The only problem is that in order to truly understand AJAX, you need to understand many other concepts, and this is one of the unique aspects of my course and style of teaching.Simple explanations and practical examples allow you to understand the following:How to write AJAX the best wayWhat is asynchronous code and how does it differ from synchronous codeHow to use AJAX to make asynchronous requestsWhat is the event loop in JavaScriptWhat is XML and how does it differ from JSONHow to parse an XML file using the DOMParserWhat is the HTTP protocol and what is the HTTP/2 and HTTP/3 protocolWhat are constructor functionsWhat is the XHR objectWhat is the new fetch() APIWhat are PromisesWhat are StreamsWhy use Async/AwaitURL Interface, Request Interface, Header Interface and a whole bunch more!And yes, we will code real examples in a fun way, and look at how AJAX works (we use both the XMLHttpRequest object and the newer Fetch API).Why should you learn so much about AJAX?Because AJAX allows you to update certain parts of your webpage without a page refresh. It is used for streaming and more and today use of AJAX is essential on websites. It doesn’t get better than that!*** A comprehensive AJAX course on Udemy *** Successful programmers know much more than memorizing a few lines of code.They also know the fundamentals of how the browser & server interaction works behind the scenes which allows them to be fully creative, fix problems and enhance user experiences.This is particularly true when it comes to AJAX.If you’re wanting to become a full stack developer, you need to know, really know, how to make an AJAX request. You need to understand how AJAX was created, why the modern Fetch API was introduced, what Streams are, how Promises work and why the Async/Await keywords were introduced, and a bunch more!A UNIQUE APPROACH This course contains practical examples and fun challenges and quizzes.Understanding how AJAX truly work is a vast topic. To get you up to speed, I’ve created a fun and comprehensive learning experience, embracing the content you need to know to succeed, and I deliver it to you in the best possible way to benefit you most.And I make use of the latest and best features of JavaScript and browsers along the learning journey so you can stay ahead in your business.You’ll learn simple, yet very powerful strategies to make server requests from a client.By the end of this course, you’ll be able to “speak” and “walk” AJAX by gaining an understanding of how you can build it and configure your request in practical ways. We dig deeper in every lecture, and this course has many bonus lectures which extend your knowledge base and test your skills with fun challenges.This course offers you the best fundamentals and practical skills with AJAX. It can be taken alone (you don’t need to do any other course) to achieve your goals. You will emerge from this course with an advanced understanding and practical experience with making HTTP requests. It will take you to the point where you will understand what method (GET or POST) to use when sending data, how to define where the data goes, how to set up an AJAX engine and how to check for errors. This is awesome knowledge. This course will captivate you and catapult you to the next level and is an important part of your journey to become a leading Grandmaster in web development.In this course you’ll learn everything about AJAX. From the basics of building an AJAX engine, all the way to learning about XML and JSON, asynchronous code, protocols, constructor functions, Promises, Streams, HTTP protocols, Fetch API, the Async/Await keywords, and various APIs such as Fetch, URL Interface, Headers Interface and Request Interface and a whole bunch more!If you want to become a full stack web developer, you need this course!HOW IS THIS COURSE DIFFERENT?A unique feature of my course is the key detail I provide about how AJAX really works behind the scenes – a skill that every full-stack developer needs to master in order to utilize potential to improve.I use simple and effective lessons to take you beyond starter libraries like Axios or jQuery. Libraries are helpful but are not a replacement for knowledge and once you can write your own, you will better be able to use and amend library code.In this course, I focus on the more fundamental aspect of AJAX. I use plain JavaScript which is the core programming language you need in order to use AJAX. Once you master using JavaScript with AJAX, then integration of a library can benefit you and may make sense.In order to understand how AJAX works, I dive into topics such as protocols, constructor functions, asynchronous code, data format types (JSON and XML), Promises, Streams, error handling and how to use the keywords Async/Await with the Fetch API.Practice makes perfectTheory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this course.I love teaching and often use practical examples, which is why I start coding with you from the get-go. I will show you why the XHR object is a constructor function. I will show you the difference between JSON and XML. I will show you how to set up an XHR object, show you how to build Promises, show you what Streams are and how to use the new Fetch API. These concepts are all best learnt by coding up real examples. I can’t wait.  IS THIS COURSE FOR YOU?Absolutely. If you fit in any of these categories then this course is perfect for you:#1: BUSY PEOPLE who want to become certified and confident in AJAX in the shortest time possible.#2: PROGRAMMING DESIRE. You want to advance in the world of programming.#3: FREELANCERS who want to know how successful developers build dynamic websites that can update information without a page refresh (like Twitter, Google Maps etc).#4: WEBSITE OWNERS who want to gain a solid understanding of how AJAX really works.#5: AGENCIES who want to up-skill their developers quickly.#5: EVERYBODY who wants to LEARN.WHY START NOW? ?Right this second, your competitors are learning how to become better web developers.Web development is a blazing hot topic and not set to cool off in the future. We need the web more and more and advancements keep happening. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples to help you most.Lets get started!What do you get?>11.5 hours of video contentLifetime access to all tutorial videos. No fees or monthly subscriptions.Q&A support.Quizzes and coding challenges to help you learn.I’ve allowed you to download all of my lectures for offline viewing.Hope you are as excited as I am to get started and get learning, and I can’t wait to show you how to confidently apply AJAX it to your own websites.See you in the lectures.


Section 1: History of AJAX

Lecture 1 Section introduction

Lecture 2 History of AJAX

Lecture 3 A little more about Java (a tangent)

Lecture 4 The first time “AJAX” was coined

Lecture 5 Is AJAX still relevant today?

Lecture 6 Summary

Section 2: HTTP Protocol and the role of AJAX

Lecture 7 Section introduction

Lecture 8 Dynamic vs Static Sites

Lecture 9 HTTP Protocol

Lecture 10 URI and Protocols

Lecture 11 What are the use of ports?

Lecture 12 How to place data into an HTTP request – Part 1

Lecture 13 How to place data into an HTTP request – Part 2

Lecture 14 How to place data into an HTTP request – Part 3

Lecture 15 Correction

Lecture 16 How to place data into an HTTP request – Part 4

Section 3: What is HTTP/2 and HTTP/3?

Lecture 17 Before you begin

Lecture 18 HTTP/1.1 – where it all began

Lecture 19 Where did HTTP/2 come from?

Lecture 20 What is HTTP/2?

Lecture 21 Quick comment on HTTP/2

Lecture 22 HTTP/2 Q&A

Lecture 23 HTTP/3 – quick word

Section 4: Synchronous vs Asynchronous Code

Lecture 24 Section introduction

Lecture 25 Synchronous vs Asynchronous code

Lecture 26 Quick word on threads and why AJAX was introduced

Lecture 27 Synchronous examples

Lecture 28 Asynchronous examples

Section 5: AJAX – The Basics

Lecture 29 An overview of the GET / RESPONSE process

Lecture 30 What is AJAX?

Lecture 31 Typical Request vs AJAX Request

Lecture 32 Summary

Section 6: JSON & XML

Lecture 33 What is XML and how does it differ to HTML?

Lecture 34 Parsing XML data using the DOMParser method

Lecture 35 Parsing XML data – finishing off our example

Lecture 36 JSON introduction and similarities to JavaScript

Lecture 37 JSON and XML

Lecture 38 How to use the JSON method

Lecture 39 Example of a JSON object and XML object

Lecture 40 Similarities and differences between JSON and XML

Lecture 41 XML is sometimes easier to use than JSON

Lecture 42 Quick word

Lecture 43 Summary

Section 7: Constructor functions

Lecture 44 Section introduction

Lecture 45 First AJAX example

Lecture 46 The XMLHttpRequest() object is a constructor function

Lecture 47 What is a constructor function?

Lecture 48 Constructor Functions vs Object Literals

Lecture 49 What is the NEW keyword?

Lecture 50 What happens if you don’t use the NEW keyword?

Lecture 51 Introduction to the property

Lecture 52 Using the property to throw a custom Error

Lecture 53 Constructor functions are a little more complex

Section 8: Original AJAX – XMLHttpRequest()

Lecture 54 Section intro

Lecture 55 Why learn about the XHR object?

Lecture 56 How to set up an AJAX request

Lecture 57 What is the readyState property

Lecture 58 Using the readyState property

Lecture 59 What is the onreadystatechange event handler?

Lecture 60 responseText property, and the danger of not listening for readyState of 4

Lecture 61 Take a step back

Lecture 62 Status codes

Lecture 63 Quick Analogy – readyState vs status

Lecture 64 Checking for status code

Lecture 65 Replacing onreadystatechange with the onload event handler

Lecture 66 ResponseType property

Lecture 67 The onerror event

Lecture 68 The onprogress event (tracking download progress)

Lecture 69 Monitoring upload progress

Lecture 70 Challenge (listening for progress and load events) – intro

Lecture 71 Challenge (listening for progress and load events) – setting up our code

Lecture 72 Challenge (listening for progress and load events) – finishing off our challenge

Lecture 73 Submitting a POST request

Lecture 74 Creating our PHP server and finishing off our POST request

Section 9: Modern AJAX – Fetch Basics

Lecture 75 Section introduction

Lecture 76 Fetch intro

Lecture 77 What are promises?

Lecture 78 Promises return values

Lecture 79 Fetch is asynchronous

Lecture 80 Promises – and using the then() statements

Lecture 81 Promise states

Lecture 82 Promises – and using the catch() statements

Lecture 83 Quick word on THEN and CATCH

Lecture 84 Fetch uses callback functions

Lecture 85 Fetch – under the hood

Lecture 86 What is the event loop? How I view it.

Lecture 87 Fetch returns a Promise

Lecture 88 Fetch has similar syntax to jQuery

Lecture 89 Take a step back – Fetch summary

Lecture 90 What is the Response object?

Lecture 91 How do you work with Readable Streams?

Lecture 92 What is the json() method

Lecture 93 Using the json() method to access our JSON data

Lecture 94 Fetching external data – complete example

Lecture 95 Challenge intro – XHR vs Fetch vs Async

Lecture 96 Challenge – building our XHR request

Lecture 97 Challenge – building our fetch request

Lecture 98 Challenge – a glimpse into Async/Await

Section 10: Modern AJAX – Streams

Lecture 99 Section introduction

Lecture 100 Streams are advanced

Lecture 101 Streams are an advanced technique

Lecture 102 What are streams

Lecture 103 Reading a stream (advanced)

Lecture 104 Let’s get more advanced by using the pipeThrough() method

Lecture 105 Using the pipeThrough() method to read chunks in real time

Lecture 106 Writing to streams

Lecture 107 Summary

Section 11: Modern AJAX – Fetch Advanced Concepts

Lecture 108 Section introduction

Lecture 109 Fetch recap

Lecture 110 Using the json() and text() method to access our data

Lecture 111 Comparing json() to JSON.parse()

Lecture 112 Request Interface and Headers Interface to define our fetch options

Lecture 113 Challenge Intro – building 2 fetch requests

Lecture 114 Challenge – setting up our HTML

Lecture 115 Challenge – using fetch() to retrieve our IP address

Lecture 116 Challenge – using fetch() to retrieve our image

Lecture 117 What is the URL Interface object

Lecture 118 Challenge – error handling

Lecture 119 Error handling with fetch

Lecture 120 Using the OK property to throw errors

Lecture 121 Challenge – improving our code to incorporate error handling

Lecture 122 POST fetch request

Section 12: Async/Await – improving our fetch() code

Lecture 123 Event Loop – intro

Lecture 124 Having fun – micro vs macro tasks explained by looking at code

Lecture 125 Creating our own promise to execute code off the main thread

Lecture 126 What is the main thread?

Lecture 127 Async/Await – intro

Lecture 128 Async example – it returns a promise

Lecture 129 Await – intro

Lecture 130 Async and Await (advanced example)

Lecture 131 Async/Await – final example

Lecture 132 Challenge intro – improve our code by using Async/Await

Lecture 133 Challenge solution – refactoring our Image fetch call (using async/await)

Lecture 134 Challenge solution – refactoring our IP fetch call (using async/await)

Lecture 135 Challenge solution – error handling with a TRY and CATCH block

Section 13: Outro

Lecture 136 Outro

Everybody,BUSY PEOPLE who want to become certified and confident in AJAX in the shortest time possible,Everybody who knows about web development but wishes they knew more,YES: This course is for beginners too. Aimed at people new to the world of web development. No previous JavaScript experience is necessary,NO: This course is NOT only for beginners. It is a course that is suitable for intermediates who know the basics and have an idea about how AJAX works, but want to dig deeper to know its inner workings. Knowledge is power, as they say.,YES: This course is for someone wanting to be an informed professional, to be expert and confident in the entire front-end development process when it comes to sending data to servers and doing something with the response,Those who want to learn modern coding without third party libraries and frameworks,Those who have some knowledge of AJAX, but little in-depth know-how about how it all works behind the scenes, and how to practically implement best practices in their websites to stay ahead of the pack,FREELANCERS who want to know how successful developers build dynamic websites that can update information without a page refresh (like Twitter, Google Maps etc).,EVERYBODY who wants to learn.

Course Information:

Udemy | English | 12h 7m | 4.20 GB
Created by: Clyde Matthew

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top