Learn AJAX with jQuery

Learn one of the coolest techniques on the web and begin building quick, interactive, and attractive websites today!

Created byIan Schoonover

Last updated 9/2020

English

What you'll learn

Create a simple app with jQuery and AJAX
Implement AJAX into any existing or future web applications
Understand how to make HTTP requests (GET, POST, PUT, & DELETE ) with AJAX
Have quick access to a coding mentor (me) via the Q&A boards

Course content

4 sections • 28 lectures • 1h 55m total length

Introduction0:44
Welcome to Build a Single Page Application with jQuery & AJAX!
Setup and project overview4:26
Learn what AJAX stands for and how we will be using it in our project by reviewing the before and after versions of the to do list application.
What you will need to get started0:59
Run through this check list to be sure you have everything you need before working through the course lectures in the following sections

How to make a GET request with AJAX9:25
Learn how to make a simple HTTP GET request with jQuery's AJAX $.get() method and get back JSON data from an API (server)
GET request lecture resources0:24
Review what you've just learned and use these resources to explore the topics in more detail
How to make a POST request with AJAX7:48
Learn how to send data to an API (server) via a POST request with jQuery's AJAX $.post() method
POST request lecture resources0:11
Review what you've just learned and use these resources to explore the topics in more detail
How to make PUT & DELETE requests with AJAX13:07
Learn how to update and delete resources from a database by sending PUT & DELETE requests to an API (server) via jQuery's $.ajax() method
PUT & DELETE request lecture resources0:19
Review what you've just learned and use these resources to explore the topics in more detail

Creating a To Do Item - Part 18:19
Refactor your to do list application by moving the new to do item form from the new.ejs view to the index.ejs view where it will live along side our list of to do items
Creating a To Do Item - Part 1 - Resources0:26
Review what you've just learned and use these resources to explore the topics in more detail
Creating a To Do Item - Part 27:05
Send form data via a POST request to our API (server) then get back the newly created item and append it to the DOM with jQuery
Creating a To Do Item - Part 2 - Resources0:19
Review what you've just learned and use these resources to explore the topics in more detail
Editing a To Do Item - Part 17:04
Refactor the to do list application by moving the edit form from the edit.ejs view to the index.ejs view where it will be hidden until we toggle it with an edit button
Editing a To Do Item - Part 1 - Resources0:25
Review what you've just learned and use these resources to explore the topics in more detail
Note about "Editing a To Do Item - Part 2"0:48
Editing a To Do Item - Part 28:34
Send the edit to do item form data via a PUT request to our API (server) then update the DOM with the response data that we get back
Editing a To Do Item - Part 2 - Resources0:51
Review what you've just learned and use these resources to explore the topics in more detail
Deleting a To Do Item7:52
Add a submit listener to the delete button/form and send a DELETE request to the API (server) to remove the item from the database and then remove the item from the DOM after receiving a successful response from the server
Deleting a To Do Item - Resources0:26
Review what you've just learned and use these resources to explore the topics in more detail
Updating/Refactoring Your Code5:40
Tidy up the app by refactoring our JavaScript and index.ejs view code
Updating/Refactoring Your Code - Resources0:27
Review what you've just learned and use these resources to explore the topics in more detail

Transpile Template Literal Syntax with Babel, using Gulp1:24
Learn how to transpile the ES6 template literal syntax using gulp and babel.
Search Functionality0:08
Microservice Refactor0:41
Refactoring your Express app into a REST API and decoupling the client-side code into its own Microservice
Microservice Refactor - Part 112:33
Decouple the front-end from the back-end by turning your client-side code into its own microservice and the server into an API.
Microservice Refactor - Part 215:10
Bonus Lecture0:17

Requirements

You should have a basic understanding of JavaScript fundamentals
Knowing jQuery is a plus, but certainly not required!
Have Node and NPM installed (instructions included in the first section of this course)
You should know how to build a basic CRUD app with Node's Express (or some other MVC) framework (if you don't, that's fine too, the Express app is already built for you)
What you will learn in this course may also be applied to frameworks like Django and Rails or any client-side project that has full access to a REST API

Description

Hi and welcome to the course!

So you've learned HTML, CSS, & JavaScript, but now you are wondering what to learn next so you can advance your web development skills.

Well look no further! Join me in this quick, easy-to-follow, step-by-step course and get started learning the ins-and-outs of AJAX with jQuery, today!

What will we be building?

We're going to take a simple CRUD application, made with Node's Express framework, and refactor it into a single page application using jQuery & AJAX (I've already created the Express app for you, so you can jump right into learning AJAX).

You can then use this knowledge to integrate AJAX into any of your current or future web projects.

If you don't know Express or jQuery then you can still follow along, but I would highly recommend learning those technologies beforehand to get the most out of this course. You can learn Express and jQuery (along with a myriad of other modern web technologies) from Colt Steele in his "The Web Developer Bootcamp" course on Udemy.

Who this course is for:

This course is for anyone who is interested in building really cool websites!
Anyone who wants to learn to build seamless single page applications (SPA) with AJAX
Novice to mid-level web developers with a basic understanding of JavaScript
Also recommended for anyone who has completed Colt Steele's "The Web Developer Bootcamp" (or any similar course)

Learn AJAX with jQuery

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 6min

AJAX Basics6 lectures • 31min

Building a Single Page Application13 lectures • 48min

Bonus Content6 lectures • 30min

Requirements

Description

Who this course is for: