ajax:make_an_ajax_request_using_xmlhttprequest

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
ajax:make_an_ajax_request_using_xmlhttprequest [2016/07/04 13:01] – [The same-origin policy] peterajax:make_an_ajax_request_using_xmlhttprequest [2020/07/15 09:30] (current) – external edit 127.0.0.1
Line 1: Line 1:
 ====== AJAX - Make an AJAX request using XMLHttpRequest ====== ====== AJAX - Make an AJAX request using XMLHttpRequest ======
- 
-===== Objective ===== 
  
 To fetch the content of a URI using an **XMLHttpRequest** object in JavaScript. To fetch the content of a URI using an **XMLHttpRequest** object in JavaScript.
Line 94: Line 92:
 Response types allowed by the XMLHttpRequest specification are: Response types allowed by the XMLHttpRequest specification are:
  
-^responseType^ decoded^ parsed^ response^ +^responseType^decoded^parsed^response^ 
-|arraybuffer no| no| ArrayBuffer| +|arraybuffer|no|no|ArrayBuffer| 
-|blob| no| no| Blob| +|blob|no|no|Blob| 
-|document| yes| as HTML or XML Document| +|document|yes|as HTML or XML|Document| 
-|json| yes| as JSON (varies)| +|json|yes|as JSON|(varies)| 
-|text| yes| no| DOMString|+|text|yes|no|DOMString|
  
 The default value (which is the empty string) has similar behaviour to text, but with some additional rules for determining the character set of XML documents. The default value (which is the empty string) has similar behaviour to text, but with some additional rules for determining the character set of XML documents.
Line 108: Line 106:
 Because the HTTP request occurs asynchronously, you will normally want to be notified when it has finished.  The most portable way to do this is by means of the onreadystatechange event handler.  This refers to the readyState attribute of the XMLHttpRequest object, which can take the following values: Because the HTTP request occurs asynchronously, you will normally want to be notified when it has finished.  The most portable way to do this is by means of the onreadystatechange event handler.  This refers to the readyState attribute of the XMLHttpRequest object, which can take the following values:
  
-|0| UNSENT| The object has been constructed.| +|0|UNSENT|The object has been constructed.| 
-|1| OPENED| The open method has been successfully called.| +|1|OPENED|The open method has been successfully called.| 
-|2| HEADERS_RECEIVED| Reception of response headers is complete.| +|2|HEADERS_RECEIVED|Reception of response headers is complete.| 
-|3| LOADING| Reception of response body is in progress.| +|3|LOADING|Reception of response body is in progress.| 
-|4| DONE| Reception of response has either completed or failed.|+|4|DONE|Reception of response has either completed or failed.|
  
 Of these, the state most likely to be of interest is DONE. Since it does not by itself distinguish between success and failure, it is then necessary to check the HTTP status code.  This can be found in the status attribute.  Values in the range 200 to 299 indicate that the request was successful: Of these, the state most likely to be of interest is DONE. Since it does not by itself distinguish between success and failure, it is then necessary to check the HTTP status code.  This can be found in the status attribute.  Values in the range 200 to 299 indicate that the request was successful:
Line 309: Line 307:
 jQuery provides several methods for performing HTTP requests, the most generic being jQuery.ajax which has broadly similar functionality to a raw XMLHttpRequest object.  There are also a number of shorthand methods providing more specialised operations: jQuery provides several methods for performing HTTP requests, the most generic being jQuery.ajax which has broadly similar functionality to a raw XMLHttpRequest object.  There are also a number of shorthand methods providing more specialised operations:
  
-|jQuery.get| method = 'GET'+|jQuery.get|method = 'GET'
-|jQuery.post| method = 'POST'+|jQuery.post|method = 'POST'
-|jQuery.getJSON| method = 'GET'; dataType = 'json'+|jQuery.getJSON|method = 'GET'; dataType = 'json'
-|jQuery.getScript| method = 'GET'; dataType = 'script'; execute script| +|jQuery.getScript|method = 'GET'; dataType = 'script'; execute script| 
-.load| method = 'GET'; dataType = 'html'; load HTML into element|+|.load|method = 'GET'; dataType = 'html'; load HTML into element|
  
 For example, given an empty <div> element with an id of inbox: For example, given an empty <div> element with an id of inbox:
Line 356: Line 354:
  
  
-===== Further Reading =====+===== References =====
  
   * XMLHttpRequest Level 1, W3C Working Draft [http://www.w3.org/TR/XMLHttpRequest/   * XMLHttpRequest Level 1, W3C Working Draft [http://www.w3.org/TR/XMLHttpRequest/
ajax/make_an_ajax_request_using_xmlhttprequest.1467637276.txt.gz · Last modified: 2020/07/15 09:30 (external edit)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki