Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Exercise JSON server with AJAX practice application
Rating: 4.6 out of 5(18 ratings)
2,520 students

Exercise JSON server with AJAX practice application

Learn JSON and practice making XHR requests and receiving responses in JavaScript Setup a JSON server locally
Created byLaurence Svekis
Last updated 11/2024
English

What you'll learn

  • Setup a local JSON server
  • Make AJAX calls locally to a local JSON database
  • Use response data to update HTML content
  • Send and receive JSON data using AJAX

Course content

2 sections24 lectures2h 3m total length
  • JSON server course Introduction4:51
  • Setup Local JSON DB9:48

    Set up Node and npm; install json-server globally to create a local json db and a rest api for ajax practice, then run and explore posts, comments, and profile endpoints.

  • Postman Tool for AJAX4:10

    Install postman as an ajax testing tool to send get, post, put, patch, and delete requests, view responses, and test json payloads in your browser.

  • Create your HTML elements4:37
  • Interactive Button7:26

    Learn to manage a JSON server with AJAX by updating routes on the fly, preserving IDs, testing posts with Postman, and wiring an interactive button to fetch data.

  • XHR request data6:59
  • Source Code 6 JSON server exercise0:19
  • XHR post data to json DB5:22

    Learn to post data to a json db using xhr post, including form-encoded data, headers, and content type, and verify successful responses from the json server.

  • Exercise JSON server interface14:17

    Build a JSON server interface to view posts, post comments, and search data, with previous/next navigation and a form to submit data and display output.

  • Exercise Build Page Comments6:34

    Build a page using json-server and ajax to fetch posts by id with get requests, loop through array data, and output to inner HTML with next/previous and comments.

  • Source Code 8 Update JSON Database0:51
  • Post create new posts6:02

    Post new posts by submitting form data to the posts endpoint. Build a data object from input values and confirm database updates as posts are created.

  • Source Code 90:58
  • Search JSON server5:45
  • List Comments5:45

    Learn how to fetch and display post-specific comments with ajax, using post IDs to link comments to posts, load comments on page load, and render them in the UI.

  • Source Code 11 Post to JSON DB1:18
  • Add Post Comments7:35
  • Exercise Source Code 121:26
  • Code Review JSON server5:29
  • Resources0:05

Requirements

  • JavaScript JSON and AJAX
  • HTML and CSS
  • Computer programming knowledge

Description

Are you looking for an easy to setup local-hosted JSON server?  This course is designed to help you setup and learn to practice JSON and AJAX.  Use it locally on your own machine and practice working with AJAX and JSON all from your computer.  No CORS errors no problem everything done locally.

Designed to help you learn and practice JSON and will walk you through settings up JSON Server.  This will give you a fully functional JSON database that you can use to practice JSON and AJAX.  Course covers basics of XHR requests in JavaScript and how to GET and POST data.

Learn how to make XHR requests, see the updates to the database directly in your editor viewing the JSON database.  Find out more about tools and resources used to make XMLHttpRequests in JavaScript.

JavaScript Object Notation or JSON is an open-standard file format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types. It is a very common data format used for asynchronous browser–server communication, including as a replacement for XML in some AJAX-style systems.

Introduction to setting JSON locally and AJAX with JavaScript 

Get started today and see what amazing things you can create online!!!!

Course covers

  • How to set JSON server locally
  • Postman as a tool for checking XHR objects
  • JavaScript and HTML to setup user interface
  • Adding JavaScript XHR XMLHttpRequest Object
  • Making an AJAX request to the local server
  • Posting to JSON server using JavaScript AJAX
  • Practice exercise to build interactive application driven by local json DB data.
  • Making new posts and adding comments to the Database
  • Amazing easy to use JSON server options like search
  • Looping multiple array values from responses and outputting the content to HTML pages
  • Moving through different posts adding comments

Source Code is included to get you started quickly

Taught by an instructor with many years of web development experience

Fast and Friendly Q&A support

Lifetime access with professional support to help you learn

What are you waiting for join now and see what you can do with JSON and AJAX?

Who this course is for:

  • JavaScript developers
  • Web developers
  • Web application programmers
  • Anyone who wants to setup and practice AJAX locally