Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

De-XHRify Games and Glossary #31162

Merged
merged 1 commit into from
Dec 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions files/en-us/games/introduction/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,8 @@ As a game developer, whether you're an individual or a large game studio, you wa

For the tech folks, let's dig into the APIs the Web brings to the table that cater to game developers. Here's a thorough list to give you a taste of what the Web can do for you:

- [Fetch API](/en-US/docs/Web/API/Fetch_API)
- : Send and receive any kind of data you want from a Web server like downloading new game levels and artwork to transmitting non-real-time game status information back and forth.
- [Full Screen API](/en-US/docs/Web/API/Fullscreen_API)
- : This simple API lets your game take over the entire screen, thereby immersing the player in action.
- [Gamepad API](/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)
Expand Down Expand Up @@ -123,5 +125,3 @@ For the tech folks, let's dig into the APIs the Web brings to the table that cat
- : The WebSocket API lets you connect your app or site to a server to transmit data back and forth in real-time. Perfect for multiplayer gaming action, chat services, and so forth.
- [Web Workers](/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
- : Workers give you the ability to spawn background threads running their own JavaScript code, to take advantage of modern, multicore processors.
- [XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest) and [File API](/en-US/docs/Web/API/File_and_Directory_Entries_API)
- : The combination of XMLHttpRequest and the File API lets you send and receive any kind of data you want (don't let the "XML" throw you!) from a Web server. This is a great way to do anything from downloading new game levels and artwork to transmitting non-real-time game status information back and forth.
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,8 @@ page-type: guide
</tbody>
</table>

- [Fetch API](/en-US/docs/Web/API/Fetch_API)
- : Send and receive any kind of data you want from a Web server like downloading new game levels and artwork to transmitting non-real-time game status information back and forth.
- [Full Screen API](/en-US/docs/Web/API/Fullscreen_API)
- : Full screen gameplay.
- [Gamepad API](/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)
Expand Down Expand Up @@ -113,5 +115,3 @@ page-type: guide
- : Connect your app or site to a server to transmit data back and forth in real-time. Perfect for multiplayer gaming action, chat services, and so forth.
- [Web Workers](/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
- : Spawn background threads running their own JavaScript code for multicore processors.
- [XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest) and [File API](/en-US/docs/Web/API/File_API)
- : Send and receive any kind of data you want from a Web server like downloading new game levels and artwork to transmitting non-real-time game status information back and forth.
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ Let's look at some Web Audio API techniques for dynamically adjusting music from

### Loading your tracks

With the Web Audio API you can load separate tracks and loops individually using {{domxref("XMLHttpRequest")}} or the [Fetch API](/en-US/docs/Web/API/Fetch_API), which means you can load them synchronously or in parallel. Loading synchronously might mean parts of your music are ready earlier and you can start playing them while others load.
With the Web Audio API you can load separate tracks and loops individually using the [Fetch API](/en-US/docs/Web/API/Fetch_API) or {{domxref("XMLHttpRequest")}}, which means you can load them synchronously or in parallel. Loading synchronously might mean parts of your music are ready earlier and you can start playing them while others load.

Either way you may want to synchronize tracks or loops. The Web Audio API contains the notion of an internal clock that starts ticking the moment you create an audio context. You'll need to take account of the time between creating an audio context and when the first audio track starts playing. Recording this offset and querying the playing track's current time gives you enough information to synchronize separate pieces of audio.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/forbidden_header_name/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ page-type: glossary-definition

A **forbidden header name** is the name of any [HTTP header](/en-US/docs/Web/HTTP/Headers) that cannot be modified programmatically; specifically, an HTTP **request** header name (in contrast with a {{Glossary("Forbidden response header name")}}).

Modifying such headers is forbidden because the user agent retains full control over them. Names starting with `Sec-` are reserved for creating new headers safe from {{glossary("API","APIs")}} using the [fetch algorithm](https://fetch.spec.whatwg.org/#concept-fetch) that grant developers control over headers, such as {{domxref("XMLHttpRequest")}}.
Modifying such headers is forbidden because the user agent retains full control over them. Names starting with `Sec-` are reserved for creating new headers safe from {{glossary("API","APIs")}} that grant developers control over headers, such as {{domxref("fetch()")}}.

Forbidden header names start with `Proxy-` or `Sec-`, or are one of the following names:

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/mvc/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ You might however also want to just update the view to display the data in a dif

As a web developer, this pattern will probably be quite familiar even if you've never consciously used it before. Your data model is probably contained in some kind of database (be it a traditional server-side database like MySQL, or a client-side solution such as [IndexedDB \[en-US\]](/en-US/docs/Web/API/IndexedDB_API).) Your app's controlling code is probably written in HTML/JavaScript, and your user interface is probably written using HTML/CSS/whatever else you like. This sounds very much like MVC, but MVC makes these components follow a more rigid pattern.

In the early days of the Web, MVC architecture was mostly implemented on the server-side, with the client requesting updates via forms or links, and receiving updated views back to display in the browser. However, these days, more of the logic is pushed to the client with the advent of client-side data stores, and XMLHttpRequest allowing partial page updates as required.
In the early days of the Web, MVC architecture was mostly implemented on the server-side, with the client requesting updates via forms or links, and receiving updated views back to display in the browser. However, these days, more of the logic is pushed to the client with the advent of client-side data stores, and the [Fetch API](/en-US/docs/Web/API/Fetch_API) enabling partial page updates as required.

Web frameworks such as [AngularJS](https://en.wikipedia.org/wiki/AngularJS) and [Ember.js](https://en.wikipedia.org/wiki/Ember.js) all implement an MVC architecture, albeit in slightly different ways.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/spa/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ page-type: glossary-definition

{{GlossarySidebar}}

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as {{domxref("XMLHttpRequest")}} and [Fetch](/en-US/docs/Web/API/Fetch_API) when different content is to be shown.
An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as [Fetch](/en-US/docs/Web/API/Fetch_API) when different content is to be shown.

This therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience, with some tradeoff disadvantages such as SEO, more effort required to maintain state, implement navigation, and do meaningful performance monitoring.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/synchronous/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@ Many programming commands are also synchronous — for example when you type in
## See also

- {{glossary("Asynchronous")}}
- [Synchronous and asynchronous requests](/en-US/docs/Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests) using the [XMLHttpRequest()](/en-US/docs/Web/API/XMLHttpRequest) {{glossary("API")}}
- [Asynchronous JavaScript](/en-US/docs/Learn/JavaScript/Asynchronous)
7 changes: 3 additions & 4 deletions files/en-us/glossary/xmlhttprequest/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@ page-type: glossary-definition

{{domxref("XMLHttpRequest")}} (XHR) is a {{Glossary("JavaScript")}} {{Glossary("API")}} to create {{Glossary("AJAX")}} requests. Its methods provide the ability to send network requests between the {{Glossary("browser")}} and a {{Glossary("server")}}.

The [Fetch API](/en-US/docs/Web/API/Fetch_API) is the modern replacement for XMLHttpRequest.

## See also

- [XMLHttpRequest](https://en.wikipedia.org/wiki/XMLHttpRequest) on Wikipedia
- [Synchronous vs. Asynchronous Communications](https://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/)
- The {{domxref("XMLHttpRequest")}} object
- The [documentation on MDN about how to use XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest)
- The [XMLHttpRequest API](/en-US/docs/Web/API/XMLHttpRequest_API) documentation.