JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Testing AJAX</h1>
<button>Test</button>
<div id="div1"></div>
<div id="div2"></div>

CSS

#div1 {
    border: 1px solid red;
    height: 200px;
    overflow: scroll;
}

#div2 {
    border: 1px solid blue;
    height: 200px;
    overflow: scroll;
}

JavaScript

/* This AJAX method that uses XMLHttpRequest() will not work because of Cross-Origin. */

function ajaxRequest(url) {
  var request = new XMLHttpRequest(); 
  request.open("GET", url); 
  
  request.onload = function() {
    if (request.status == 200) {
      // myFunction is the function that deals with the response
      myFunction(request.responseText); 
    }
  };  
  request.send(null); 
}

//Callback function to deal with XML and JSON, to see the feed in to
// formats.
function myFunction(data){
    alert(typeof data);
    if (typeof data == 'string')
        document.querySelector("#div1").textContent = data;
    else if (typeof data == 'object')
        document.querySelector("#div2").textContent = JSON.stringify(data);
}   

//JSONP function
function jsonpRequest(requestURL) {
	var newScriptElement = document.createElement("script");
	newScriptElement.setAttribute("src", requestURL);
	newScriptElement.setAttribute("id", "jsonp");
	var oldScriptElement = document.getElementById("jsonp");
	var head = document.getElementsByTagName("head")[0];
	if (oldScriptElement == null) {
		head.appendChild(newScriptElement);
	}
	else {
		head.replaceChild(newScriptElement, oldScriptElement);
	}
}

var url = " https://spreadsheets.google.com/feeds/list/1035SQBywbuvWHoVof3G-VI0rapYJslaeYN5tTpNZq2M/od6/public/values";


document.querySelector("button").onclick = function(){
    // See the console to notice error for Same Origin Policy
    ajaxRequest(url);

    // This works, but returns XML
    jsonpRequest(url+"?callback=myFunction");

    // Ask for JSON data instead
    jsonpRequest(url+"?callback=myFunction&alt=json-in-script");
}