Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Complete JSON AJAX API Code Course Beginner to Professional

Name: Complete JSON AJAX API Code Course Beginner to Professional
Rating: 4.6 (852 reviews)

Learn how to use JSON and get JSON data using AJAX Course includes practice exercises and examples using JSON & AJAX

Created byLaurence Svekis

Last updated 11/2024

English

English [Auto],

What you'll learn

Use JSON data within web applications
Make AJAX requests across the web
Build more dynamic and interactive applications

Course content

19 sections • 311 lectures • 25h 35m total length

Introduction to JSON and AJAX3:29
Learn to use JSON and Ajax to fetch, parse, and display API data in web apps, with step-by-step examples and included source code for practical practice.
How to use this course with resources5:44
Course Overview and how to use this course3:23
Course Development Environment and tools9:15
Visual Studio Code Setup and Live Server Setup15:19
Quick start lesson shows you the basics of visual studio code free open source code editor. Setup a file and setup LiveServer to run html files on your local machine. Web developer and web design quick start tutorial.

Introduction to JSON what is JSON6:04
Learn what JSON is (JavaScript object notation) and how it works as a lightweight, text-based data format used with Ajax to exchange data between browser and server.
JSON in JavaScript7:18
Compare json and xml, illustrating a root level json with first name, last name, age, address, and phone numbers, and show creating a json-like javascript object.
Source Code0:07
JSON Overview.9:53
JavaScript Objects6:20
Creating JSON4:28
Source Code0:09
More complex nesting JSON9:12
Build and validate more complex JSON objects by nesting objects and arrays, extending with addresses, hobbies, and cars, and practice accessing and updating data in the console.
Source Code0:12
Back to JavaScript7:17
Source Code0:09
Multiple Values in Object7:16
Source Code0:13
Use JavaScript with JSON6:34
Learn to loop through arrays in JavaScript using for, while, and for each, output results to the page, and update a JSON object with splice, push, sort.
Source Code0:15
JSON on the web12:54
Source Code0:12
Session storage JSON12:07
Save form data to session storage by converting inputs into a json string and storing it. Retrieve and parse the json to display readable results in a web app.
Store Values as String6:28
Source Code0:22
Section Resources JSON

JSON exercise getting to know JSON2:56
MYJSON website not working anymore0:26
JSON Exercise Setup Data7:00
Build a json data structure in JavaScript, including a tasks list with boolean done values, and validate and stringify json. Then parse it into a usable object for html output.
JSON Exercise Use String Values as Data.11:15
Learn to parse JSON strings, select DOM elements, and build a dynamic task checklist by looping through JSON data and rendering checkboxes based on true/false values.
JSON Exercise Make it Interactive9:33
Make the task list interactive by adding checkboxes that update the json object in real time, keeping the data and display in sync.
Source Code JSON exercise0:20
JSON Exercise JSON better structure5:45
JSON Exercise Use the new Data with JavaScript8:58
JSON Exercise Store Current Data Instance8:10
Source Code Lesson 60:27
JSON Exercise Add new items to the list7:37
JSON Exercise Tweaks and Bug Fixes12:00
Master dynamic JavaScript task lists by building and syncing checkboxes with JSON data, fixing rendering issues, and refining function design to keep code dry and reusable.
JSON Exercise sessionStorage ready data.3:46
Learn how to store and persist task list data using sessionStorage, stringify JSON, and keep updates after refresh; explore easy save, add tasks, and future removal and clear functionality.
Source Code JSON application0:35
JSON Exercise Delete a Task9:01
Create a dynamic JSON-driven checklist by adding a delete task feature: click the X, trigger an event, splice the item from the data, and rebuild the list.
JSON exercise AJAX and JSON10:51
Source Code Completed Project0:54
Exercise Resources0:15

Section Introduction4:26
AJAX introduction for Fetch and XHR7:47
Discover how Ajax enables asynchronous data exchange with JavaScript, using XHR or fetch to load JSON from a server, update the DOM, and handle ready state and errors.
XHR requests across the web11:52
Exercise Random User XHR options6:23
Learn to use XML http request and Ajax options, including onprogress, readyState, and onload, then load data from the random user API to display first name, last name, and thumbnail.
Exercise Random User AJAX Load Data5:38
Source Code Exercise AJAX0:16
More XHR practice4:26
XHR Request Data9:34
Source Code Joke Exercise0:12
JavaScript Fetch5:23
Learn how to use the fetch API in JavaScript to replace xml http requests, handle responses with promises, and fetch text and json data from a web api.
Source Code Fetch0:14
Fetch Promise Response.8:22
Explore different fetch patterns and promise chaining to retrieve data from a URL, inspect the response object, headers, and content-type, output json or text, and catch errors.
Fetch Options5:17
Source Code Fetch Jokes0:13
Post with Fetch5:06
Learn to post data with fetch to a url, pass parameters as json, configure method, headers, and content type, and handle the server response in json via promises.
Fetch Form Submit Data10:34
Source Code form submit0:27
AJAX section Overview1:57
Resources for section0:01

Axios and jQuery Introduction5:19
Introduction to jQuery3:11
Learn how to use jQuery to simplify Ajax calls across browsers. Include the library via download or CDN and implement XHR requests with minimal code.
AJAX with jQuery7:51
Discover how to use ajax with jquery to make asynchronous requests, select and update dom elements by id, class, or tag, and display results in the output div.
jQuery AJAX output to element6:38
Learn how jQuery performs ajax requests and Json responses, configure data types, chain methods, and update the page with data.title and data.body from an api.
Source Code JQuery Get0:11
jQuery in Codepen7:38
Learn to use jQuery in CodePen to write html, css, and javascript, then implement ajax calls with success and done callbacks to update the output.
Source Code 40:04
jQuery AJAX shorthand3:08
Use the jQuery ajax shorthand with the get method and a URL variable. Fire a callback, console log the data, and explore space API results while noting a future loop.
Source Code 50:10
jQuery Mulitple Items API4:19
Source Code Get JSON0:11
jQuery Post example8:22
Source Code POST jQuery0:14
jQuery post with AJAX4:17
Master the jQuery ajax post workflow by using the longer ajax format with url, data, and success handling, while exploring headers, JSON, and cross-domain considerations.
Source Code jQuery Post0:15
JQuery Exercise Overview.3:30
JavaScript libraries for AJAX8:10
AXIOS Get Data Update HTML1:55
Source Code Axios Form0:15
Loop Multiple Items in Object3:32
Loop through API results with a for loop, build HTML to display each person's name, location, email, and thumbnail image, and fetch data using Axios.
Source Code Axios Exercise0:16
Axios AJAX post4:46
Source Code Exercise Axios0:16
Axios Exercise Overview4:23
Learn how to post form data with axios, prevent default submit, and handle server JSON responses using plain JavaScript and Ajax; update the page with response data and catch errors.
Section Resources0:29

JSON server Introduction4:46
set up a json server locally to practice ajax and json, create a default db.json, and explore posts with comments, search, and routes such as paginate and sort.
How to Setup Local JSON Database9:48
Postman Tool for AJAX4:10
Create your HTML elements4:37
Interactive Button7:26
Learn to leverage a flexible json database, keep the auto-generated id, post new records with ajax and Postman, and restart the json server to reindex and reflect updates.
XHR request data6:59
Source Code JSON server0:19
XHR post data to json DB5:22
Build and test post requests with xhr to a json db, sending data via form format, setting headers, and validating responses with a json server.
Exercise JSON server interface14:17
Exercise Build Page Comments6:34
Use Postman to fetch posts by ID with GET requests, handle dynamic IDs and asynchronous responses, and output results to the page while looping JSON data for next/previous navigation.
Source Code JSON database0:51
Post create new posts6:02
Source Code Posts0:58
Search JSON server5:45
List Comments5:45
Add Post Comments7:35
Add post comments shows how to post comments via ajax, sending body and post id, and updating the DOM dynamically without a page refresh.
Source Code Post to JSON db1:18
Code Review JSON server5:29
Explore json server’s features and practice ajax with javascript, jquery, axios, or fetch on a local setup while loading posts and comments by id and testing requests with postman.
Source Code GET POST content1:26
Section Resources0:06

