AJAX and JSON - Revision history

Todd: /* Javascript Fetch API */

2026-08-12T14:18:58Z

Javascript Fetch API

2026-07-06T18:26:48Z

Javascript Fetch API

2023-06-09T13:55:36Z

Browser Support

2023-06-09T13:54:33Z

Loading Data from an XML File for Display in HTML

2023-06-09T13:53:13Z

XML

2022-06-06T14:35:29Z

The XMLHttpRequest Object

2021-03-03T13:52:28Z

Javascript Fetch API

2021-03-03T13:49:48Z

Javascript Fetch API

2021-03-03T13:49:30Z

Javascript Fetch API

2019-10-20T03:17:07Z

Logging In a User

← Older revision		Revision as of 14:18, 12 August 2026
Line 17:		Line 17:

	Javascript has a [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Fetch API] that you should be using. The Fetch API uses a concept in JavaScript known as a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise] to represent the completion or failure of an asynchronous operation.		Javascript has a [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Fetch API] that you should be using. The Fetch API uses a concept in JavaScript known as a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise] to represent the completion or failure of an asynchronous operation.
−
−	~~An interesting discussion of XMLHttpRequest vs Fetch can be found [https://web.archive.org/web/20220421025435/https://blog.openreplay.com/ajax-battle-xmlhttprequest-vs-the-fetch-api here].~~

	=== Sending Data ===		=== Sending Data ===

@@ Line 18: / Line 18: @@
 Javascript has a [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Fetch API] that you should be using. The Fetch API uses a concept in JavaScript known as a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise] to represent the completion or failure of an asynchronous operation.
-An interesting discussion of XMLHttpRequest vs Fetch can be found [https://blog.openreplay.com/ajax-battle-xmlhttprequest-vs-the-fetch-api here].
+An interesting discussion of XMLHttpRequest vs Fetch can be found [https://web.archive.org/web/20220421025435/https://blog.openreplay.com/ajax-battle-xmlhttprequest-vs-the-fetch-api here].
 === Sending Data ===

@@ Line 70: / Line 70: @@
 Many examples that you find when Googling for "AJAX" use the '''onreadystatechange''' property of the XMLHttpRequest instance to react on the completion of the request, rather than using an event listener.  This approach works, and it is required for comprehensive browser support, but it is no longer recommended for future use in modern web applications.  The implementation of XMLHttpRequest documented here (so-called "XHR level 2") works in the following browsers:
-* Firefox 3.5+ (Jun 2009)
+* Firefox
-* Safari 5+ (Jun 2010)
+* Safari
-* Chrome 7+ (Sep 2010)
+* Chrome
-* Opera 12+ (May 2012)
+* Opera
 === Response Formats ===

@@ Line 244: / Line 244: @@
 <?xml version="1.0" standalone="yes" ?>
 <note>
-   <date year="2013" month="02" day="14" />
+   <date year="2023" month="02" day="14" />
    <to>Sally</to>
    <message>Happy Valentine's Day!</message>
@@ Line 310: / Line 310: @@
 <source lang="html4strict">
 <div id="note">
-   <strong>2013-02-14</strong>
+   <strong>2023-02-14</strong>
    <p>Dear Sally,<br /><br />Happy Valentine's Day!<br /><br />Love, Your Secret Admirer</p>
 </div>

@@ Line 88: / Line 88: @@
 <?xml version="1.0" standalone="yes" ?>
 <note>
-   <date year="2013" month="02" day="14" />
+   <date year="2023" month="02" day="14" />
    <to>Sally</to>
    <message>Happy Valentine's Day!</message>

← Older revision		Revision as of 14:35, 6 June 2022
Line 18:		Line 18:
	Javascript has a [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Fetch API] that you should be using. The Fetch API uses a concept in JavaScript known as a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise] to represent the completion or failure of an asynchronous operation.		Javascript has a [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Fetch API] that you should be using. The Fetch API uses a concept in JavaScript known as a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise] to represent the completion or failure of an asynchronous operation.

		+	An interesting discussion of XMLHttpRequest vs Fetch can be found [https://blog.openreplay.com/ajax-battle-xmlhttprequest-vs-the-fetch-api here].
	=== Sending Data ===		=== Sending Data ===

@@ Line 14: / Line 14: @@
 === Javascript Fetch API ===
-While creating an xhr object works, it's messy and hard to cleanly organize javascript's asynchronous nature.
+While creating an xhr object works, it's messy and hard to cleanly organize JavaScript's asynchronous nature.
 Javascript has a [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Fetch API] that you should be using.

@@ Line 227: / Line 227: @@
          })
          .then(response => response.json())
-         .then(data => console.log(data.success ? "You've been logged in!" : `You were not logged in ${data.message}`));
+         .then(data => console.log(data.success ? "You've been logged in!" : `You were not logged in ${data.message}`))
+}