Share
VIDEOS 1 TO 50
AJAX Tutorial - 21 - XMLHttpRequest Object in Detail
AJAX Tutorial - 21 - XMLHttpRequest Object in Detail
Published: 2013/02/04
Channel: thenewboston
9 Advanced JavaScript Fundamentals   Browser Features   XMLHttpRequest
9 Advanced JavaScript Fundamentals Browser Features XMLHttpRequest
Published: 2014/04/04
Channel: JavaScript Tutorial
AJAX Tutorial - 6 - XMLHttpRequest
AJAX Tutorial - 6 - XMLHttpRequest
Published: 2013/01/23
Channel: thenewboston
Understanding XML HTTP Requests Part 1
Understanding XML HTTP Requests Part 1
Published: 2010/02/19
Channel: rjwebzone
9 Advanced JavaScript Fundamentals Browser Features XMLHttpRequest || JavaScript Tutorials
9 Advanced JavaScript Fundamentals Browser Features XMLHttpRequest || JavaScript Tutorials
Published: 2017/05/06
Channel: All the Best
Ajax Tutorial : Post to PHP File XMLHttpRequest Object Return Data Javascript
Ajax Tutorial : Post to PHP File XMLHttpRequest Object Return Data Javascript
Published: 2011/07/16
Channel: Adam Khoury
Технология Ajax (На примере XMLHttpRequest)
Технология Ajax (На примере XMLHttpRequest)
Published: 2015/08/30
Channel: ШКОЛА СОЗДАНИЯ САЙТОВ AILIX
Handling Multiple XMLHttpRequest Requests - Ajax Power - 32
Handling Multiple XMLHttpRequest Requests - Ajax Power - 32
Published: 2008/03/10
Channel: srikanth dhondi
Getting Your Data With the XMLHttpRequest Object - 13
Getting Your Data With the XMLHttpRequest Object - 13
Published: 2008/03/09
Channel: srikanth dhondi
AJAX XMLHttpRequest - Javascript - Using POST Request - DETAILED - Part 1 of 4
AJAX XMLHttpRequest - Javascript - Using POST Request - DETAILED - Part 1 of 4
Published: 2013/03/12
Channel: David Does Programming
XMLHttpRequest
XMLHttpRequest
Published: 2015/02/19
Channel: Andrew Turley
Ajax XMLHttpRequest
Ajax XMLHttpRequest
Published: 2010/02/04
Channel: Muhammad Umer Farooq
Qué es XMLHttpRequest en AJAX y como funciona
Qué es XMLHttpRequest en AJAX y como funciona
Published: 2017/01/28
Channel: EasyWebDevTraining
Curso Ajax - Aula 02 - O Objeto XMLHTTP e o Objeto XMLHTTPRequest
Curso Ajax - Aula 02 - O Objeto XMLHTTP e o Objeto XMLHTTPRequest
Published: 2012/10/25
Channel: EscolaCompleta
Checking the XMLHttpRequest Object
Checking the XMLHttpRequest Object's readyState property 11
Published: 2007/12/18
Channel: srikanth dhondi
Урок 71. JavaScript. Введение в AJAX. XMLHttpRequest
Урок 71. JavaScript. Введение в AJAX. XMLHttpRequest
Published: 2017/07/23
Channel: Камиль Абзалов
La technique pour utiliser XMLHttpRequest avec AJAX
La technique pour utiliser XMLHttpRequest avec AJAX
Published: 2014/05/08
Channel: Développement Facile
Checking the XMLHttpRequest Object
Checking the XMLHttpRequest Object's status property - 12
Published: 2008/03/09
Channel: srikanth dhondi
xml - http request   ajax tutorial 6
xml - http request ajax tutorial 6
Published: 2016/12/14
Channel: Learn with
AJAX Tutorial - 22 - Creating XMLHttpRequest Objects Correctly
AJAX Tutorial - 22 - Creating XMLHttpRequest Objects Correctly
Published: 2013/02/04
Channel: thenewboston
xmlHttpRequest
xmlHttpRequest
Published: 2017/02/12
Channel: nickaaronhebert
21-Aula Ajax Introdução e criar um objeto XMLHttpRequest
21-Aula Ajax Introdução e criar um objeto XMLHttpRequest
Published: 2016/01/13
Channel: Michel Oliveira
AJAX XMLHttpRequest - Javascript - Using POST Request - DETAILED - Part 2 of 4
AJAX XMLHttpRequest - Javascript - Using POST Request - DETAILED - Part 2 of 4
Published: 2013/03/12
Channel: David Does Programming
AJAX Training - Part 4 - Concept of Request Object (XMLHttpRequest Object)
AJAX Training - Part 4 - Concept of Request Object (XMLHttpRequest Object)
Published: 2012/11/10
Channel: HandsonERP
02 Curso AJAX : El objeto XMLHttpRequest
02 Curso AJAX : El objeto XMLHttpRequest
Published: 2014/02/24
Channel: Hackers web Designer
Ajax : Utiliser XMLHttpRequest et faire des requêtes GET et POST
Ajax : Utiliser XMLHttpRequest et faire des requêtes GET et POST
Published: 2017/01/03
Channel: Aziz DAAIF
AJAX XMLHttpRequest - Javascript - Using POST Request - DETAILED - Part 3 of 4
AJAX XMLHttpRequest - Javascript - Using POST Request - DETAILED - Part 3 of 4
Published: 2013/03/12
Channel: David Does Programming
File Upload PROGRESS BAR XMLHttpRequest Upload TUTORIAL
File Upload PROGRESS BAR XMLHttpRequest Upload TUTORIAL
Published: 2016/08/24
Channel: GeekLaunch
Windows 8 Development - Javascript XmlHttpRequest
Windows 8 Development - Javascript XmlHttpRequest
Published: 2012/10/20
Channel: techytube
10 The XMLHTTPRequest Object
10 The XMLHTTPRequest Object
Published: 2015/04/03
Channel: Mihir Patel
AngularJS 23 - XHR - The XML HTTP REQUEST OBJECT
AngularJS 23 - XHR - The XML HTTP REQUEST OBJECT
Published: 2016/11/24
Channel: Tim Baker
AJAX XMLHttpRequest - Javascript - Using POST Request - DETAILED - Part 4 of 4
AJAX XMLHttpRequest - Javascript - Using POST Request - DETAILED - Part 4 of 4
Published: 2013/03/12
Channel: David Does Programming
AJAX Training - Part 5  - Creating Request Object (XMLHttpRequest Object)
AJAX Training - Part 5 - Creating Request Object (XMLHttpRequest Object)
Published: 2012/11/10
Channel: HandsonERP
2.Curso de Ajax - Creando el Objeto XMLHttpRequest
2.Curso de Ajax - Creando el Objeto XMLHttpRequest
Published: 2013/07/20
Channel: luisinfinite
XMLHttpRequests - HTML5 Game Development
XMLHttpRequests - HTML5 Game Development
Published: 2015/02/23
Channel: Udacity
XMLHttpRequest Object for IE and Chrome Browsers
XMLHttpRequest Object for IE and Chrome Browsers
Published: 2016/02/08
Channel: Tarun Sharma
AJAX Tutorial - 2 - XMLHttpRequest Methods & Properties
AJAX Tutorial - 2 - XMLHttpRequest Methods & Properties
Published: 2016/01/15
Channel: Hub4Tech™
AJAX/Javascript 4 - XMLHttpRequest
AJAX/Javascript 4 - XMLHttpRequest
Published: 2015/03/03
Channel: Carmhack - Free Programming
ASP.NET MVC 5 View AJAX 傳送 POST 資料 XMLHttpRequest
ASP.NET MVC 5 View AJAX 傳送 POST 資料 XMLHttpRequest
Published: 2016/11/18
Channel: 衛斯理頻道 (wesley09171)
Solución a XMLHttpRequest error de Google Chrome
Solución a XMLHttpRequest error de Google Chrome
Published: 2017/05/19
Channel: ferminDAM
Ajax XMLHttpRequest security
Ajax XMLHttpRequest security
Published: 2010/02/04
Channel: Muhammad Umer Farooq
Novedad Velneo 7.18: XmlHttpRequest
Novedad Velneo 7.18: XmlHttpRequest
Published: 2015/10/26
Channel: Velneo
Урок 72. JavaScript. XMLHttpRequest. POST запросы и создание простой формы комментариев
Урок 72. JavaScript. XMLHttpRequest. POST запросы и создание простой формы комментариев
Published: 2017/07/29
Channel: Камиль Абзалов
Conecta tu aplicación a web services usando XmlHttpRequest
Conecta tu aplicación a web services usando XmlHttpRequest
Published: 2017/06/01
Channel: Velneo
Understanding XMLHttpRequest Object
Understanding XMLHttpRequest Object
Published: 2017/10/07
Channel: The Universe Of Programming
AJAX XMLHttpRequest to a text file part 2
AJAX XMLHttpRequest to a text file part 2
Published: 2013/08/10
Channel: Learn More
Comment utiliser XMLHttpRequest avance et AJAX - partie 2
Comment utiliser XMLHttpRequest avance et AJAX - partie 2
Published: 2014/05/09
Channel: Développement Facile
Utilizando XMLHTTPRequest en AJAX
Utilizando XMLHTTPRequest en AJAX
Published: 2007/05/10
Channel: jaortizgonzalez
Problems creating an XMLHttpRequest Object -Ajax tutorial 14
Problems creating an XMLHttpRequest Object -Ajax tutorial 14
Published: 2008/03/09
Channel: srikanth dhondi
AJAX XMLHttpRequest to a text file part 1
AJAX XMLHttpRequest to a text file part 1
Published: 2013/08/10
Channel: Learn More
NEXT
GO TO RESULTS [51 .. 100]