Google Sheet Data API2:48
Changes to Google Sheets0:25
New Updated Sheet as JSON data23:13
PLEASE NOTE YOU CAN SKIP THIS LESSON Setup Sheet Data5:28
PLEASE NOTE YOU CAN SKIP THIS LESSON Google Sheet Get Sheet Data as JSON5:42
PLEASE NOTE YOU CAN SKIP THIS LESSON Source Code Google Script0:02
PLEASE NOTE YOU CAN SKIP THIS LESSON JSON Output Sheet Data6:38
PLEASE NOTE YOU CAN SKIP THIS LESSON Source Lesson 3 GS data0:14
START HERE Apps Script Google Scripting Server Side8:36
Use Google Script to Create Output15:36
Learn to write google scripts and query a google sheet via range and last row. Stringify json data and publish a web app with error handling and postman testing.
Google Script Source Lesson 50:10
Create JSON feed from Google Sheets6:07
Source Code lesson 60:13
Google Script POST data12:02
Google Script Lesson 70:22
Form Setup to Post on webpage4:22
Post data to Google Sheets5:58
Learn to post form data to Google Sheets using jQuery Ajax, serialize form inputs, prevent default submission, and handle the server response to deposit into the correct columns.
Random User Data API6:30
Project Overview and Review.8:25
Final Application Source Code0:39
Resources0:02

AJAX tester Tool Introduction3:25
Setup Page Elements3:55
set up an ajax tester with a form and a default rest api url, add a submit button, and wire JavaScript to send requests on click.
Make first AJAX Request2:54
Create your first ajax request by building a makeRequest function with an XMLHttpRequest, opening a GET asynchronously, monitoring ready state, and processing responseText when status is 200.
Dynamic Input data11:02
AJAX Add jQuery8:33
Add Axios AJAX4:54
Add Fetch AJAX4:51
Add fetch AJAX by wiring a URL, using promise-based fetch with then and catch, returning JSON data while handling errors and status.
Source Code GET0:54
Add Post Data Option8:15
Add post data option enables selecting get or post, serialize form data, and send via Ajax using JavaScript form data; explains status handling for 200 and 201.
Update for POST3:32
Update post requests using jquery serialize to send form data. Set up post requests with proper content type form url encoded and implement error handling.
Update post for Fetch and Axios4:20
Update post requests for fetch and axios by passing parameters and setting method, headers, and body. Handle responses and errors with promises and catch blocks.
AJAX tester Code Review7:58
Explore how the ajax tester app sends get and post requests with dynamic inputs and form serialization, using jquery, axios, fetch, and xhr.
Source Code completed1:18
Section resources0:03

Popular API requester mini application introduciton2:38
Page and Element Setup4:16
Set up a page with a div output for dynamic content and a search button with id search to trigger ajax, and use window.onload to attach a click listener.
Bring in the XHR Object9:20
Connect to Wikipedia AP6:29
Output Data into web Page8:10
YouTube API with JavaScript5:28
Add YouTube API search5:58
Pull YouTube search results via the API, parse the JSON items, extract title and thumbnails from snippet, and output a clickable video list in a four-column layout.
Style data output8:17
Information app source code review4:41
Source Code Final Application0:51
Section resources0:02

Introduction to working with AJAX1:51
Learn to build apps by consuming json data from APIs with ajax and javascript, building a quiz app that loads questions, categories, and question types, answer buttons, and score.
Element and Page Setup3:34
Set up an ajax call trigger with a button labeled click me, connect it via an event listener, and implement an XMLHttpRequest to fetch data.
AJAX Make Request Callback3:28
Set up an ajax request, monitor ready states, and confirm a 200 status. Parse the response as json and implement a callback to return data for building a trivia quiz.
Connect Get API content4:18
Build an ajax quiz that fetches results, loops through questions, renders multiple choice and true/false options, and tracks score with a global answers object via click to fetch new questions.
Output Question format4:58
Source Code 40:23
Dynamic Build Buttons JavaScript6:19
Build dynamic answer buttons in JavaScript from correct and incorrect options and output them to the HTML, with event listeners to check answers.
JavaScript Dynamically Build Elements4:25
Source Code 60:31
Tweak Quiz and add Scoring6:05
Show correct answer6:59
Source Code Quiz0:45
More fun with APIs7:10
AJAX API section conclusion2:40
Showcases building an ajax-driven quiz app, pulling data from the Star Wars and random user APIs, looping through results, handling pagination, and outputting data to a web page.
Source Code 100:17
Section resources0:02

