ajax:make_an_ajax_request_using_xmlhttprequest
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
ajax:make_an_ajax_request_using_xmlhttprequest [2016/07/04 13:01] – [The same-origin policy] peter | ajax: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, | Because the HTTP request occurs asynchronously, | ||
- | |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. | 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. | ||
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. | jQuery provides several methods for performing HTTP requests, the most generic being jQuery.ajax which has broadly similar functionality to a raw XMLHttpRequest object. | ||
- | |jQuery.get| method = ' | + | |jQuery.get|method = ' |
- | |jQuery.post| method = ' | + | |jQuery.post|method = ' |
- | |jQuery.getJSON| method = ' | + | |jQuery.getJSON|method = ' |
- | |jQuery.getScript| method = ' | + | |jQuery.getScript|method = ' |
- | .load| method = ' | + | |.load|method = ' |
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:// | * XMLHttpRequest Level 1, W3C Working Draft [http:// |
ajax/make_an_ajax_request_using_xmlhttprequest.1467637276.txt.gz · Last modified: 2020/07/15 09:30 (external edit)