WIKIPEDIA ARTICLE

From Wikipedia, the free encyclopedia
Jump to: navigation, search

XMLHttpRequest (XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server. The object is provided by the browser's JavaScript environment. Particularly, retrieval of data from XHR for the purpose of continually modifying a loaded web page is the underlying concept of Ajax design. Despite the name, XHR can be used with protocols other than HTTP and data can be in the form of not only XML,[1] but also JSON,[2] HTML or plain text.[3]

WHATWG maintains an XHR standard as a living document. Ongoing work at the W3C to create a stable specification is based on snapshots of the WHATWG standard.

History[edit]

The concept behind the XMLHttpRequest object was originally created by the developers of Outlook Web Access (by Microsoft) for Microsoft Exchange Server 2000.[4] An interface called IXMLHTTPRequest was developed and implemented into the second version of the MSXML library using this concept.[4][5] The second version of the MSXML library was shipped with Internet Explorer 5.0 in March 1999, allowing access, via ActiveX, to the IXMLHTTPRequest interface using the XMLHTTP wrapper of the MSXML library.[6]

Internet Explorer versions 5 and 6 did not define the XMLHttpRequest object identifier in their scripting languages as the XMLHttpRequest identifier itself was not standard at the time of their releases.[6] Backward compatibility can be achieved through object detection if the XMLHttpRequest identifier does not exist.[7] Microsoft added the XMLHttpRequest object identifier to its scripting languages in Internet Explorer 7.0 released in October 2006.[6]

The Mozilla project developed and implemented an interface called nsIXMLHttpRequest into the Gecko layout engine. This interface was modeled to work as closely to Microsoft's IXMLHTTPRequest interface as possible.[8][9] Mozilla created a wrapper to use this interface through a JavaScript object which they called XMLHttpRequest.[10] The XMLHttpRequest object was accessible as early as Gecko version 0.6 released on December 6 of 2000,[11][12] but it was not completely functional until as late as version 1.0 of Gecko released on June 5, 2002.[11][12] The XMLHttpRequest object became a de facto standard in other major web clients, implemented in Safari 1.2 released in February 2004,[13] Konqueror, Opera 8.0 released in April 2005,[14] and iCab 3.0b352 released in September 2005.[15]

With the advent of cross-browser JavaScript libraries such as jQuery, developers can invoke XMLHttpRequest functionality without coding directly to the API.

Standards[edit]

The World Wide Web Consortium published a Working Draft specification for the XMLHttpRequest object on April 5, 2006, edited by Anne van Kesteren of Opera Software and Dean Jackson of W3C.[16] Its goal is "to document a minimum set of interoperable features based on existing implementations, allowing Web developers to use these features without platform-specific code."

The W3C also published another Working Draft specification for the XMLHttpRequest object, "XMLHttpRequest Level 2", on February 25 of 2008.[17] Level 2 consists of extended functionality to the XMLHttpRequest object, including, but not limited to, progress events, support for cross-site requests, and the handling of byte streams. At the end of 2011, the Level 2 specification was abandoned and absorbed into the original specification.[18]

At the end of 2012, the WHATWG took over development and maintains a living standard using Web IDL.[19] W3C's current drafts are based on snapshots of the WHATWG standard.

HTTP request[edit]

The following sections demonstrate how a request using the XMLHttpRequest object functions within a conforming user agent based on the W3C Working Draft. As the W3C standard for the XMLHttpRequest object is still a draft, user agents may not abide by all the functionings of the W3C definition and any of the following is subject to change. Extreme care should be taken into consideration when scripting with the XMLHttpRequest object across multiple user agents. This article will try to list the inconsistencies between the major user agents.

The open method[edit]

The HTTP and HTTPS requests of the XMLHttpRequest object must be initialized through the open method. This method must be invoked prior to the actual sending of a request to validate and resolve the request method, URL, and URI user information to be used for the request. This method does not assure that the URL exists or the user information is correct. This method can accept up to five parameters, but requires only two, to initialize a request.

open( Method, URL, Asynchronous, UserName, Password )

The first parameter of the method is a text string indicating the HTTP request method to use. The request methods that must be supported by a conforming user agent, defined by the W3C draft for the XMLHttpRequest object, are currently listed as the following.[20]

  • GET (supported by Internet Explorer 7 (and later), Mozilla 1+)
  • POST (supported by IE7 (and later), Mozilla 1 (and later))
  • HEAD (supported by IE7 (and later))
  • PUT
  • DELETE
  • OPTIONS (supported by IE7 (and later))

However, request methods are not limited to the ones listed above. The W3C draft states that a browser may support additional request methods at their own discretion.

The second parameter of the method is another text string, this one indicating the URL of the HTTP request. The W3C recommends that browsers should raise an error and not allow the request of a URL with either a different port or ihost URI component from the current document.[21]

The third parameter, a boolean value indicating whether or not the request will be asynchronous, is not a required parameter by the W3C draft. The default value of this parameter should be assumed to be true by a W3C conforming user agent if it is not provided. An asynchronous request ("true") will not wait on a server response before continuing on with the execution of the current script. It will instead invoke the onreadystatechange event listener of the XMLHttpRequest object throughout the various stages of the request. A synchronous request ("false") however will block execution of the current script until the request has been completed, thus not invoking the onreadystatechange event listener.

The fourth and fifth parameters are the username and password, respectively. These parameters, or just the username, may be provided for authentication and authorization if required by the server for this request.

var xmlhttp;

if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", filepath , false);
    xmlhttp.send(null);
}

The setRequestHeader method[edit]

Upon successful initialization of a request, the setRequestHeader method of the XMLHttpRequest object can be invoked to send HTTP headers with the request.

setRequestHeader( Name, Value )

The first parameter of this method is the text string name of the header. The second parameter is the text string value. This method must be invoked for each header that needs to be sent with the request. Any headers attached here will be removed the next time the open method is invoked in a W3C conforming user agent.

The send method[edit]

To send an HTTP request, the send method of the XMLHttpRequest must be invoked. This method accepts a single parameter containing the content to be sent with the request.

send( Data )

This parameter may be omitted if no content needs to be sent. The W3C draft states that this parameter may be any type available to the scripting language as long as it can be turned into a text string, with the exception of the DOM document object. If a user agent cannot serialise the parameter, then the parameter should be ignored. Firefox 3.0.x and previous versions will however throw an exception if send is called without an argument.[22]

If the parameter is a DOM document object, a user agent should assure the document is turned into well-formed XML using the encoding indicated by the inputEncoding property of the document object. If the Content-Type request header was not added through setRequestHeader yet, it should automatically be added by a conforming user agent as "application/xml;charset=charset," where charset is the encoding used to encode the document.

If the user agent is configured to use a proxy server, then the XMLHttpRequest object will modify the request appropriately so as to connect to the proxy instead of the origin server, and send Proxy-Authorization headers as configured.