Requirements

Basic HTML and JavaScript
Web development experience
Coding experience is required

Description

Prefect course for beginners to learn AJAX and JSON!!! Step by step learning with all steps included

Perfect for API Beginners to learn more about connecting to web apis with JavaScript

Please note this course is designed for students with prior coding experience and objective of the course is to present how to connect to APIs and endpoints using JavaScript. The course does have prerequisites - JavaScript knowledge is an absolute prerequisite to the course - DO NOT TAKE THE COURSE without prior Coding experience.

Loaded full of examples and code snippets that can be used to build upon, practice and get comfortable with AJAX. Top developer resources, helpful tips and many many open APIs to practice with all included.

Source Code also included so you can jump right in and start building applications.

JSON is the preferred format for data being transferred between coding languages. Its easy to read, create and work with. Learn about JSON how it works and how you can use it within your own applications.

AJAX provides the ability for your JavaScript code to make http requests to get data and update your page content with the new data. The data is commonly in JSON format which makes it ideal for use within JavaScript applications.

Together AJAX and JSON are used everywhere and go hand in hand powering many of the top web applications and providing users what they expect from modern websites.

Technologies used within this course : JavaScript, HTML, CSS, Nodejs, AJAX, jQuery, SQLite, plus several npm packages

JSON - JavaScript Object Notation

A lightweight data-interchange format which is easy for humans to read and write

Learn what JSON is and how to use it with JavaScript.
Explore how to read and write JSON objects.
Iterate thru JSON data and output data contents into your web page HTML elements.
Build JSON in a dynamic format for better versatility and management.
Event Triggers : How to trigger event listeners to use JSON data within JavaScript. Saving JavaScript data as JSON formatted content.
JSON objects and Strings in JavaScript, conversion and manipulation.
Getting JSON using HTTP XML request object.
Exercise : practice JSON by building out several mini projects including a task list from scratch which stores content into local storage and retrieves local string content converted back in usable JavaScript objects.

AJAX - Asynchronous JavaScript and XML

AJAX for building web based interactive applications that process user requests immediately. No page reload bring data into your application.

Explore how AJAX works and how it is used in web applications
See what Fetch and XHR are and how they work to get data
Connect to external content and data, load it into you application and output the data for the user.
Exercise : Using AJAX to connect to a web API and retrieve random user information.
Learn how to use AJAX to get a txt file content
Exercise : Use AJAX to retrieve jokes from an API and output the response data into your website.
Find out how to use Fetch and make AJAX requests using Fetch
Exercise : Simple POST and GET to server using Fetch and xHR AJAX. Posting form data to a server using Fetch

AJAX made easy with Libraries

Explore AJAX using two of the most popular libraries online. They solve the problem of cross browser differences in XHR requests and provide a seamless easy to apply experience when using AJAX

Using jQuery or Axios for AJAX
The easy way to AJAX with options
jQuery AJAX and shorthand ajax methods.
Exercise : Connect to various web APIs using jQuery and Axios - Build simple AJAX mini applications
jQuery Explore how you can use this most popular JavaScript library to do more with less coding.
Lightweight library option : Axios provides a seamless AJAX approach that works off promises.

JSON Server for AJAX practice Locally

Often when using AJAX locally we run into CORS errors or others, JSON server provides the perfect resource to easy setup and practice running a local JSON ready server. Send POST and GET requests and a whole lot more.

Learn how to set JSON server locally
Top resources to practice AJAX requests during development like Postman
Exercise : Create a front end application to connect to your JSON server and send data. JavaScript and HTML to setup user interface
Practice making an AJAX request to the local server. Posting to JSON server using JavaScript AJAX
Exercise : Practice exercise to build interactive application driven by local json DB data.
Add more options and even search the local database. Amazing easy to use JSON server options like search
Exercise : Mini application to store user info into the database.

Google Sheets as a data source for AJAX requests

Explore using Google Script along with Google Sheets to output data from your sheet. Learn how to connect that data to your applications. Apps Script is a scripting language for light-weight application development in the G Suite platform

Step by step instruction on how to setup Google Sheets with a web app outputting data as JSON
Use AJAX from your web application to get that data into your JavaScript code.
Extend this even further using Google Apps Script. GET and POST to the Google Script web app adding and retrieving data in JSON format.
Exercise : Send and retrieve data from Google Sheets. Create a user list as Google Sheets used as a data source.
Exercise : Connect to a web API for user data and add it easily into your form to send to your Google Sheet.

AJAX using xHR request, Fetch, jQuery and Axios

Different options for AJAX requests are explored and presented for comparison.

Step by step lessons to help you learn AJAX.
Explore the various ways to make AJAX request while building and learning about the 4 different methods presented within the course.
Exercise : fully functional mini tester application where you can input a URI and make AJAX requests.

AJAX retrieving JSON data from popular end points

Using AJAX request data for your applications from popular APIs like YouTube and Wikipedia. Learn how to navigate web APIs and use the data within your projects.

Exercise : Connecting to Wikipedia API and exporting response data from API
Exercise : Connecting to YouTube and Wikipedia using search to query and return JSON data to use within your webpage.

JavaScript AJAX based trivia application exercise

Explore using popular APIs to build interactive and dynamic applications.

Exercise : Connecting to trivia API and sorting response data
Exercise : Using response JSON to output and build dynamic content for users to interact with.

RESTful API setup and development

Using Node, jQuery, JavaScript, SQLite, learn how to setup and connect a database to a RESTful API.

Explore how to setup a Restful API! GET, POST, PUT, DELETE
Explore how the terminal can be used to setup a backend server using Node.js. Command line interface simple commands will be used to navigate and seutp folders.
Learn how to setup an http server using node ready for localhost
Using web resources like postman test your routes and endpoint responses. API web resources Postman CRUD
Setup your routes for a Restful API GET POST PUT DELETE
Updating with adding a SQLite Database to hold data
Exercise : Mini application to send and retrieve user information from server database.

RealTime Push messaging Exercise

Using pusher setup a real time messaging application that pushes data to open pages. Send and retrieve data in real time instantly.

Explore how to integrate web services into applications.
Use AJAX requests to send data to web services
Exercise : Build a simple real time messaging application from scratch

AJAX fetch request API Exercise

Explore how to build a simple Crypto Currency web application from scratch. Perfect exercise to learn more and practice different request options as well as explore how to customize data for frontend output.

Setup a local server using Express and practice AJAX requests locally
Avoid local CORS errors and sending requests from the backend
Use request to connect to web APIs
Multiple ways to make AJAX requests including fetch and jQuery
Explore retrieving and updating API data on the backend before it comes to the frontend
Exercise : Build a custom Crypto currency information application

AJAX Twitter API Exercise

Explore the Twitter Developer API connect from your local machine. Use AJAX JavaScript and Node to setup twitter search.

Learn to setup a local server request web content
Connect to the Twitter API return MASSIVE amounts of data Search and explore
Access Tweet objects and get JSON data to your webpage
POST to Twitter from your webpage
GET tweet objects
Exercise : Build a mini application to search tweets and post to twitter.

This course covers everything you need to learn about JSON and AJAX, including practice exercises, loads of examples, source code and step by step training. Along with friendly support in the Q&A to help you learn and answer any questions you may have.

Try it now you have nothing to lose, comes with a 30 day money back guarantee.

See what you can build with AJAX and JSON!!!!

Who this course is for:

Anyone who wants to learn more about APIs
Web developers
Web application developers
Beginners to JSON and AJAX
Developers who want to practice getting JSON data

Complete JSON AJAX API Code Course Beginner to Professional

What you'll learn

Explore related topics

Course content

Introduction to course content and resources5 lectures • 37min

JSON JavaScript Object Notation Introduction21 lectures • 1hr 38min

JSON exercise Task List18 lectures • 1hr 40min

AJAX various AJAX options in JavaScript19 lectures • 1hr 28min

AJAX libraries jQuery and Axios25 lectures • 1hr 19min

JSON Server Exercise Practice JSON and AJAX locally20 lectures • 1hr 40min

Google Sheet API data GET POST with jQuery21 lectures • 1hr 54min

AJAX request tester using GET and POST exercise14 lectures • 1hr 6min

JavaScript AJAX API exercise YouTube and Wikipedia API11 lectures • 56min

More APIs Trivia API and more16 lectures • 54min

Requirements

Description

Who this course is for: