Become a pro at AJAX and learn about streams, promises, event loops, and more
About This Video
In Detail
AJAX refers to how browsers make HTTP requests to servers asynchronously, listen …
Become a pro at AJAX and learn about streams, promises, event loops, and more
About This Video
In Detail
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.
Understanding web development is an ongoing process. To give you a foot up, this course has gone all out to structure an all-encompassing, focused, AJAX course, which will be delivered to you in a way that will benefit you the most.
Knowing AJAX is crucial if you want to become a full-stack 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 do not dispute this, but with correct training, which includes explaining the fundamentals in a simple way, you will learn to master and love AJAX.
If you want to become a full-stack web developer, you need to know about AJAX and that is what this course is all about.
This course takes you through the history of AJAX, HTTP protocol, and the role of AJAX. You will also explore HTTP/2 and HTTP/3, synchronous and asynchronous code. This course will also take you through the basics of AJAX, JSON, XML, and constructor functions. Lastly, you will learn modern AJAX such as fetch basics and streams.
By the end of the course, you will become a pro in AJAX fundamentals.
Audience
This course is for everybody, from beginners and advanced coders. This course is for someone wanting to be an informed professional, an expert, and confident in the entire front-end development process when it comes to sending data to servers and doing something with the response. You only need to know a little HTML and JavaScript.
Chapter 1 : History of AJAX
Promotional Video
Section Introduction
History of AJAX
The First Time “AJAX” Was Coined
Summary
Chapter 2 : HTTP Protocol and the Role of AJAX
Section Introduction
Dynamic Versus Static Sites
HTTP Protocol
URI and Protocols
How to Place Data into an HTTP Request - Part 1
How to Place Data into an HTTP Request - Part 2
How to Place Data into an HTTP Request - Part 3
How to Place Data into an HTTP Request - Part 4
Chapter 3 : What is HTTP/2 and HTTP/3
HTTP/1.1 - Where It All Began
Where Did HTTP/2 Come From?
What is HTTP/2?
HTTP/2 Q
Chapter 4 : Synchronous Versus Asynchronous Code
Section Introduction
Synchronous Versus Asynchronous Code
Synchronous Examples
Asynchronous Examples
Chapter 5 : AJAX – The Basics
An overview of the GET / RESPONSE Process
What Is AJAX?
Typical Request Versus AJAX Request
Summary
Chapter 6 : JSON and XML
What Is XML and How Does It Differ to HTML?
Parsing XML Data Using the DOMParser Method
Parsing XML Data - Finishing Off Our Example
JSON Introduction and Similarities to JavaScript
How to Use the JSON Method
Example of a JSON Object and XML Object
Similarities and Differences Between JSON and XML
XML Is Sometimes Easier to Use than JSON
Summary
Chapter 7 : Constructor Functions
Section Introduction
First AJAX Example
The XMLHttpRequest() Object Is a Constructor Function
What Is a Constructor Function?
What Is the NEW Keyword?
What Happens If You Don’t Use the NEW Keyword?
Introduction to the new.target Property
Using the new.target Property to Throw a Custom Error
Constructor Functions Are a Little More Complex
Chapter 8 : Original AJAX – XMLHttpRequest()
Section Introduction
Why Learn about the XHR Object
How to Set Up an AJAX Request
What Is the readyState Property?
Using the readyState Property
What Is the onreadystatechange Event Handler?
responseText Property, and the Danger of not Listening for readyState of 4
Status Codes
Checking for Status Code
Replacing onreadystatechange with the Onload Event Handler
ResponseType Property
The onerror Event
The onprogress Event (Tracking Download Progress)
Monitoring Upload Progress
Challenge (Listening for Progress and Load Events) - Introduction
Challenge (Listening for Progress and Load Events) - Setting Up Our Code
Challenge (Listening for Progress and Load Events) - Finishing Off Our Challenge
Submitting a POST Request
Creating Our PHP Server and Finishing Off Our POST Request
Chapter 9 : Modern AJAX – Fetch Basics
Section Introduction
Fetch Introduction
What Are Promises?
Fetch Is Asynchronous
Promises - and Using the then () Statements
Promises - and Using the catch() Statements
Fetch Uses Callback Functions
Fetch - Under the Hood
What Is the Event Loop? How I View It
Fetch Returns a Promise
Fetch Has Similar Syntax to jQuery
Take a Step Back - Fetch Summary
What Is the Response Object?
How Do You Work with Readable Streams?
What Is the Json() Method
Using the Json() Method to Access Our JSON Data
Fetching External Data – Complete Example
Challenge Introduction – XHR Versus Fetch Versus Async
Challenge - Building Our XHR Request
Challenge - Building Our Fetch Request
Challenge - A Glimpse into Async/Await
Chapter 10 : Modern AJAX - Streams
Section Introduction
What Are Streams?
Reading a Stream (Advanced)
Using the pipeThrough() Method to Read Chunks in Real Time
Writing to Streams
Summary
Chapter 11 : Modern AJAX – Fetch Advanced Concepts
Section Introduction
Fetch Recap
Using the json() and text() Method to Access Our Data
Comparing json() to JSON.parse()
Request Interface and Headers Interface to Define Our Fetch Options
Challenge Introduction - Building Two Fetch Requests
Challenge - Setting Up Our HTML
Challenge - Using fetch () to Retrieve Our IP Address
Challenge - Using fetch () to Retrieve Our Image
What Is the URL Interface Object?
Challenge – Error Handling
Error Handling with Fetch
Using the OK Property to Throw Errors
Challenge - Improving Our Code to Incorporate Error Handling
POST Fetch Request
Chapter 12 : Async/Await – Improving Our fetch () Code
Event Loop - Introduction
Having Fun – Micro Versus Macro Tasks Explained by Looking at the Code
Creating Our Own Promise to Execute Code Off the Main Thread
Async/Await - Introduction
Async Example - It Returns a Promise
Await - Introduction
Async and Await (Advanced Example)
Async/Await - Final Example
Challenge Introduction - Improve Our Code Using Async/Await
Challenge Solution - Refactoring Our Image Fetch Call (Using Async/Await)
Challenge Solution - Refactoring Our IP Fetch Call (Using Async/Await)
Challenge Solution - Error Handling with a TRY and CATCH Block
Chapter 13 : Conclusion
Outro