Cross-Origin-Resource-Sharing (CORS) and Single-Origin-Policy (SOP) | AJAX Next level 2025 - For everyone, Authentication, Modules, Projects

Book Overview & Buying
Table Of Contents

AJAX Next level 2025 - For everyone, Authentication, Modules, Projects

By : SkillZone

Buy this Video

AJAX Next level 2025 - For everyone, Authentication, Modules, Projects

By: SkillZone

Buy this Video

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-

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?

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

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

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

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

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

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

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

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

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

Conclusion

Outro

AJAX Next level 2025 - For everyone, Authentication, Modules, Projects

By : SkillZone

AJAX Next level 2025 - For everyone, Authentication, Modules, Projects

By: SkillZone

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access