XMLHttpRequest

Last updated

XMLHttpRequest (XHR) is an API in the form of a JavaScript object whose methods transmit HTTP requests from a web browser to a web server. [1] The methods allow a browser-based application to send requests to the server after page loading is complete, and receive information back. [2] XMLHttpRequest is a component of Ajax programming. Prior to Ajax, hyperlinks and form submissions were the primary mechanisms for interacting with the server, often replacing the current page with another one. [2]

Contents

History

The concept behind XMLHttpRequest was conceived in 2000 by the developers of Microsoft Outlook. [3] The concept was then implemented within the Internet Explorer 5 browser (2001). However, the original syntax did not use the XMLHttpRequest identifier. Instead, the developers used the identifiers ActiveXObject("Msxml2.XMLHTTP") and ActiveXObject("Microsoft.XMLHTTP"). [4] As of Internet Explorer 7 (2006), all browsers support the XMLHttpRequest identifier. [4]

The XMLHttpRequest identifier is now the de facto standard in all the major browsers, including Mozilla's Gecko layout engine (2002), [5] Safari 1.2 (2004) and Opera 8.0 (2005). [6]

Standards

The World Wide Web Consortium (W3C) published a Working Draft specification for the XMLHttpRequest object on April 5, 2006. [7] [a] On February 25, 2008, the W3C published the Working Draft Level 2 specification. [8] Level 2 added methods to monitor event progress, allow cross-site requests, and handle byte streams. At the end of 2011, the Level 2 specification was absorbed into the original specification. [9]

At the end of 2012, the WHATWG took over development and maintains a living document using Web IDL. [10]

Usage

Generally, sending a request with XMLHttpRequest has several programming steps. [11]

  1. Create an XMLHttpRequest object by calling a constructor: 
    constrequest=newXMLHttpRequest();
  2. Call the "open" method to specify the request type, identify the relevant resource, and select synchronous or asynchronous operation: 
    request.open('GET','/api/message',true/* asynchronous */);
  3. For an asynchronous request, set a listener that will be notified when the request's state changes: 
    request.onreadystatechange=listener;
  4. Initiate the request by calling the "send" method: 
    request.send();
  5. Respond to state changes in the event listener. If the server sends response data, by default it is captured in the "responseText" property. When the object stops processing the response, it changes to state 4, the "done" state. 
    functionlistener(){// Check whether the request is done and successful.if(request.readyState==4&&request.status==200)console.log(request.responseText);// Display the text.}

Aside from these general steps, XMLHttpRequest has many options to control how the request is sent and how the response is processed. Custom header fields can be added to the request to indicate how the server should fulfill it, [12] and data can be uploaded to the server by providing it in the "send" call. [13] The response can be parsed from the JSON format into a readily usable JavaScript object, or processed gradually as it arrives rather than waiting for the entire text. [14] The request can be aborted prematurely [15] or set to fail if not completed in a specified amount of time. [16]

Cross-domain requests

In the early development of the World Wide Web, it was found possible to breach users' security by the use of JavaScript to exchange information from one web site with that from another less reputable one. All modern browsers therefore implement a same origin policy that prevents many such attacks, such as cross-site scripting. XMLHttpRequest data is subject to this security policy, but sometimes web developers want to intentionally circumvent its restrictions. This is sometimes due to the legitimate use of subdomains as, for example, making an XMLHttpRequest from a page created by foo.example.com for information from bar.example.com will normally fail.

Various alternatives exist to circumvent this security feature, including using JSONP, Cross-Origin Resource Sharing (CORS) or alternatives with plugins such as Flash or Silverlight (both now deprecated). Cross-origin XMLHttpRequest is specified in W3C's XMLHttpRequest Level 2 specification. [17] Internet Explorer did not implement CORS until version 10. The two previous versions (8 and 9) offered similar functionality through the XDomainRequest (XDR) API. CORS is now supported by all modern browsers (desktop and mobile). [18]

The CORS protocol has several restrictions, with two models of support. The simple model does not allow setting custom request headers and omits cookies. Further, only the HEAD, GET and POST request methods are supported, and POST only allows the following MIME types: "text/plain", "application/x-www-urlencoded" and "multipart/form-data". Only "text/plain" was initially supported. [19] The other model detects when one of the non-simple features are requested and sends a pre-flight request [20] to the server to negotiate the feature.

Fetch alternative

Program flow using asynchronous XHR callbacks can present difficulty with readability and maintenance. ECMAScript 2015 (ES6) added the promise construct to simplify asynchronous logic. Browsers have since implemented the alternative fetch() interface to achieve the same functionality as XHR using promises instead of callbacks.

Fetch is also standardized by WHATWG. [21]

Example

fetch('/api/message').then(response=>{if(response.status!=200)thrownewError('Request failed');returnresponse.text();}).then(text=>{console.log(text);});

See also

Related Research Articles

While Hypertext Markup Language (HTML) has been in use since 1991, HTML 4.0 from December 1997 was the first standardized version where international characters were given reasonably complete treatment. When an HTML document includes special characters outside the range of seven-bit ASCII, two goals are worth considering: the information's integrity, and universal browser display.

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript, a programming language.

<span class="mw-page-title-main">World Wide Web</span> Linked hypertext system on the Internet

The World Wide Web is an information system that enables content sharing over the Internet through user-friendly ways meant to appeal to users beyond IT specialists and hobbyists. It allows documents and other web resources to be accessed over the Internet according to specific rules of the Hypertext Transfer Protocol (HTTP).

Ajax is a set of web development techniques that uses various web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly utilize JSON instead of XML.

<span class="mw-page-title-main">Dynamic web page</span> Type of web page

A dynamic web page is a web page constructed at runtime, as opposed to a static web page, delivered as it is stored. A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and including the setting up of more client-side processing. A client-side dynamic web page processes the web page using JavaScript running in the browser as it loads. JavaScript can interact with the page via Document Object Model (DOM), to query page state and modify it. Even though a web page can be dynamic on the client-side, it can still be hosted on a static hosting service such as GitHub Pages or Amazon S3 as long as there is not any server-side code included.

Push technology, also known as server Push, refers to a communication method, where the communication is initiated by a server rather than a client. This approach is different from the "pull" method where the communication is initiated by a client.

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap. HTML5 Canvas also helps in making 2D games.

Comet is a web application model in which a long-held HTTPS request allows a web server to push data to a browser, without the browser explicitly requesting it. Comet is an umbrella term, encompassing multiple techniques for achieving this interaction. All these methods rely on features included by default in browsers, such as JavaScript, rather than on non-default plugins. The Comet approach differs from the original model of the web, in which a browser requests a complete web page at a time.

<span class="mw-page-title-main">HTTP referer</span> HTTP header field

In HTTP, "Referer" is an optional HTTP header field that identifies the address of the web page from which the resource has been requested. By checking the referrer, the server providing the new web page can see where the request originated.

<span class="mw-page-title-main">HTML5</span> Fifth and previous version of HyperText Markup Language

HTML5 is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is now a retired World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.

The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested in evolving HTML and related technologies. The WHATWG was founded by individuals from Apple Inc., the Mozilla Foundation and Opera Software, leading Web browser vendors in 2004.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages which mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

Web storage, sometimes known as DOM storage, is a standard JavaScript API provided by web browsers. It enables websites to store persistent data on users' devices similar to cookies, but with much larger capacity and no information sent in HTTP headers. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Web Storage is standardized by the World Wide Web Consortium (W3C) and WHATWG, and is supported by all major browsers.

<span class="mw-page-title-main">WebSocket</span> Computer network protocol

WebSocket is a computer communications protocol, providing a simultaneous two-way communication channel over a single Transmission Control Protocol (TCP) connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011. The current specification allowing web applications to use this protocol is known as WebSockets. It is a living standard maintained by the WHATWG and a successor to The WebSocket API from the W3C.

Cross-origin resource sharing (CORS) is a mechanism to safely bypass the same-origin policy, that is, it allows a web page to access restricted resources from a server on a domain different than the domain that served the web page.

The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as the Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.

<span class="mw-page-title-main">Anne van Kesteren</span> Dutch open source contributor

Anne van Kesteren is an open web standards author and open source contributor. He has written and edits several web standards specifications including Fullscreen API, XMLHttpRequest, and URL. Formerly worked on standards issues as a software engineer at Opera Software, he started working at Mozilla on 2013-02-04. He was Mozilla’s representative on the WHATWG Steering Group. He was an elected participant in the W3C Technical Architecture Group (TAG) from 2013 to 2014.

<span class="mw-page-title-main">David Baron (computer scientist)</span> American computer scientist

David Baron is an American computer scientist, web browser engineer, open web standards author, technology speaker, and open source contributor. He has written and edits several CSS web standards specifications including CSS Color Module Level 3, CSS Conditional Rules, and several working drafts. He started working on Mozilla in 1998, and was employed by Mozilla in 2003 to help develop and evolve the Gecko rendering engine, eventually as a Distinguished Engineer in 2013. He was Mozilla’s representative on the WHATWG Steering Group from 2017-2020. He has served on the W3C Technical Architecture Group (TAG) continuously since being elected in 2015 and re-elected subsequently, most recently in 2020. In 2021 he joined Google to work on Google Chrome.

References

  1. ↑ Mahemoff, Michael (2006). Ajax Design Patterns. O'Reilly. p. 92. ISBN   978-0-596-10180-0. Javascript lacks a portable mechanism for general network communication[.] ... But thanks to the XMLHttpRequest object, ... Javascript code can make HTTP calls back to its originating server[.]
  2. 1 2 Mahemoff, Michael (2006). Ajax Design Patterns. O'Reilly. p. 92. ISBN   978-0-596-10180-0.
  3. ↑ "Article on the history of XMLHTTP by an original developer". Alexhopmann.com. 2007-01-31. Archived from the original on 2009-01-30. Retrieved 2009-07-14. The reality is that the client architecture of GMail appears to follow the rough design of the Exchange 2000 implementation of Outlook Web Access for IE5 and later which shipped way back in 2000.
  4. 1 2 Mahemoff, Michael (2006). Ajax Design Patterns. O'Reilly. p. 93. ISBN   978-0-596-10180-0.
  5. ↑ "Archived news from Mozillazine stating the release date of Safari 1.2". Weblogs.mozillazine.org. Archived from the original on 2009-06-02. Retrieved 2009-07-14.
  6. ↑ "Press release stating the release date of Opera 8.0 from the Opera website". Opera.com. 2005-04-19. Retrieved 2009-07-14.
  7. ↑ "Specification of the XMLHttpRequest object from the Level 1 W3C Working Draft released on April 5th, 2006". W3.org. Retrieved 2009-07-14.
  8. ↑ "Specification of the XMLHttpRequest object from the Level 2 W3C Working Draft released on February 25th, 2008". W3.org. Retrieved 2009-07-14.
  9. ↑ "XMLHttpRequest Editor's Draft 5 December 2011". w3.org. Retrieved 5 December 2011.
  10. ↑ van Kesteren, Anne (February 19, 2024). XMLHttpRequest Living Standard (Report). Retrieved 2024-04-09.
  11. ↑ Holdener, Anthony T. III (2008). Ajax: The Definitive Guide. pp. 70–71, 76.
  12. ↑ van Kesteren 2024, 3.5.2.
  13. ↑ van Kesteren 2024, 3.5.6.
  14. ↑ van Kesteren 2024, 3.6.9.
  15. ↑ van Kesteren 2024, 3.5.7.
  16. ↑ van Kesteren 2024, 3.5.3.
  17. ↑ "XMLHttpRequest Level 2" . Retrieved 2013-11-14.
  18. ↑ "Can I use Cross-Origin Resource Sharing?" . Retrieved 2013-11-14.
  19. ↑ "XDomainRequest - Restrictions, Limitations and Workarounds" . Retrieved 2013-11-14.
  20. ↑ "7.1.5 Cross-Origin Request with Preflight" . Retrieved 2014-04-25.
  21. ↑ "Fetch Standard".

Notes

  1. ↑ The standard was edited by Anne van Kesteren of Opera Software and Dean Jackson of W3C.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.