AJAX

AJAX = Asynchronous JavaScript And XML.

An event occurs in a web page (the page is loaded, a button is clicked)
An XMLHttpRequest object is created by JavaScript
The XMLHttpRequest object sends a request to a web server
The server processes the request
The server sends a response back to the web page
The response is read by JavaScript
Proper action (like page update) is performed by JavaScript

XMLHttpRequest

XMLHttpRequest() - The constructor initializes an XMLHttpRequest. It must be called before any other method calls.

Metode

XMLHttpRequest.abort()

Aborts the request if it has already been sent

XMLHttpRequest.getAllResponseHeaders()

Returns all the response headers, separated by CRLF, as a strin, or null if no response has been received

XMLHttpRequest.getResponseHeader()

Returns the string containing the text of the specified header or null if either the response has not yet been received or the header doesn't exist in the response

XMLHttpRequest.open()

Initializes a request

XMLHttpRequest.overrideMimeType()

Overrides the MIME type returned by the server

XMLHttpRequest.send()

Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent

XMLHttpRequest.setRequestHeader()

Sets the value of an HTTP request header. You must call setRequestHeader() after open(), but before send()

Properties

XMLHttpRequest.readyState

element.value = XMLHttpRequest.readyState;

Returns an unsigned short, the state of the request. Warning

Value	State	Description
0	UNSENT	The `XMLHttpRequest` client has been created, but `open()` method hasn't been called yet
1	OPENED	`open()` method has been invoked. During this state, the request headers can be set using the `setRequestHeader()` method and the `send()` method can be called which will initiate the fetch
2	HEADERS_RECEIVED	`send()` has been called and the response headers and status have been received
3	LOADING	Response's body is being received. If `responseType` is text or empty string, `responseText` will have the partial text response as it loads
4	DONE	The fetch operation is complete. This could mean that either the data transfer has been completed successfully or failed

If there is no $echo in PHP script, it will skip state 3 (LOADING)

The state names are different in versions of Internet Explorer earlier than 11. Instead of UNSENT, OPENED, HEADERS_RECEIVED, LOADING and DONE, the names READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) and READYSTATE_COMPLETE (4) are used

State values:

            var xhr = new XMLHttpRequest();
            console.info(xhr.readyState);
            xhr.onreadystatechange = function() {
              console.info(xhr.readyState);
            }
            xhr.open("GET", "php.php", true);
            xhr.send();

            <?php
              echo 'string';
            ?>

State names:

            var xhr = new XMLHttpRequest();
            state();
            xhr.onreadystatechange = function () {
              state();
            }
            xhr.open("GET", "php.php", true);
            xhr.send();
            function state() {
             switch (xhr.readyState) {
              case XMLHttpRequest.UNSENT:
               console.info("UNSENT");
               break;
              case XMLHttpRequest.OPENED:
               console.info("OPENED");
               break;
              case XMLHttpRequest.HEADERS_RECEIVED:
               console.info("HEADERS_RECEIVED");
               break;
              case XMLHttpRequest.LOADING:
               console.info("LOADING");
               break;
              case XMLHttpRequest.DONE:
               console.info("DONE");
               break;
             }
            }

            <?php
              echo 'string';
            ?>

Postpone steps:

            var xhr = new XMLHttpRequest();
            console.info(xhr.readyState+" - new XMLHttpRequest()");
            setTimeout(opXHR, 3000); // Postpone 3 seconds
            function opXHR() {
             xhr.open("POST", "php.php", true);
             console.info(xhr.readyState+" - xhr.open()");
             setTimeout(heaXHR, 3000); // Postpone 3 seconds
             function heaXHR() {
              xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
              console.info(xhr.readyState+" - xhr.setRequestHeader()");
              setTimeout(seXHR, 3000); // Postpone 3 seconds
              function seXHR() {
               xhr.send();
               console.info(xhr.readyState+" - xhr.send()");
              }
             }
            }
            xhr.onreadystatechange = function() {
             console.info(xhr.readyState+" - xhr.onreadystatechange");
            }
            xhr.onloadstart = function () {
             console.info(xhr.readyState+" - xhr.onloadstart");
            }
            xhr.onloadend = function () {
             console.info(xhr.readyState+" - xhr.onloadend");
            }
            xhr.onload = function () {
             console.info(xhr.readyState+" - xhr.onload");
            }
            xhr.onprogress = function () {
             console.info(xhr.readyState+" - xhr.onprogress");
             console.info("odgovor: "+xhr.responseText);
            }

            <?php
             sleep(3); // Postpone 3 seconds
              echo 'string';
            ?>

xhr.readyState === xhr.DONE

            var xhr = new XMLHttpRequest();
            xhr.open("GET", "php.php", true);
            xhr.onreadystatechange = function() {
             if (xhr.readyState === xhr.DONE) {
              console.info("DONE");
             }
            }
            xhr.send();

            <?php
              echo 'string';
            ?>

xhr.readyState === 4

            var xhr = new XMLHttpRequest();
            xhr.open("GET", "php.php", true);
            xhr.onreadystatechange = function() {
             if (xhr.readyState === 4) {
              console.info("DONE");
             }
            }
            xhr.send();

            <?php
              echo 'string';
            ?>

XMLHttpRequest.response

element.value = XMLHttpRequest.response;

Returns an ArrayBuffer, Blob, Document, JavaScript object or a DOMString, depending on the value of XMLHttpRequest.responseType, that contains the response entity body. Warning

An appropriate object based on the value of responseType. You may attempt to request the data be provided in a specific format by setting the value of responseType after calling open() to initialize the request but before calling send() to send the request to the server.

The value is null if the request is not yet complete or was unsuccessful, with the exception that when reading text data using a responseType of text or the empty string "", the response can contain the response so far while the request is still in the LOADING (3) readyState.

Value	Explanation
""	An empty `responseType` string is treated the same as text, the default type
arraybuffer	The `response` is a JavaScript ArrayBuffer containing binary data
blob	The `response` is a Blob object containing the binary data
document	The response is an HTML document or XML document, as appropriate based on the MIME type of the received data
json	The response is a JavaScript object created by parsing the contents of received data as JSON
text	The response is a text in a DOMString object

            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
             console.info(xhr.response);
            }
            xhr.open("GET", "php.php", true);
            xhr.send();

            <?php
             echo 'string';
            ?>

Without response type:

            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
             console.info(xhr.response);
            }
            xhr.open("GET", "xml.xml", true);
            xhr.send();

            <?xml version="1.0" encoding="UTF-8"?>
            <CATALOG>
             <CD>
              <TITLE>Empire Burlesque</TITLE>
              <ARTIST>Bob Dylan</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>Columbia</COMPANY>
              <PRICE>10.90</PRICE>
              <YEAR>1985</YEAR>
             </CD>
             <CD>
              <TITLE>Greatest Hits</TITLE>
              <ARTIST>Dolly Parton</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>RCA</COMPANY>
              <PRICE>9.90</PRICE>
              <YEAR>1982</YEAR>
             </CD>
             <CD>
              <TITLE>Still got the blues</TITLE>
              <ARTIST>Gary Moore</ARTIST>
              <COUNTRY>UK</COUNTRY>
              <COMPANY>Virgin records</COMPANY>
              <PRICE>10.20</PRICE>
              <YEAR>1990</YEAR>
             </CD>
            </CATALOG>

With response type:

            var xhr = new XMLHttpRequest();
            xhr.responseType = "document";
            xhr.onload = function() {
             console.info(xhr.response);
            }
            xhr.open("GET", "xml.xml", true);
            xhr.send();

            <?xml version="1.0" encoding="UTF-8"?>
            <CATALOG>
             <CD>
              <TITLE>Empire Burlesque</TITLE>
              <ARTIST>Bob Dylan</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>Columbia</COMPANY>
              <PRICE>10.90</PRICE>
              <YEAR>1985</YEAR>
             </CD>
             <CD>
              <TITLE>Greatest Hits</TITLE>
              <ARTIST>Dolly Parton</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>RCA</COMPANY>
              <PRICE>9.90</PRICE>
              <YEAR>1982</YEAR>
             </CD>
             <CD>
              <TITLE>Still got the blues</TITLE>
              <ARTIST>Gary Moore</ARTIST>
              <COUNTRY>UK</COUNTRY>
              <COMPANY>Virgin records</COMPANY>
              <PRICE>10.20</PRICE>
              <YEAR>1990</YEAR>
             </CD>
            </CATALOG>

With response type and getting data:

            var result = document.getElementById("result");
            var xhr = new XMLHttpRequest();
            xhr.responseType = "document";
            xhr.onload = function() {
             var i;
             var table = "";
             var xmlDoc = xhr.response;
             var x = xmlDoc.getElementsByTagName("CD");
             for (i = 0; i <x.length; i++) {
              table += "<tr><td>" +
              x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
              "</td></tr>";
             }
             result.innerHTML = "<table>"+table+"</table>";
            }
            xhr.open("GET", "xml.xml", true);
            xhr.send();

            <?xml version="1.0" encoding="UTF-8"?>
            <CATALOG>
             <CD>
              <TITLE>Empire Burlesque</TITLE>
              <ARTIST>Bob Dylan</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>Columbia</COMPANY>
              <PRICE>10.90</PRICE>
              <YEAR>1985</YEAR>
             </CD>
             <CD>
              <TITLE>Greatest Hits</TITLE>
              <ARTIST>Dolly Parton</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>RCA</COMPANY>
              <PRICE>9.90</PRICE>
              <YEAR>1982</YEAR>
             </CD>
             <CD>
              <TITLE>Still got the blues</TITLE>
              <ARTIST>Gary Moore</ARTIST>
              <COUNTRY>UK</COUNTRY>
              <COMPANY>Virgin records</COMPANY>
              <PRICE>10.20</PRICE>
              <YEAR>1990</YEAR>
             </CD>
            </CATALOG>

Blob:

            var result = document.getElementById("result");
            var xhr = new XMLHttpRequest();
            xhr.responseType = "blob";
            xhr.onload = function() {
             var blob = new Blob([xhr.response], {type: 'image/png'});
             var image = new Image();
             image.src = URL.createObjectURL(blob);
             result.appendChild(image);
            }
            xhr.open("GET", "data/coffee.png", true);
            xhr.send();

XMLHttpRequest.responseText

element.value = XMLHttpRequest.responseText;

Returns a DOMString that contains the response to the request as text, or null if the request was unsuccessful or has not yet been sent. Warning

While handling an asynchronous request, the value of responseText always has the current content received from the server, even if it's incomplete because the data has not been completely received yet.

If XMLHttpRequest.responseType is not set to either the empty string "" or text, response will be in error condition. Since the responseText property is only valid for text content, any other value is an error condition.

The entire content has been received when the value of readyState becomes DONE (4), and status becomes 200 ("OK").
For more about this go to XMLHttpRequest.readyState / Postpone steps

            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
             console.info(xhr.responseText);
            }
            xhr.open("GET", "php.php", true);
            xhr.send();

            <?php
             echo 'string';
            ?>

XMLHttpRequest.responseType

XMLHttpRequest.responseType = value;

The responseType property is an enumerated string value specifying the type of data contained in the response. It also lets the author change the response type. If an empty string "" is set as the value of responseType, the default value of text is used.

When setting responseType to a particular value, the author should make sure that the server is actually sending a response compatible with that format. If the server returns data that is not compatible with the responseType that was set, the value of response will be null.

Value	Explanation
""	An empty `responseType` string is treated the same as text, the default type
arraybuffer	The `response` is a JavaScript ArrayBuffer containing binary data
blob	The `response` is a Blob object containing the binary data
document	The response is an HTML document or XML document, as appropriate based on the MIME type of the received data
json	The response is a JavaScript object created by parsing the contents of received data as JSON
text	The response is a text in a DOMString object

With response type:

            var result = document.getElementById("result");
            var xhr = new XMLHttpRequest();
            xhr.responseType = "document";
            xhr.onload = function() {
             result.innerHTML = xhr.response;
            }
            xhr.open("GET", "xml.xml", true);
            xhr.send();

            <?xml version="1.0" encoding="UTF-8"?>
            <CATALOG>
             <CD>
              <TITLE>Empire Burlesque</TITLE>
              <ARTIST>Bob Dylan</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>Columbia</COMPANY>
              <PRICE>10.90</PRICE>
              <YEAR>1985</YEAR>
             </CD>
             <CD>
              <TITLE>Greatest Hits</TITLE>
              <ARTIST>Dolly Parton</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>RCA</COMPANY>
              <PRICE>9.90</PRICE>
              <YEAR>1982</YEAR>
             </CD>
             <CD>
              <TITLE>Still got the blues</TITLE>
              <ARTIST>Gary Moore</ARTIST>
              <COUNTRY>UK</COUNTRY>
              <COMPANY>Virgin records</COMPANY>
              <PRICE>10.20</PRICE>
              <YEAR>1990</YEAR>
             </CD>
            </CATALOG>

With response type and getting data:

            var result = document.getElementById("result");
            var xhr = new XMLHttpRequest();
            xhr.responseType = "document";
            xhr.onload = function() {
             var i;
             var table = "";
             var xmlDoc = xhr.response;
             var x = xmlDoc.getElementsByTagName("CD");
             for (i = 0; i <x.length; i++) {
              table += "<tr><td>" +
              x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
              "</td></tr>";
             }
             result.innerHTML = "<table>"+table+"</table>";
            }
            xhr.open("GET", "xml.xml", true);
            xhr.send();

            <?xml version="1.0" encoding="UTF-8"?>
            <CATALOG>
             <CD>
              <TITLE>Empire Burlesque</TITLE>
              <ARTIST>Bob Dylan</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>Columbia</COMPANY>
              <PRICE>10.90</PRICE>
              <YEAR>1985</YEAR>
             </CD>
             <CD>
              <TITLE>Greatest Hits</TITLE>
              <ARTIST>Dolly Parton</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>RCA</COMPANY>
              <PRICE>9.90</PRICE>
              <YEAR>1982</YEAR>
             </CD>
             <CD>
              <TITLE>Still got the blues</TITLE>
              <ARTIST>Gary Moore</ARTIST>
              <COUNTRY>UK</COUNTRY>
              <COMPANY>Virgin records</COMPANY>
              <PRICE>10.20</PRICE>
              <YEAR>1990</YEAR>
             </CD>
            </CATALOG>

Blob:

            var result = document.getElementById("result");
            var xhr = new XMLHttpRequest();
            xhr.responseType = "blob";
            xhr.onload = function() {
             var blob = new Blob([xhr.response], {type: 'image/png'});
             var image = new Image();
             image.src = URL.createObjectURL(blob);
             result.appendChild(image);
            }
            xhr.open("GET", "data/coffee.png", true);
            xhr.send();

With a wrong response type:

            var xhr = new XMLHttpRequest();
            xhr.responseType = "document";
            xhr.onload = function() {
             try {
              console.info(xhr.responseText);
             } catch (e) {
              console.error(e.name + ': ' + e.message)
             }
            }
            xhr.open("GET", "php.php", true);
            xhr.send();

XMLHttpRequest.responseURL

XMLHttpRequest.responseURL = URL;

Returns the serialized URL of the response or the empty string if the URL is null. Warning

            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
             console.info(xhr.responseURL);
            }
            xhr.open("GET", "php.php", true);
            xhr.send();

XMLHttpRequest.responseXML

element.value = XMLHttpRequest.responseXML;

The XMLHttpRequest.responseXML property returns a document containing the HTML or XML retrieved by the request or null if the request was unsuccessful, has not yet been sent, or if the data can't be parsed as XML or HTML.

The name responseXML is an artifact of this property's history; it works for both HTML and XML

Usually, the response is parsed as text/xml. If the responseType is set to document and the request was made asynchronously, instead the response is parsed as text/html. responseXML is null for any other types of data, as well as for data: URLs.

If the server doesn't specify the Content-Type as text/xml or application/xml, you can use XMLHttpRequest.overrideMimeType() to parse it as XML anyway.

If the responseType isn't either document or an empty string "", response is in error state.

JavaScript:

            var div = document.getElementById("div");
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
             var i;
             var table = "";
             var xmlDoc = xhr.responseXML;
             var x = xmlDoc.getElementsByTagName("CD");
             for (i = 0; i <x.length; i++) {
              table += "<tr><td>" +
              x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
              "</td></tr>";
             }
             div.innerHTML = "<table>"+table+"</table>";
            }
            xhr.open("GET", "data/ajax.xml", true);
            xhr.send();

XML:

            <?xml version="1.0" encoding="UTF-8"?>
            <CATALOG>
             <CD>
              <TITLE>Empire Burlesque</TITLE>
              <ARTIST>Bob Dylan</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>Columbia</COMPANY>
              <PRICE>10.90</PRICE>
              <YEAR>1985</YEAR>
             </CD>
             <CD>
              <TITLE>Greatest Hits</TITLE>
              <ARTIST>Dolly Parton</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>RCA</COMPANY>
              <PRICE>9.90</PRICE>
              <YEAR>1982</YEAR>
             </CD>
             <CD>
              <TITLE>Still got the blues</TITLE>
              <ARTIST>Gary Moore</ARTIST>
              <COUNTRY>UK</COUNTRY>
              <COMPANY>Virgin records</COMPANY>
              <PRICE>10.20</PRICE>
              <YEAR>1990</YEAR>
             </CD>
            </CATALOG>

Text file with overrided MIME type:

JavaScript:

            var div = document.getElementById("div");
            var xhr = new XMLHttpRequest();
            xhr.overrideMimeType('text/xml');
            xhr.onload = function() {
             var i;
             var table = "";
             var xmlDoc = xhr.responseXML;
             var x = xmlDoc.getElementsByTagName("CD");
             for (i = 0; i <x.length; i++) {
              table += "<tr><td>" +
              x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
              "</td></tr>";
             }
             div.innerHTML = "<table>"+table+"</table>";
            }
            xhr.open("GET", "data/ajax.txt", true);
            xhr.send();

XML:

            <CATALOG>
             <CD>
              <TITLE>Empire Burlesque</TITLE>
              <ARTIST>Bob Dylan</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>Columbia</COMPANY>
              <PRICE>10.90</PRICE>
              <YEAR>1985</YEAR>
             </CD>
             <CD>
              <TITLE>Greatest Hits</TITLE>
              <ARTIST>Dolly Parton</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>RCA</COMPANY>
              <PRICE>9.90</PRICE>
              <YEAR>1982</YEAR>
             </CD>
             <CD>
              <TITLE>Still got the blues</TITLE>
              <ARTIST>Gary Moore</ARTIST>
              <COUNTRY>UK</COUNTRY>
              <COMPANY>Virgin records</COMPANY>
              <PRICE>10.20</PRICE>
              <YEAR>1990</YEAR>
             </CD>
            </CATALOG>

Text file without overrided MIME type:

JavaScript:

            var div = document.getElementById("div");
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
             var i;
             var table = "";
             var xmlDoc = xhr.responseXML;
             var x = xmlDoc.getElementsByTagName("CD");
             for (i = 0; i <x.length; i++) {
              table += "<tr><td>" +
              x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
              "</td><td>" +
              x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
              "</td></tr>";
             }
             div.innerHTML = "<table>"+table+"</table>";
            }
            xhr.open("GET", "data/ajax.txt", true);
            xhr.send();

XML:

            <CATALOG>
             <CD>
              <TITLE>Empire Burlesque</TITLE>
              <ARTIST>Bob Dylan</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>Columbia</COMPANY>
              <PRICE>10.90</PRICE>
              <YEAR>1985</YEAR>
             </CD>
             <CD>
              <TITLE>Greatest Hits</TITLE>
              <ARTIST>Dolly Parton</ARTIST>
              <COUNTRY>USA</COUNTRY>
              <COMPANY>RCA</COMPANY>
              <PRICE>9.90</PRICE>
              <YEAR>1982</YEAR>
             </CD>
             <CD>
              <TITLE>Still got the blues</TITLE>
              <ARTIST>Gary Moore</ARTIST>
              <COUNTRY>UK</COUNTRY>
              <COMPANY>Virgin records</COMPANY>
              <PRICE>10.20</PRICE>
              <YEAR>1990</YEAR>
             </CD>
            </CATALOG>

Log:

XMLHttpRequest.status

The XMLHttpRequest.status property returns the numerical HTTP status code of the response.

Before the request completes, the value of status is 0. Browsers also report a status of 0 in case of XMLHttpRequest errors.

1xx Informational responses

100 Continue: The server has received the request headers and the client should proceed to send the request body (in the case of a request for which a body needs to be sent; for example, a POST request). Sending a large request body to a server after a request has been rejected for inappropriate headers would be inefficient. To have a server check the request's headers, a client must send Expect: 100-continue as a header in its initial request and receive a 100 Continue status code in response before sending the body. If the client receives an error code such as 403 (Forbidden) or 405 (Method Not Allowed) then it shouldn't send the request's body. The response 417 Expectation Failed indicates that the request should be repeated without the Expect header as it indicates that the server doesn't support expectations (this is the case, for example, of HTTP/1.0 servers).^[4]
101 Switching Protocols: The requester has asked the server to switch protocols and the server has agreed to do so.^[5]
102 Processing (WebDAV; RFC 2518): A WebDAV request may contain many sub-requests involving file operations, requiring a long time to complete the request. This code indicates that the server has received and is processing the request, but no response is available yet.^[6] This prevents the client from timing out and assuming the request was lost.
103 Early Hints (RFC 8297): Used to return some response headers before final HTTP message.^[7]

2xx Successful responses

200 OK: Standard response for successful HTTP requests. The actual response will depend on the request method used. In a GET request, the response will contain an entity corresponding to the requested resource. In a POST request, the response will contain an entity describing or containing the result of the action.^[8]
201 Created: The request has been fulfilled, resulting in the creation of a new resource.^[9]
202 Accepted: The request has been accepted for processing, but the processing has not been completed. The request might or might not be eventually acted upon, and may be disallowed when processing occurs.^[10]
203 Non-Authoritative Information (since HTTP/1.1): The server is a transforming proxy (e.g. a Web accelerator) that received a 200 OK from its origin, but is returning a modified version of the origin's response.^[11]^[12]
204 No Content: The server successfully processed the request, and is not returning any content.^[13]
205 Reset Content: The server successfully processed the request, asks that the requester reset its document view, and is not returning any content. ^[14]
206 Partial Content (RFC 7233): The server is delivering only part of the resource (byte serving) due to a range header sent by the client. The range header is used by HTTP clients to enable resuming of interrupted downloads, or split a download into multiple simultaneous streams.^[15]
207 Multi-Status (WebDAV; RFC 4918): The message body that follows is by default an XML message and can contain a number of separate response codes, depending on how many sub-requests were made.^[16]
208 Already Reported (WebDAV; RFC 5842): The members of a DAV binding have already been enumerated in a preceding part of the (multistatus) response, and are not being included again.
226 IM Used (RFC 3229): The server has fulfilled a request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.^[17]

3xx Redirects

300 Multiple Choices: Indicates multiple options for the resource from which the client may choose (via agent-driven content negotiation). For example, this code could be used to present multiple video format options, to list files with different filename extensions, or to suggest word-sense disambiguation.^[19]
301 Moved Permanently: This and all future requests should be directed to the given URI.^[20]
302 Found (Previously "Moved temporarily"): Tells the client to look at (browse to) another URL. 302 has been superseded by 303 and 307. This is an example of industry practice contradicting the standard. The HTTP/1.0 specification (RFC 1945) required the client to perform a temporary redirect (the original describing phrase was "Moved Temporarily"),^[21] but popular browsers implemented 302 with the functionality of a 303 See Other. Therefore, HTTP/1.1 added status codes 303 and 307 to distinguish between the two behaviours.^[22] However, some Web applications and frameworks use the 302 status code as if it were the 303.^[23]
303 See Other (since HTTP/1.1): The response to the request can be found under another URI using the GET method. When received in response to a POST (or PUT/DELETE), the client should presume that the server has received the data and should issue a new GET request to the given URI.^[24]
304 Not Modified (RFC 7232): Indicates that the resource has not been modified since the version specified by the request headers If-Modified-Since or If-None-Match. In such case, there is no need to retransmit the resource since the client still has a previously-downloaded copy.^[25]
305 Use Proxy (since HTTP/1.1): The requested resource is available only through a proxy, the address for which is provided in the response. For security reasons, many HTTP clients (such as Mozilla Firefox and Internet Explorer) do not obey this status code.^[26]
306 Switch Proxy: No longer used. Originally meant "Subsequent requests should use the specified proxy."^[27]
307 Temporary Redirect (since HTTP/1.1): In this case, the request should be repeated with another URI; however, future requests should still use the original URI. In contrast to how 302 was historically implemented, the request method is not allowed to be changed when reissuing the original request. For example, a POST request should be repeated using another POST request.^[28]
308 Permanent Redirect (RFC 7538): The request and all future requests should be repeated using another URI. 307 and 308 parallel the behaviors of 302 and 301, but do not allow the HTTP method to change. So, for example, submitting a form to a permanently redirected resource may continue smoothly.^[29]

