Book Image

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

By : SkillZone .
Book Image

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

By: SkillZone .

Overview of this book

AJAX allows your users to add/delete/view/update content, post comments, submit reviews, submit forms, and a ton more, without getting a page refresh. This course will captivate you with real-life examples and catapult you to the next level and set you well on your way to achieving everything you want to with AJAX. This course introduces you to AJAX and lays the foundation. Later on, you will start digging into advanced concepts such as Basic Auth, CORS, and servers. In this course, you will learn how to send authentication information using the XHR object and the Fetch API. You will see how to take user inputs, convert them into JSON data, and send that data to a server. Understand how to retrieve XML, JSON, and text data from a server. Look at how to take data from the server and update the page dynamically using JavaScript. You will also learn how to write great code using modules, write middleware and define RESTful AJAX APIs, and more. Finally, you will build a fully functional site that performs basic CRUD operations and saves data to a server. This simple application will use the power of RESTful AJAX APIs to speak to a server and perform tasks like adding/deleting/updating and viewing data that is stored on your server. By the end of this course, you will be able to “speak” and “walk” AJAX by gaining an understanding of how you can use it in meaningful and practical ways. All the resource files are added to the GitHub repository at: https://github.com/PacktPublishing/AJAX-Next-Level-Authentication-Servers-Modules-Projects-and-More-

Related Content you might be interested in

Current Title:

Small book image
AJAX Next Level (Authentication, Servers, Modules, Projects, and More) [Video]
SkillZone .
Nov, 2022 | 15 hours 45 minutes
No titles found
Table of Contents (11 chapters)
Free Chapter
1
Introduction to the AJAX and Recap
Introduction
Overview of AJAX
What Is AJAX and Where Did It Come From?
Traditional Request Versus AJAX Request
How Do You Write an AJAX Request?
2
Mini-Project Recap
Introduction – What Are We Going to Build
Setting Up the HTML
Writing the CSS
XHR AJAX - Fetching Text from Our Server
XHR AJAX - Refactoring Code and Adding HTML to the DOM
XHR AJAX - Fetching JSON from Our Server
The responseType Property
Third-Party API
XHR AJAX - Fetching JSON from a Third-Party API
Fetch AJAX - Retrieving Text from Our Own Server
Fetch AJAX - Retrieving JSON from Our Server and Third-Party API
3
Advanced Mini-Project Recap (PHP and Node.js)
Introduction to the Section
What Are We Going to Build
Write Our HTML
Setting Up Our AJAX Request
URL and Query Parameters
Writing Our PHP Server-Side Code
How to Access XML Data Returned by the Server
Retrieving Data from the PHP Server, and Inserting It into the DOM
Finishing Off Our PHP Server Example
Setting Up Node and Sending a Response
Reading a Node Text Response
Completing Our Node Example
4
HTTP Basic Authentication Using AJAX
Introduction to Authentication
Basic HTTP Auth in Action
How Basic Authentication Works and Why Are We Discussing it in this Course
Base64 Encoding Versus Encryption
Basic Authentication Compared to Traditional HTTP Requests
What Is Apache?
Strike the Right Balance
How to Start an Apache Server
Setting Up Our Apache Server and .htaccess File
Adding Basic Authentication in Apache
What Are We Going to Build
Building the HTML
The preventDefault Method
Sending User Credentials with AJAX, with Custom base64 Encoding
Using XHR for Basic Authentication
Creating a Custom Error Message in Apache
Updating Our Code to the Modern Fetch API
Node Example - What Are We Going to Build?
What is a Node Server?
Setting Up Our Node Server
Checking Whether the Authorization Header Exists
Extract User Credentials Using Buffer
No Server-Side Language is Perfect
Finishing Off Our Node Example
The next() Function Stops Middleware
More about the next() Function
Spotted an Error
Basic Authentication - Section Summary
Section Outro
5
Cross-Origin-Resource-Sharing (CORS) and Single-Origin-Policy (SOP)
Introduction to CORS
Introduction to Same-Origin-Policy (SOP)
Two Types of CORS Requests - Simple + Preflight
What is the HEAD Method
Simple CORS Request
Foreword on the Purpose of a Preflight Request
CORS Preflight Request
CORS in Action
Setting the Scene for a CORS Example
Setting Up Our HTML
Performing a SIMPLE CORS Request
Missing the Access-Control-Allow-Origin Header
CSRF Attacks
How to Enable CORS on a SIMPLE Request
Adding the Access-Control-Allow-Origin on Our Server
How to Initiate a PREFLIGHT CORS Request
Sending a PREFLIGHT CORS Request by Setting Custom Content-Type Header
Setting the Access-Control-Allow-Headers on the Server
Adding Basic Authentication
CORS Summary
Outro
6
Course Final Project – Task 1 – Server and Routes
Introduction to Section
Defining RESTful API Endpoints
First, We Will Build Server-Side Code and Then Only AJAX
Sneak Peek
Using NPM to Install the Express Framework
What is NPM and Node Modules
Viewing the Express Source Code Inside the node_modules Folder
Setting Up Our Node Server
Difference Between res.send() Versus res.end()
Defining Routes on Our Server
Defining Our Routes in a Separate File
Exporting Our Routes Through the module.exports Command
JavaScript Modules (ES Modules) Versus Node Modules (CommonJS)
Testing Our Router Object
Creating the GET Route
Installing Nodemon
Postman Introduction
Creating a POST Route
Express.json() Versus Express.urlencoded()
Creating a Unique ID Function
Creating a PUT Route - Part 1 (Using the find Method)
What is the Array.find() Method
Creating a PUT Route - Part 2 (Using the splice Method)
What is the Array.splice() Method
Testing Our Routes in Postman
Creating a DELETE Route
Server Outro
7
Course Final Project – Task 2 – XMLHttpRequest (AJAX API)
Introduction to Section
What Are We Going to Build Together?
HTML and File Overview
XHR AJAX GET Request
Fixing CORS by Writing a Custom Middleware Function
Fixing CORS by Installing the "cors" Module with NPM
Adding Dynamic Text to the GET Request
Creating an AJAX Library/Module
Converting Our GET Request into a Module
Overview of Our GET Request
XHR AJAX POST Request
Improving Our GET Request (Turning Our AJAX Call into a Synchronous One)
Completing the POST Request by Initiating the Request in the app.js File
Updating the POST Paragraph Text Dynamically
Adding Some Error Handling
Completing the PUT XHR Request
Completing the DELETE XHR Request
XHR Outro
8
Course Final Project – Task 2 – Fetch (AJAX API)
Introduction to Section
GET Fetch Request - Setup
Using a Callback Function to Write Our GET Fetch Request
POST Fetch Request
PUT Fetch Request
DELETE Fetch Request
Summary - Our AJAX Requests Are RESTful Compliant
Fetch Outro
9
Course Final Project – Task 2 – Axios (AJAX API)
Section Introduction
Basic Challenge - Introduction to What We Are Going to Build with Axios
Installing AXIOS
Fetching Text Data with AXIOS
Fetching JSON Data with AXIOS
Setting Up Our Main Course Project Files for Axios
GET Request Using Axios
Inspecting the Axios Response Object
POST Request Using Axios
PUT Request Using Axios
DELETE Request Using Axios
Axios Outro
10
Course Final Project – Task 3 – Final Frontend + AJAX APIs + Server Routes
Introduction to Section
What Are We Going to Build?
HTML - Navbar and Add Dog Button
What Are HTML Entities
HTML - Add Dog Modal
HTML - Update Dog Modal
We Don't Need the Name Attributes
CSS - Headings and Buttons
CSS - Add Dog Modal
CSS - Update Dog Modal
Using JavaScript to Our Modals
CSS - Tables
AJAX GET Request - Perform a GET Request on the DOMContentLoaded Event
Using JavaScript to Add an Update and Delete Button to Our Table
POST Request
Clearing Form Data When a User Hits 'Submit'
Take a Step Back
Using the reset() Method to Clear Form Values
Populating the Update Modal - Part 1 - Traversing the DOM to Find the ID
Take a Step Back: Traversing the DOM
Populating the Update Modal - Part 2 - Using the find() Method to GET Our Dog
Populating the Update Modal - Part 3 - Finishing
Improving Our Code - Disabled and classList Properties
PUT Request - Updating a Dog
DELETE Request - Removing a Dog
Recap – You Have Come a Long Way
11
Conclusion
Outro
Chapter 7
Course Final Project – Task 2 – XMLHttpRequest (AJAX API)
Content Locked
Section 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.
Previous Section
End of Section 5
Next Section