JavaScript Programming/AJAX and JSON

This lesson introduces AJAX and JSON.

Objectives and Skills

Objectives and skills for this lesson include:

Send and receive JSON data using AJAX

Readings

Multimedia

Examples

Activities

Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.

Convert your JavaScript Programming/Forms and Security project to send form data using AJAX and JSON rather than through form submission. Use POST to add users and use GET to retrieve user data.
Use an online API simulation tool such as jsonplaceholder.typicode.com to test your code. Depending on configuration of your API simulation tool, the returned data may or may not match the data you send. The intent is to test XMLHttpRequest communication rather than the API itself.
Optional: See Node.js REST API for information and examples on how to set up your own test JavaScript web server.

Lesson Summary

Additional items will be contributed by course participants

JavaScript Object Notation or JSON is a universal data structure used to exchange information between multiple engines, languages, and servers. ^[1]
JSON is a large string that stores literals, and has its own formatting and syntax.
AJAX, or Asynchronous Javascript and XML, is a method for javascript to communicate with external webpages and/or servers.
Using AJAX allows web developers to update their webpages without having to refresh or redirect the user to another page.
GET and POST are the 2 main methods, being used to request and send data to servers, respectively.

Key Terms

AJAX (Asynchronous JavaScript and XML): With AJAX, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.^[2]

Data Interchange Format: A data-interchange format is a text format which is used to interchange or exchange data between different platforms and operating systems. JSON is the most popular and lightweight data-interchange format for web applications.^[3]

GET: GET is used to request data from a specified resource. GET is one of the most common HTTP methods (and the default method).^[4]

JSON: JSON is text, written using JavaScript object notation.^[5]

onReadyStateChange: It is an event handler that is called whenever the readyState attribute changes.^[6]

POST: POST is used to send data to a server to create/update a resource. The data sent to the server with POST is stored in the request body of the HTTP request.^[7]

XMLHttpRequest: The XMLHttpRequest object is used to interact with the server (get or post data). This enables a Web page to update just part of a page without disrupting what the user is doing.^[8]

References

← Forms and Security

JavaScript Programming

Libraries and Frameworks →

[1] JSON.org

[2] ttps://en.wikipedia.org/wiki/Ajax_(programming)

[3] ttps://en.wikipedia.org/wiki/Ajax_(programming)

[4] ttps://www.tutorialrepublic.com/javascript-tutorial/javascript-json-parsing.php

[5] ttps://www.w3schools.com/js/js_json_intro.asp

[6] ttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

[7] ttps://www.w3schools.com/tags/ref_httpmethods.asp

[8] ttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]