4xx Client errors

400 Bad Request: The server cannot or will not process the request due to an apparent client error (e.g., malformed request syntax, size too large, invalid request message framing, or deceptive request routing).^[31]
401 Unauthorized (RFC 7235): Similar to 403 Forbidden, but specifically for use when authentication is required and has failed or has not yet been provided. The response must include a WWW-Authenticate header field containing a challenge applicable to the requested resource. See Basic access authentication and Digest access authentication.^[32] 401 semantically means "unauthorised",^[33] the user does not have valid authentication credentials for the target resource.; Note: Some sites incorrectly issue HTTP 401 when an IP address is banned from the website (usually the website domain) and that specific address is refused permission to access a website.^{[citation needed]}
402 Payment Required: Reserved for future use. The original intention was that this code might be used as part of some form of digital cash or micropayment scheme, as proposed, for example, by GNU Taler,^[34] but that has not yet happened, and this code is not widely used. Google Developers API uses this status if a particular developer has exceeded the daily limit on requests.^[35] Sipgate uses this code if an account does not have sufficient funds to start a call.^[36] Shopify uses this code when the store has not paid their fees and is temporarily disabled.^[37] Stripe uses this code for failed payments where parameters were correct, for example blocked fraudulent payments.^[38]
403 Forbidden: The request contained valid data and was understood by the server, but the server is refusing action. This may be due to the user not having the necessary permissions for a resource or needing an account of some sort, or attempting a prohibited action (e.g. creating a duplicate record where only one is allowed). This code is also typically used if the request provided authentication by answering the WWW-Authenticate header field challenge, but the server did not accept that authentication. The request should not be repeated.
404 Not Found: The requested resource could not be found but may be available in the future. Subsequent requests by the client are permissible.
405 Method Not Allowed: A request method is not supported for the requested resource; for example, a GET request on a form that requires data to be presented via POST, or a PUT request on a read-only resource.
406 Not Acceptable: The requested resource is capable of generating only content not acceptable according to the Accept headers sent in the request.^[39] See Content negotiation.
407 Proxy Authentication Required (RFC 7235): The client must first authenticate itself with the proxy.^[40]
408 Request Timeout: The server timed out waiting for the request. According to HTTP specifications: "The client did not produce a request within the time that the server was prepared to wait. The client MAY repeat the request without modifications at any later time."^[41]
409 Conflict: Indicates that the request could not be processed because of conflict in the current state of the resource, such as an edit conflict between multiple simultaneous updates.
410 Gone: Indicates that the resource requested is no longer available and will not be available again. This should be used when a resource has been intentionally removed and the resource should be purged. Upon receiving a 410 status code, the client should not request the resource in the future. Clients such as search engines should remove the resource from their indices.^[42] Most use cases do not require clients and search engines to purge the resource, and a "404 Not Found" may be used instead.
411 Length Required: The request did not specify the length of its content, which is required by the requested resource.^[43]
412 Precondition Failed (RFC 7232): The server does not meet one of the preconditions that the requester put on the request header fields.^[44]^[45]
413 Payload Too Large (RFC 7231): The request is larger than the server is willing or able to process. Previously called "Request Entity Too Large".^[46]
414 URI Too Long (RFC 7231): The URI provided was too long for the server to process. Often the result of too much data being encoded as a query-string of a GET request, in which case it should be converted to a POST request.^[47] Called "Request-URI Too Long" previously.^[48]
415 Unsupported Media Type (RFC 7231): The request entity has a media type which the server or resource does not support. For example, the client uploads an image as image/svg+xml, but the server requires that images use a different format.^[49]
416 Range Not Satisfiable (RFC 7233): The client has asked for a portion of the file (byte serving), but the server cannot supply that portion. For example, if the client asked for a part of the file that lies beyond the end of the file.^[50] Called "Requested Range Not Satisfiable" previously.^[51]
417 Expectation Failed: The server cannot meet the requirements of the Expect request-header field.^[52]
418 I'm a teapot (RFC 2324, RFC 7168): This code was defined in 1998 as one of the traditional IETF April Fools' jokes, in RFC 2324, Hyper Text Coffee Pot Control Protocol, and is not expected to be implemented by actual HTTP servers. The RFC specifies this code should be returned by teapots requested to brew coffee.^[53] This HTTP status is used as an Easter egg in some websites, such as Google.com's I'm a teapot easter egg.^[54]^[55]
421 Misdirected Request (RFC 7540): The request was directed at a server that is not able to produce a response^[56] (for example because of connection reuse).^[57]
422 Unprocessable Entity (WebDAV; RFC 4918): The request was well-formed but was unable to be followed due to semantic errors.^[16]
423 Locked (WebDAV; RFC 4918): The resource that is being accessed is locked.^[16]
424 Failed Dependency (WebDAV; RFC 4918): The request failed because it depended on another request and that request failed (e.g., a PROPPATCH).^[16]
425 Too Early (RFC 8470): Indicates that the server is unwilling to risk processing a request that might be replayed.
426 Upgrade Required: The client should switch to a different protocol such as TLS/1.0, given in the Upgrade header field.^[58]
428 Precondition Required (RFC 6585): The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.^[59]
429 Too Many Requests (RFC 6585): The user has sent too many requests in a given amount of time. Intended for use with rate-limiting schemes.^[59]
431 Request Header Fields Too Large (RFC 6585): The server is unwilling to process the request because either an individual header field, or all the header fields collectively, are too large.^[59]
451 Unavailable For Legal Reasons (RFC 7725): A server operator has received a legal demand to deny access to a resource or to a set of resources that includes the requested resource.^[60] The code 451 was chosen as a reference to the novel Fahrenheit 451 (see the Acknowledgements in the RFC).

5xx Server errors

500 Internal Server Error: A generic error message, given when an unexpected condition was encountered and no more specific message is suitable.^[63]
501 Not Implemented: The server either does not recognize the request method, or it lacks the ability to fulfil the request. Usually this implies future availability (e.g., a new feature of a web-service API).^[64]
502 Bad Gateway: The server was acting as a gateway or proxy and received an invalid response from the upstream server.^[65]
503 Service Unavailable: The server cannot handle the request (because it is overloaded or down for maintenance). Generally, this is a temporary state.^[66]
504 Gateway Timeout: The server was acting as a gateway or proxy and did not receive a timely response from the upstream server.^[67]
505 HTTP Version Not Supported: The server does not support the HTTP protocol version used in the request.^[68]
506 Variant Also Negotiates (RFC 2295): Transparent content negotiation for the request results in a circular reference.^[69]
507 Insufficient Storage (WebDAV; RFC 4918): The server is unable to store the representation needed to complete the request.^[16]
508 Loop Detected (WebDAV; RFC 5842): The server detected an infinite loop while processing the request (sent instead of 208 Already Reported).
510 Not Extended (RFC 2774): Further extensions to the request are required for the server to fulfil it.^[70]
511 Network Authentication Required (RFC 6585): The client needs to authenticate to gain network access. Intended for use by intercepting proxies used to control access to the network (e.g., "captive portals" used to require agreement to Terms of Service before granting full Internet access via a Wi-Fi hotspot).^[59]