*New* Ajax Beyond Fundamentals, Simply Advanced

Master HTTP Basic Authentication, CORS, Modules, XHR, FETCH and AXIOS. Build a complete website using RESTful AJAX APIs

What you'll learn
*Download lectures (for offline viewing)
Learn how to send authentication information using the XHR object and the Fetch API
What are RESTful APIs
How to use AJAX with XHR, Fetch and Axios
How to access JSON and text data from a server response
What is Apache and how it differs from Node
How to set up an Apache server, a PHP server and a Node server
Single-Origin-Policy vs CORS
Preflight vs Simple CORS requests
Basic HTTP Authentication using AJAX
How to allow cross-domain requests with AJAX
How to access XML data from a server response
What happens when an AJAX request arrives at the server
How a server can handle an AJAX request
How to use Postman to test your server side routes
How to use Nodemon to speed up your server side development process
ES Modules vs CommonJS modules
What are CORS errors, and how you can fix them
Practical - build awesome dynamic front-end AJAX examples with me
I am here to support you, step-by-step
From beginner to expert (advanced +)
You will emerge an expert
Gives you depth of knowledge to boost your ability and confidence to built dynamic websites
Requirements
Preferable (but not essential) to complete my AJAX Fundamentals course
Desire to become a serious full stack web developer
Desire to KNOW how to send user authentication information using AJAX
A need to take your fullstack website skills to the next level
Desire to create dynamic, interesting and first-ace websites
Basic HTML, CSS and JavaScript will be helpful
Desire to KNOW the full process of how an AJAX request is sent by the browser, processed by a server, and what happens when a server finally sends back a response
A computer is required as you need to code alongside me to learn effectively
Description
****JUMP ON BOARD****+ Get instant access to >15 hours of high quality videos+ Get access to downloaded resources and project files+ Instructor supportThis advanced AJAX course will teach you how to use AJAX in different ways, and also teach you how to solve common issues you’ll face when working with AJAXEven if you have little knowledge about AJAX, I’ve got you covered. Section 1 of this course provides a summary of AJAX. From section 2 we start building projects together and from Section 4 we start digging into advanced concepts like Basic Auth, CORS and servers.Knowing  advanced AJAX concepts is crucial if you want to become a serious fullstack developer, as it will allow you to make asynchronous HTTP requests and listen for incoming data from servers. AJAX can get tricky at times, and I don’t dispute this, but with correct training which includes explaining difficult concepts in a simple way, you will, like me, learn to master and love AJAX.What is AJAX ==> in one sentenceAJAX allows your users to add/delete/view/update content, post comments, submit reviews, submit forms and a ton more, without getting a page refresh.Learn the (advanced) secrets of AJAX in this courseUnderstanding the fundamentals of AJAX is important. That's why I created a AJAX Fundamentals course. I assume that you have either (1) done my AJAX Fundamentals course, or (2) at the very least you've heard of AJAX and know about the XHR object and the Fetch API.  This course is important, because it goes beyond the fundamentals of AJAX. It allows you to master AJAX and take your skills to the next level. It will equip you to become a highly sought-after programmer. Learn how to send authentication information using the XHR object and the Fetch APILearn how to take user inputs, convert it into JSON data, and send that data to a server. Learn how to retrieve XML, JSON and text data from a serverLearn how to take data from server and update the page dynamically using JavaScript. Learn how to write great code using modules, writing middleware and defining RESTful AJAX APIs, and more!Delivering an interactive, asynchronous web experience is challenging. In this advanced AJAX course, we take a deep-dive into AJAX. We will tackle questions like: How can you use Basic HTTP Authentication with AJAX? What do you do if you get a CORS issue using AJAX? What happens when an AJAX request reaches a server? What are RESTful APIs and how do you set them up? Answering these questions with confidence will propel you to the next level.WHAT THIS COURSE COVERS?This course is best done if you already have a little understanding of AJAXIf you have never heard of AJAX, I encourage you to first do my AJAX Fundamentals course. The reason I have done this is that my AJAX Fundamentals course provides everything you need to start using AJAX yourself. It gives you the sound fundamentals and practicals regarding AJAX. It will take you to the point where you will understand where AJAX came from, how to set up an AJAX request using the XHR object and the modern Fetch API.This course picks up on that one, but goes further by digging into topics that are advanced. This course will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end web development.What you will learn:Understand how to use the XHR, Fetch API and Axios to make an AJAX requestHow to set up Basic HTTP Auth using Apache, PHP and NodeHow to solve CORS issuesHow to define your own AJAX libraryHow to use Modules (ES Modules and CommonJS modules)How to build an entire application that makes RESTful AJAX requestsHow to use middleware (like cors(), express.urlencoded() and express.json()) on your serverHow to set up Routes on your server and send responses back to a browserHow to become a better frontend programmerAnd more!In this course you’ll learn about Basic Auth, CORS, SOP, RESTful services, server routes, middleware, modules, and a ton more!END GOAL OF THIS COURSEYou 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. In building this application you will learn the following:Set up a server to store all of your dataThe server will be set up on a different port number than your frontend codeYou will have to solve CORS errorsListen for the DOMContentLoaded event to send an AJAX request to populate your table dataThe users will be able to perform all CRUD operations (create/read/update/delete dog data)All your AJAX code will be written in a module and will be RESTful compliantAnd a ton more!How amazing is that?By the end of this course, you'll be able to “speak” and “walk” AJAX by gaining an understanding of how you can use it in meaningful and practical ways. We dig deeper in every lecture, and this course has a lot of additional content that will extend your knowledge base and test your skills.Through practical examples, this course helps you understand AJAX piece by piece. And we use the latest and best features of JavaScript and browsers along the way so you can stay ahead of the pack.*** One of the most advanced AJAX courses on Udemy ***Successful programmers know more than the basics of AJAX. They also know how to solve CORS issues, how to implement authentication and how to set up servers . If you’re wanting to become a full stack developer, you need to know how to send JSON to a server via AJAX (i.e you need to know how to convert your JS objects to JSON), how to define modules and how to use the response data to update the page dynamically. You need to master CORS, and how to allow cross-domain requests, and more!I want you to become a successful front-end AJAX Grandmaster.I want you to be able to apply what your learn in this course to your webpage.This course is perfect for you.Who is the instructor?My name is Clyde and together we’re going to learn how successful web developers create whizbang websites that are dynamic and engaging!The root to understanding how to be a professional front-end web developer is understanding how data is exchanged between a server and a browser. Today, this is done by using AJAX.After completing three university degrees, and post graduate studies, I developed a fascination for web design and software languages. For many years I have immersed myself in this. I spent a fair bit on top courses and went on to apply the knowledge practically. I recognized gaps in some of the courses I’ve taken and hence my course teaches what I wish I was taught. My intention is to share the knowledge with you in an easy to follow manner, so that we can benefit together. You benefit form learning, and I from sharing in your success.How is this course different?There are lots of great courses that focus on web development. But they never get into the detail about AJAX related issues that will pop up when you start creating more complex sites.In this course, I focus on the more advanced topics of AJAX. This includes understanding why the XHR object allowed a username and password field, why you will sometimes want your frontend running a port number that is different to the server port, how to set up a server, how to implement Basic Auth, how to utilize the power of Modules, and more!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. From Section 2 and beyond we start building AJAX projects together. I love practical examples, which is why this course is full of them. I have a final course project that we will build together, which is an application giving a user the ability to add, update, delete and fetch data from a server.Is this course for you?Absolutely.It doesn't matter where you are in your web development journey. It's suitable for all levels.Still unsure? If you fit in any of these categories then this course is perfect for you:Student #1: You want to get better in the world of fullstack programmingStudent #2: You want to know how you can use AJAX in a practical way to perform CRUD (create, read, update and delete) operationsStudent #3: You want to gain a solid understanding of how to build RESTful APIsStudent #4: You want to start using backend frameworks like Node.js, Apache or PHP but want to first master how AJAX interacts with these serversStudent #5: You know a little about what AJAX is, but have little knowledge about how it works behind the scenes, and how to practically implement it in applicationsStudent #6: You have taken other courses in web development but just don’t feel like you’ve grasped AJAXWHY START NOW?Right this second, your competitors are learning how to become better web developers.Web development is a blazing hot topic at the moment. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.Lets get started!What do you get?Lifetime access to all tutorial videos.No fees or monthly subscriptions.Q&A support.Quizzes and challenges to help you learn.I’ve allowed you to download all of my lectures for offline viewing.Let's get excited about becoming a professional web developer, and to be able to confidently apply it to your own websites.See you in the lectures.

Overview

Section 1: AJAX recap

Lecture 1 Introduction

Lecture 2 Can you skip this section?

Lecture 3 Overview of AJAX

Lecture 4 What is AJAX and where did it come from?

Lecture 5 Is AJAX still relevant today?

Lecture 6 Traditional request vs AJAX request

Lecture 7 How do you write an AJAX request?

Section 2: Mini-Recap Project

Lecture 8 Introduction - what are we going to build

Lecture 9 Setting up the HTML

Lecture 10 Writing the CSS

Lecture 11 XHR AJAX - fetching text from our server

Lecture 12 XHR AJAX - refactoring code and adding HTML to the DOM

Lecture 13 XHR AJAX - fetching JSON from our server

Lecture 14 The responseType property

Lecture 15 Third party API

Lecture 16 XHR AJAX - fetching JSON from a third party API

Lecture 17 Fetch AJAX - retrieving text from our own server

Lecture 18 Fetch AJAX - retrieving JSON from our server and third party API

Section 3: Advanced Mini-Recap Project (PHP and Node.js)

Lecture 19 Section intro

Lecture 20 What are we going to build

Lecture 21 Write our HTML

Lecture 22 Setting up our AJAX request

Lecture 23 URL and query parameters

Lecture 24 Quick word

Lecture 25 Writing our PHP server side code

