@megagames.me/fetchfile

Fetchfile.js

The simplest way to use Ajax for beginners.

About

We all love Ajax, right? But, JavaScript just messed it up. You have to use the most annoying syntax ever: XMLHttpRequest, or XHR. It is an absolute pain to write it out. But, I decided to create a library that can fit XHR into one line of JS code. It is called Fetchfile.js.

Comparison

XHR

//XMLHttpRequest
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
		document.getElementById("ajaxoutput").innerHTML = this.responseText;
	}
};
xhttp.open("GET", "path/to/file.txt", true);
xhttp.send();

Fetchfile.js

Fetchfile("path/to/file.txt", false, "text", "#ajaxoutput");

They do the exact same thing, but one is by far the easiest to write.

Installation

npm

To install Fetchfile.js on npm, run the command npm i @megagames-me/Fetchfile.js.

Important: Fetchfile.js requires jQuery 3.4.1 as a dependency.

CDN

To import Fetchfile.js into your HTML project, use this code.

<script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/megagames-me/Fetchfile.js@1.2.2/fetchfile.min.js"></script>

---

Note: If you want to, you can use the beta version here:

<script type="text/javascript" src="//gitcdn.link/cdn/megagames-me/Fetchfile.js/f6c5f716e3d84d9b3ef230a67322ed827509a76e/beta/fetchfile.js"></script>

This is not recommended, as it uses the latest beta version. This, however, is NOT a release! It is just the file straight from GitHub raw. This may change, so this is not recommended for production usage.

---

**Important:** Do NOT use jQuery Slim. jQuery Slim does not contain the `$.ajax` function, which Fetchfile.js requires.

Parameters

Fetchfile(filepath, secure, outputType, whitespaceType, returnId, saveto, callback);

Attribute	Description	Allowed Content	Optionalilty
filepath	Specifies what file to fetch content from.	"/path/to/file.txt"	Required
secure	Specifies if Ajax call should send data specifing it is from an Ajax call. Important: A secure file must be PHP. If secured file is accessed without the data, the PHP file fetched MUST echo "FETCH_ERRORID_NOT_SECURE_FETCH". You can call secure Ajax calls on insecure files.	[true, false]	Required
outputType	Specifies how the result of the Ajax call is processed. False is used when you do not want to return to DOM. Important: Only the outputTypes "text" and "html" require a returnId. The others just run like normal CSS and JavaScript.	[false, "text", "html", "css", "js", "json"]	Required
whitespaceType	Specifies how the newlines are processed. "pre" uses the \n character, "br" uses <br />, false removes all newlines. Important: whitespaceType does not matter when outputType is not "text" or "html".	["pre", "br", false]	Required
returnId	Specifies where the Ajax result is outputted on the DOM. False specifies to not put the output on the DOM. Important: You can hover over the validJQuerySelector text on the right to see some examples.	[false, validJQuerySelector]	Required
saveto	Specifies the variable to hold the Ajax result in. False specifies to not use a variable. If the variable doesn't exist yet, it will create one. Important: If the content of the variable contains quotes ("), please add a backslash before them (\) to be able to save it to a variable. Be careful, you cannot call the variable during the beginning, only in an event listener or the callback function as it is asynchronous.	[false, variableName]	Optional
callback	Specifies the callback function to be called after the Ajax call. The parameter result can be used in the callback function as the Ajax result.	[false, function]	Optional