XHR

Download xhr.js (666 bytes)

It is a little to add in XMLHttpRequest "library". Native XMLHttpRequest is as simple as can be, most "enhancement" is just blackboxing the obvious.

What XHR does:

it shortens XMLHttpRequest to XHR :-)
it wraps XMLHttpRequest into Promise
it can build encoded request string from JSON

Syntax

Promise XHR(string server[, object|string? get[, object|string? post[, fn? Pfn[, fn? Efn]]]])

server URL of the server requested by HTTP(S)
get data sent in URL
post data sent in HTTP body
Pfn(int loaded, int total, bool upload) if provided, it is called during the data transfer
- loaded number of bytes sent so far
- total total number of bytes to send
- upload true for upload phase (the request), false for download (the response)
XMLHttpRequest Efn(XMLHttpRequest X) if provided, can enhance the XMLHttpRequest object before send
object return the returned object in .then method receives an object with attributes
- string response the HTTP body of the response
- array headers the HTTP headers of the response

<input type="number" id="number1" value="1" autocomplete="off"> <button id="btn1">Get number in English</button> <output id="out1">using GET method</output> <script src="src/xhr.js"></script> <script> btn1.onclick = _=> XHR('https://janturon.cz/number.php', {value: number1.value}) .then(data => out1.innerHTML = data.response); </script>

<input type="number" id="number2" value="1" autocomplete="off"> <button id="btn2">Get number in English</button> <output id="out2">using POST method</output> <script> btn2.onclick = _=> XHR('https://janturon.cz/number.php', null, {value: number2.value}) .then(data => out2.innerHTML = data.response); </script>