JavaScript Programming/AJAX and JSON
Objectives and Skills
editObjectives and skills for this lesson include:
- Send and receive JSON data using AJAX
Readings
editMultimedia
editExamples
editActivities
editComplete 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
editAdditional 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- 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- Server-Side Scripting
- GeeksforGeeks: Difference Between JSON and AJAX
- Happy Coding: AJAX AND JSON
- Medium: Using JSON and AJAX in JavaScript
- MDN Cross-Origin Resource Sharing (CORS)
- TutorialRepublic: JavaScript Ajax
- JSON Tutorial - Learn How to Use JSON with JavaScript
- Webucator how to make get post head requests using AJAX
- List of HTTP status codes
References
edit- ↑ JSON.org
- ↑ https://en.wikipedia.org/wiki/Ajax_(programming)
- ↑ https://en.wikipedia.org/wiki/Ajax_(programming)
- ↑ https://www.tutorialrepublic.com/javascript-tutorial/javascript-json-parsing.php
- ↑ https://www.w3schools.com/js/js_json_intro.asp
- ↑ https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange
- ↑ https://www.w3schools.com/tags/ref_httpmethods.asp
- ↑ https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest