Jump to content

JavaScript Programming/AJAX and JSON

Add links
From Wikiversity
JavaScript Programming
  1. Introduction
  2. Variables and Expressions
  3. Functions
  4. Events
  5. Conditions
  6. While Loops
  7. For Loops
  8. Arrays
  9. Date and Time
  10. Objects
  11. DOM and BOM
  12. Dynamic HTML
  13. Forms and Security
  14. AJAX and JSON
  15. Libraries and Frameworks
  16. Node.js REST API
Download Learning Guide

This lesson introduces AJAX and JSON.

Objectives and Skills

[edit | edit source]

Objectives and skills for this lesson include:

  • Send and receive JSON data using AJAX

Readings

[edit | edit source]
  1. Wikipedia: AJAX
  2. Wikipedia: JSON
  3. Wikibooks: JavaScript/XMLHttpRequest
  4. Wikibooks: JavaScript/Handling JSON

Multimedia

[edit | edit source]
  1. YouTube: JSON and AJAX Tutorial: With Real Examples
  2. YouTube: JSON Crash Course
  3. YouTube: Learn JSON - Full Crash Course for Beginners
  4. AJAX - Beau teaches JavaScript

Examples

[edit | edit source]

Activities

[edit | edit source]

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.

  1. 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.
  2. 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.
  3. Optional: See Node.js REST API for information and examples on how to set up your own test JavaScript web server.

Lesson Summary

[edit | edit source]

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

[edit | edit source]
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]

See Also

[edit | edit source]

References

[edit | edit source]
  1. ↑ JSON.org
  2. ↑ https://en.wikipedia.org/wiki/Ajax_(programming)
  3. ↑ https://en.wikipedia.org/wiki/Ajax_(programming)
  4. ↑ https://www.tutorialrepublic.com/javascript-tutorial/javascript-json-parsing.php
  5. ↑ https://www.w3schools.com/js/js_json_intro.asp
  6. ↑ https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange
  7. ↑ https://www.w3schools.com/tags/ref_httpmethods.asp
  8. ↑ https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/AJAX_and_JSON&oldid=2627696"