The onreadystatechange event listener[edit]

If the open method of the XMLHttpRequest object was invoked with the third parameter set to true for an asynchronous request, the onreadystatechange event listener will be automatically invoked for each of the following actions that change the readyState property of the XMLHttpRequest object.

State changes work like this:

  • After the open method has been invoked successfully, the readyState property of the XMLHttpRequest object should be assigned a value of 1 (OPENED).
  • After the send method has been invoked and the HTTP response headers have been received, the readyState property of the XMLHttpRequest object should be assigned a value of 2 (HEADERS_RECEIVED).
  • Once the HTTP response content begins to load, the readyState property of the XMLHttpRequest object should be assigned a value of 3 (LOADING).
  • Once the HTTP response content has finished loading, the readyState property of the XMLHttpRequest object should be assigned a value of 4 (DONE).

The listener will only respond to state changes which occur after the listener is defined. To detect states 1 and 2, the listener must be defined before the open method is invoked. The open method must be invoked before the send method is invoked.

var request = new XMLHttpRequest();
request.onreadystatechange = function () {
    var DONE = this.DONE || 4;
    if (this.readyState === DONE){
        alert(this.readyState);
    }
};
request.open('GET', 'somepage.xml', true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');  // Tells server that this call is made for ajax purposes.
                                                                 // Most libraries like jQuery/Prototype/Dojo do this
request.send(null);  // No data needs to be sent along with the request.

The abort method[edit]

This method aborts the request if the readyState of the XMLHttpRequest object has not yet become 4.[23] The abort method ensures that the callback handler does not get invoked during an asynchronous request.

abort( )

Some AJAX libraries use the abort method to cancel potential duplicate or out-of-order requests.[24]

The HTTP response[edit]

After a successful and completed call to the send method of the XMLHttpRequest, if the server response was well-formed XML and the Content-Type header sent by the server is understood by the user agent as an Internet media type for XML, the responseXML property of the XMLHttpRequest object will contain a DOM document object. Another property, responseText will contain the response of the server in plain text by a conforming user agent, regardless of whether or not it was understood as XML.

Cross-domain requests[edit]

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. Cross-origin XMLHttpRequest is specified in W3C's XMLHttpRequest Level 2 specification.[25] Internet Explorer did not implement CORS until version 10. The two previous versions (8 and 9) offered similar functionality through the XDomainRequest API. CORS is now supported by all modern browsers (desktop and mobile).[26]

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.[27] The other model detects when one of the non-simple features are requested and sends a pre-flight request[28] to the server to negotiate the feature.

See also[edit]

References[edit]

  1. ^ "The responseXML attribute of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-07-14. 
  2. ^ "Response entity body of XMLHttpRequest, W3C Editor's Draft". W3.org. 2012-02-06. Retrieved 2012-02-05. 
  3. ^ "The responseText attribute of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-07-14. 
  4. ^ a b "Article on the history of XMLHTTP by an original developer". Alexhopmann.com. 2007-01-31. Retrieved 2009-07-14. 
  5. ^ "Specification of the IXMLHTTPRequest interface from the Microsoft Developer Network". Msdn.microsoft.com. Retrieved 2009-07-14. 
  6. ^ a b c Dutta, Sunava (2006-01-23). "Native XMLHTTPRequest object". IEBlog. Microsoft. Retrieved 2006-11-30. 
  7. ^ "Ajax Reference (XMLHttpRequest object)". JavaScript Kit. 2008-07-22. Retrieved 2009-07-14. 
  8. ^ "Specification of the nsIXMLHttpRequest interface from the Mozilla Developer Center". Developer.mozilla.org. 2008-05-16. Retrieved 2009-07-14. 
  9. ^ "Specification of the nsIJSXMLHttpRequest interface from the Mozilla Developer Center". Developer.mozilla.org. 2009-05-03. Retrieved 2009-07-14. 
  10. ^ "Specification of the XMLHttpRequest object from the Mozilla Developer Center". Developer.mozilla.org. 2009-05-03. Retrieved 2009-07-14. 
  11. ^ a b "Version history for the Mozilla Application Suite". Mozilla.org. Retrieved 2009-07-14. 
  12. ^ a b "Downloadable, archived releases for the Mozilla browser". Archive.mozilla.org. Retrieved 2009-07-14. 
  13. ^ "Archived news from Mozillazine stating the release date of Safari 1.2". Weblogs.mozillazine.org. Retrieved 2009-07-14. 
  14. ^ "Press release stating the release date of Opera 8.0 from the Opera website". Opera.com. 2005-04-19. Retrieved 2009-07-14. 
  15. ^ Soft-Info.org. "Detailed browser information stating the release date of iCab 3.0b352 from". Soft-Info.com. Retrieved 2009-07-14. 
  16. ^ "Specification of the XMLHttpRequest object from the Level 1 W3C Working Draft released on April 5th, 2006". W3.org. Retrieved 2009-07-14. 
  17. ^ "Specification of the XMLHttpRequest object from the Level 2 W3C Working Draft released on February 25th, 2008". W3.org. Retrieved 2009-07-14. 
  18. ^ "XMLHttpRequest Editor's Draft 5 December 2011". w3.org. Retrieved 5 December 2011. 
  19. ^ https://xhr.spec.whatwg.org/
  20. ^ "Dependencies of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-07-14. 
  21. ^ "The "open" method of the XMLHttpRequest object explained by the W3C Working Draft". W3.org. Retrieved 2009-10-13. 
  22. ^ Test-Driven JavaScript Development, Christian Johansen, ADDISON-WESLEY, 2010, p. 270
  23. ^ "XMLHttpRequest - Document Object Model (DOM)". Mozilla. Retrieved 2013-04-05. 
  24. ^ "In-Order AJAX Handling". Antradar Software. 2012-03-10. Retrieved 2013-04-20. 
  25. ^ "XMLHttpRequest Level 2". Retrieved 2013-11-14. 
  26. ^ "Can I use Cross-Origin Resource Sharing?". Retrieved 2013-11-14. 
  27. ^ "XDomainRequest - Restrictions, Limitations and Workarounds". Retrieved 2013-11-14. 
  28. ^ "7.1.5 Cross-Origin Request with Preflight". Retrieved 2014-04-25. 

External links[edit]

Disclaimer

None of the audio/visual content is hosted on this site. All media is embedded from other sites such as GoogleVideo, Wikipedia, YouTube etc. Therefore, this site has no control over the copyright issues of the streaming media.

All issues concerning copyright violations should be aimed at the sites hosting the material. This site does not host any of the streaming media and the owner has not uploaded any of the material to the video hosting servers. Anyone can find the same content on Google Video or YouTube by themselves.

The owner of this site cannot know which documentaries are in public domain, which has been uploaded to e.g. YouTube by the owner and which has been uploaded without permission. The copyright owner must contact the source if he wants his material off the Internet completely.

Powered by YouTube
Wikipedia content is licensed under the GFDL and (CC) license