Lecture 26 How to access XML data returned by the server

Lecture 27 Retrieving data from the PHP server, and inserting it into the DOM

Lecture 28 Finishing off our PHP server example

Lecture 29 Setting up Node and sending a response

Lecture 30 Node Modules

Lecture 31 Reading a Node text response

Lecture 32 Difference between xhr.response and xhr.responseText

Lecture 33 Completing our Node example

Section 4: HTTP Basic Authentication using AJAX

Lecture 34 Introduction to authentication

Lecture 35 Quick word on authentication

Lecture 36 Basic HTTP Auth in action

Lecture 37 HTTP Basic Auth

Lecture 38 How Basic Authentication works and why are we discussing it in this course

Lecture 39 Base64 encoding vs encryption

Lecture 40 Basic Authentication compared to traditional HTTP requests

Lecture 41 What is Apache

Lecture 42 Strike the right balance

Lecture 43 How to start an Apache server

Lecture 44 Setting up our Apache server and .htaccess file

Lecture 45 Purpose of the .htaccess file

Lecture 46 Adding Basic Authentication in Apache

Lecture 47 The .htaccess file does not have logout functionality

Lecture 48 What is the use of the .htpasswd file?

Lecture 49 What are we going to build?

Lecture 50 Building the HTML

Lecture 51 The preventDefault method

Lecture 52 Using the window.event keyword

Lecture 53 Sending user credentials with AJAX, with custom base64 encoding

Lecture 54 How to prevent the browser popup

Lecture 55 Using XHR for Basic Authentication

Lecture 56 Creating a custom error message in Apache

Lecture 57 Updating our code to the modern Fetch API

Lecture 58 Next example is using Node

Lecture 59 Node example - what are we going to build?

Lecture 60 What is a node server

Lecture 61 How to install Node

