vanilla js get request code example

Example 1: GET req with js

function httpGet(theUrl) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

Example 2: http request javascript

function httpGetAsync(url, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() { 
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", url, true); // true for asynchronous 
  xmlHttp.send(null);
}

Example 3: get response api using vanilajavascript

fetch('https://jsonplaceholder.typicode.com/postses').then(function (response) {
	// The API call was successful!
	if (response.ok) {
		return response.json();
	} else {
		return Promise.reject(response);
	}
}).then(function (data) {
	// This is the JSON from our response
	console.log(data);
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

Example 4: vanilla javascript api request

var xhr = new XMLHttpRequest();

xhr.onload = function () {

	if (xhr.status >= 200 && xhr.status < 300) {

      const users = JSON.parse(xhr.response);
      const content = document.getElementById("user_content");
    
      for(let i in users){
          let user_name = document.createElement("p");
          let text = document.createTextNode(`User ID ${users[i].id}: ${users[i].title}`);
          user_name.appendChild(text);
          content.appendChild(user_name);
      }
    
	} else {
      console.log('The request failed!');
	}

	console.log('This always runs...');
};

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();