Please see this, more current solution before using a custom parsing function like below, or a 3rd party library.
The a code below works and is still useful in situations where URLSearchParams is not available, but it was written in a time when there was no native solution available
in JavaScript. In modern browsers or Node.js, prefer to use the built-in functionality.
function parseURLParams[url] {
var queryStart = url.indexOf["?"] + 1,
queryEnd = url.indexOf["#"] + 1 || url.length + 1,
query = url.slice[queryStart, queryEnd - 1],
pairs = query.replace[/\+/g, " "].split["&"],
parms = {}, i, n, v, nv;
if [query === url || query === ""] return;
for [i = 0; i < pairs.length; i++] {
nv = pairs[i].split["=", 2];
n = decodeURIComponent[nv[0]];
v = decodeURIComponent[nv[1]];
if [!parms.hasOwnProperty[n]] parms[n] = [];
parms[n].push[nv.length === 2 ? v : null];
}
return parms;
}
Use as follows:
var urlString = "//www.example.com/bar?a=a+a&b%20b=b&c=1&c=2&d#hash";
urlParams = parseURLParams[urlString];
which returns a an object like this:
{
"a" : ["a a"], /* param values are always returned as arrays */
"b b": ["b"], /* param names can have special chars as well */
"c" : ["1", "2"] /* an URL param can occur multiple times! */
"d" : [null] /* parameters without values are set to null */
}
So
parseURLParams["www.mints.com?name=something"]
gives
{name: ["something"]}
EDIT: The original version of this answer used a regex-based approach to URL-parsing. It used a shorter function, but the approach was flawed and I replaced it with a proper parser.
Created: June-06, 2022 In this article, we will learn and use various JavaScript functions useful to load data from URL to our webpage and perform further operations to that data accordingly.
Get Data From URL in JavaScript
There are multiple built-in and external functions in JavaScript to load data by using URL. That URL invokes an API request for a function created on the server-side and returns the data to respond to the request.
We can send a request with a different method type, but in this article, we will discuss the GET method, which is mostly used to get data from the server-side to the client-side. There are multiple ways to make a GET request in JavaScript listed below.
Fetchmethod- XML Http Request
fetch[] Method
The fetch[] method is an advanced way to make a network request in JavaScript, and the latest browsers support it. We can use
the fetch[] method to load data from the server by sending a request to the server without refreshing the webpage.
We can use the async await method with a fetch request to make a promise compactly. In all advanced browsers, Async functions are supported.
Basic syntax:
let requestRsponse = fetch[url, [params]]
async function funcRequest[url]{
await fetch[url]
.then[[response] => {
return response.json[]; // data into json
}]
.then[[data] => {
// Here we can use the response Data
}].
.catch[function[error] {
console.log[error];
}];
}
const url = 'URL of file';
funcRequest[url];
In the above JavaScript source, we have declared async await function funcRequest[],
which will get URL as an argument and used the fetch method with await keyword and defined call back function then[] and translate response into JSON data.
We have used the catch method with console.log[] if any error occurs so that it will display the error in logs. Finally, we saved the URL and passed it to the funcRequest[url];.
XML HTTP Request
It is an API in the form of an object which transfers data between a web browser and web server. XMLHttpRequest
is primarily used in AJAX [Asynchronous JavaScript and XML] programming.
It is not a programming language, but AJAX is a set of web development techniques that use several web technologies to develop asynchronous web applications on the client-side.
Basic syntax with GET:
my_variable = new XMLHttpRequest[]; // object
my_variable.onload = function[] {
// Here, we can use the response Data
}
my_variable.open["GET", "MY_FILE_URL"];
my_variable.send[];
In the above JavaScript source, we have created the XMLHttpRequest object, and then we defined the call-back function during the loading of a request. We have used the open function, passed the
request method type and URL as an argument, and called the send[] method of XMLHttpRequest[].