Lecture 62 How to install Express

Lecture 63 Setting up our Node server

Lecture 64 How to set up a server in Node.js

Lecture 65 Where does Node look for modules?

Lecture 66 Checking whether the Authorization header exists

Lecture 67 Extract user credentials using Buffer

Lecture 68 No server side language is perfect

Lecture 69 Finishing off our Node example

Lecture 70 The next() function has a dual purpose

Lecture 71 The next() function stops middleware

Lecture 72 More about the next() function

Lecture 73 Spotted an error

Lecture 74 Basic Authentication - Section Summary

Lecture 75 Section outro

Section 5: Cross-Origin-Resource-Sharing (CORS) and Single-Origin-Policy (SOP)

Lecture 76 Intro to CORS

Lecture 77 Intro to Same-Origin-Policy (SOP)

Lecture 78 Two types of CORS requests - Simple + Preflight

Lecture 79 What is the HEAD method

Lecture 80 Simple CORS request

Lecture 81 Foreword on the purpose of a preflight request

Lecture 82 Quick word

Lecture 83 CORS preflight request

Lecture 84 CORS in action

Lecture 85 Setting the scene for a CORS example

Lecture 86 Setting up our HTML

Lecture 87 Performing a SIMPLE CORS request

Lecture 88 Missing the Access-Control-Allow-Origin header

Lecture 89 CSRF attacks

Lecture 90 How to enable CORS on a SIMPLE request

Lecture 91 Adding the Access-Control-Allow-Origin on our server

Lecture 92 How to initiate a PREFLIGHT CORS request

Lecture 93 Sending a PREFLIGHT CORS request by setting custom Content-Type header

Lecture 94 Setting the Access-Control-Allow-Headers on the server

Lecture 95 Adding Basic Authentication

Lecture 96 CORS Summary

Lecture 97 Outro

Section 6: Course Final Project - Task 1 - Server and Routes

Lecture 98 Section intro

Lecture 99 Defining RESTful API endpoints

Lecture 100 First we will build server-side code and then only AJAX

Lecture 101 Sneak Peak

Lecture 102 Using NPM to install the Express framework

Lecture 103 What is NPM and Node Modules

Lecture 104 Viewing the Express source code inside the node_modules folder

Lecture 105 Setting up our Node server

Lecture 106 Difference between res.send() vs res.end()

Lecture 107 Defining routes on our server

Lecture 108 Defining our routes in a separate file

Lecture 109 Exporting our routes via the module.exports command

Lecture 110 JavaScript Modules (ES Modules) vs Node Modules (CommonJS)

Lecture 111 Testing our Router object

Lecture 112 Creating the GET route

Lecture 113 Installing Nodemon

Lecture 114 Postman introduction

Lecture 115 Creating a POST route

Lecture 116 Express.json() vs Express.urlencoded()

Lecture 117 Creating a unique ID function

Lecture 118 Creating a PUT route - Part 1 (using the find method)

Lecture 119 What is the Array.find() method

Lecture 120 Creating a PUT route - Part 2 (using the splice method)

Lecture 121 What is the Array.splice() method

Lecture 122 Testing our routes in Postman

Lecture 123 Creating a DELETE route

Lecture 124 Well done

Lecture 125 Server outro

Section 7: Course Final Project - Task 2 - XMLHttpRequest (AJAX API)

Lecture 126 Section intro

Lecture 127 What are we going to build together?

Lecture 128 Remember, this is not going to be our final frontend

Lecture 129 HTML and file overview

Lecture 130 XHR AJAX GET request

Lecture 131 Fixing CORS by writing a custom middleware function

Lecture 132 Fixing CORS by installing the "cors" module with NPM

Lecture 133 Adding dynamic text to the GET request

Lecture 134 Creating an AJAX library / module

Lecture 135 Converting our GET request into a module

Lecture 136 Overview of our GET request

Lecture 137 XHR AJAX POST request

Lecture 138 Improving our GET request (turning our AJAX call into a synchronous one)

Lecture 139 Completing the POST request by initiating the request in the app.js file

Lecture 140 Updating the POST paragraph text dynamically

Lecture 141 Adding some error handling

Lecture 142 Completing the PUT XHR request

Lecture 143 Completing the DELETE XHR request

Lecture 144 Summary

Lecture 145 XHR outro

Section 8: Course Final Project - Task 2 - Fetch (AJAX API)

Lecture 146 Section intro

Lecture 147 GET fetch request - setup

Lecture 148 Using a callback function to write our GET fetch request

Lecture 149 Later I will improve the GET request

Lecture 150 POST fetch request

Lecture 151 PUT fetch request

Lecture 152 DELETE fetch request

Lecture 153 Summary - our AJAX requests are RESTful compliant

Lecture 154 Fetch outro

Section 9: Course Final Project - Task 2 - Axios (AJAX API)

Lecture 155 Section intro

Lecture 156 Basic challenge - intro to what we are going to build with Axios

Lecture 157 Installing AXIOS

Lecture 158 Fetching text data with AXIOS

Lecture 159 Fetching JSON data with AXIOS

Lecture 160 Why use Axios?

Lecture 161 Setting up our main course project files for Axios

Lecture 162 GET request using Axios

Lecture 163 Inspecting the Axios response object

Lecture 164 POST request using Axios

Lecture 165 PUT request using Axios

Lecture 166 DELETE request using Axios

Lecture 167 Axios outro

Section 10: Course Final Project - Task 3 - Final Frontend + AJAX APIs + Server Routes

Lecture 168 Section intro

Lecture 169 You've done the hard slog

Lecture 170 What are we going to build

Lecture 171 HTML - navbar and Add Dog button

Lecture 172 What are HTML Entities

Lecture 173 HTML - Add Dog Modal

Lecture 174 HTML - Update Dog Modal

Lecture 175 We don't need the name attributes

Lecture 176 CSS - headings and buttons

Lecture 177 CSS - Add Dog modal

Lecture 178 CSS - Update Dog modal

Lecture 179 Using JavaScript to close our modals

Lecture 180 CSS - tables

Lecture 181 All the HTML and CSS is done

Lecture 182 AJAX GET request - perform a GET request on the DOMContentLoaded event

Lecture 183 Using JavaScript to add an update and delete button to our table

Lecture 184 POST request

Lecture 185 Clearing form data when a user hits 'submit'

Lecture 186 Take a step back

Lecture 187 Using the reset() method to clear form values

Lecture 188 Populating the update modal - Part 1 - Traversing the DOM to find the ID

Lecture 189 Take a step back: traversing the DOM

Lecture 190 Populating the update modal - Part 2 - Using the find() method to GET our dog

Lecture 191 Populating the update modal - Part 3 - Finishing

Lecture 192 Improving our code - disabled & classList properties

Lecture 193 PUT request - updating a dog

Lecture 194 DELETE request - removing a dog

Lecture 195 Recap - you've come a long way

Section 11: Outro

Lecture 196 Outro

Anyone who has completed my AJAX Fundamentals course,YES: This course is for beginners to intermediate programmers. Although some AJAX knowledge will be helpful, it is not vital because I have a section dedicated to recapping what AJAX is,NO: This course is NOT only for beginners. It is a complete beginner to advanced master course that is suitable for intermediates who know the basics and have an idea about AJAX, but want to dig deeper to know its inner workings. Experienced students sometimes prefer to skip the first section that they are very familiar with,YES: This course is for someone wanting to be a professional, to be expert and confident in the entire front-end development process,Those interested in building their own frameworks, or being better able to learn from the source code of other well-known frameworks and libraries,Those wanting to start using frameworks (e.g. like Angular or Node) that are heavily reliant on JavaScript and knowing the process flow of front-end web development,Those who have some knowledge of web development, but little knowledge about how it works behind the scenes, and how to practically implement best practices in their websites