Api Call Ajax n seconds GET request - javascript

The API shows live values and changes very frequently, so I am trying to make a call every second and show it to the webpage.
I tried a get request call every N seconds using set_interval() but the values load only once and don't make a call again.
<p id="val"></p>
<p id="val2"></p>
<p id="val3"></p>
<script>
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = myFunction(xhttp);
function myFunction() {
if (xhttp.readyState == 4) {
var xmlDoc = xhttp.responseXML;
var val1= xmlDoc.getElementsByTagName('value_1')[0].childNodes[0];
var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
document.getElementById('val3').innerHTML =
v3.nodeValue;
document.getElementById('val').innerHTML =
v1.nodeValue;
document.getElementById('val2').innerHTML =
v2.nodeValue;
}
}
myFunction();
setInterval(myFunction, (1000));
</script>

var xhttp = new window.XMLHttpRequest();
here xhttp object create once when the script is running And you get proper output for one time. So you need to call this after 1 second.
function myFunction() {
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4) {
var xmlDoc = xhttp.responseXML;
var val1=xmlDoc.getElementsByTagName('value_1'[0].childNodes[0];
var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
document.getElementById('val3').innerHTML=v3.nodeValue;
document.getElementById('val').innerHTML=v1.nodeValue;
document.getElementById('val2').innerHTML=v2.nodeValue;
}
}
setInterval(myFunction,(2000));
Happy coding :)

Try this:
function myFunction() {
function foo(){ alert("Hello"); }
setTimeout(myFunction, 1000);
foo();
}
myFunction();

The code to make the API call is outside the function.
function myFunction()
{
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = myFunctionRes(xhttp);
}
function myFunctionRes()
{
if (xhttp.readyState == 4)
{
var xmlDoc = xhttp.responseXML;
var val1= xmlDoc.getElementsByTagName('value_1')[0].childNodes[0];
var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
document.getElementById('val3').innerHTML =
v3.nodeValue;
document.getElementById('val').innerHTML =
v1.nodeValue;
document.getElementById('val2').innerHTML =
v2.nodeValue;
}
}
setInterval(myFunction, (1000));

Related

selection in a loop freezes my page

i'm a complete newbie when it comes to Js, trying to make some very simple script that takes a string of binary numbers from a txt document on my server using ajax, to then put it in a string var and change the first 0 it finds in a 1, using an if construct inside a loop.
Problem is, when the page tries to execute the if line, it simply freezes. Taking the same if construct out of the loop, the script is executed no problem, so i'm guessing it has something to do with either that or/and some fundamental misunderstanding of how Js scripts works in the first place.
Here is the script:
function loadPos()
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
document.getElementById("demo").innerHTML = this.responseText;
};
xhttp.open("GET", "posizioni.txt", true);
xhttp.send();
}
function takeFirst()
{
var i=0;
var check=false;
var oldPos=[];
loadPos();
oldPos = document.getElementById("demo").innerHTML;
for(i=0;!check||i<10;i++)
{
if(oldPos[i]=="0")
{
oldPos[i]="1";
check=true;
}
}
document.getElementById("demo").innerHTML=oldPos;
}
I don't see any use of loop in it if you can achieve the same without it. Please update your function to the following:
function takeFirst()
{
loadPos();
var oldPos = document.getElementById("demo").innerHTML;
if(oldPos.indexOf("0") > -1){
oldPos = oldPos.replace('0', '1');
}
document.getElementById("demo").innerHTML = oldPos;
}
I think you want for(i=0;!check && i<10;i++).
But there is another way to do this using break;
function loadPos()
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
document.getElementById("demo").innerHTML = this.responseText;
};
xhttp.open("GET", "posizioni.txt", true);
xhttp.send();
}
function takeFirst()
{
var i=0;
var oldPos=[];
loadPos();
oldPos = document.getElementById("demo").innerHTML;
for(i=0;i<10;++i)
{
if(oldPos[i]=="0")
{
oldPos[i]="1";
break;
}
}
document.getElementById("demo").innerHTML=oldPos;
}

Parsing JSON File from XMLHttpRequest

I would like to use data within a JSON file which I get by using the XMLHttpRequest. I already checked that I recieve the file.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
var obj = xhttp.open("GET", "../data/data.json", true);
xhttp.send();
var obj1 = JSON.parse(obj);
a0 = obj1.a0;
This is my JSON file.
{"a0":2, "a1": -2.356, "a2": 4.712}
I can't find the mistake I am doing here. Can you help?
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
var obj=this.responseText;
var obj1 = JSON.parse(obj);
a0 = obj1.a0;
}
};
xhttp.open("GET", "../data/data.json", true);
xhttp.send();
You need to get the response text inside the xhttp response.
onreadystatechange is a callback. That means that it's called asynchonously when the request ended. SO a part of your code is misplaced. Here the correction:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
var obj1 = JSON.parse(this.responseText);
var a0 = obj1.a0;
}
};
xhttp.open("GET", "../data/data.json", true);
xhttp.send();

remove parsed element onclick

I have a parsed xml-file that shows twice the same element. Now I want a button that hides one of them with an onclick-statement. Does anyone know how to do this?
<!DOCTYPE html>
<html>
<body>
<p id="dasa"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "customers.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("syl");
document.getElementById("dasa").innerHTML =
x[0].getAttribute('category') + "<br>";
document.getElementById("dasa").innerHTML +=
x[0].getAttribute('category');
}
function remove() {
x[0].removeAttribute('category');
}
</script>
<button onclick="remove()">remove</button>
</body>
</html>
x is undefined in your remove function.
function remove() {
x[0].removeAttribute('category');
}
You want something like this:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "customers.xml", true);
xhttp.send();
var xmlDoc;
var x;
function myFunction(xml) {
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("syl");
document.getElementById("dasa").innerHTML =
x[0].getAttribute('category') + "<br>";
document.getElementById("dasa").innerHTML +=
x[0].getAttribute('category');
}
function remove() {
x[0].removeAttribute('category');
}
This will make x into a global var set by myfunction.

Cannot read property 'getElementsByTagName'

I want to create script, that returns all data from table(written in XML) and prints it out.
In this moment I have:
<!DOCTYPE html>
<html>
<head>head</head>
<body>
<p id="demo">body</p>
<script>
function loadXMLDoc(){
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("GET", "Czlonkowie.xml", true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
myFunction(xmlHttp);
}
};
xmlHttp.send();
};
function myFunction(xml){
var xmlDoc = xmlHttp.responseXML;
//parser = new DOMParser();
//xmlDoc = parser.parseFromString(xmlDoc,"text/xml"); // Parse string
var IdentyfikatorCzlonka = xmlDoc.getElementsByTagName("IdentyfikatorCzlonka")[0];
var Imie = xmlDoc.getElementsByTagName("Imie")[0];
var Nazwisko = xmlDoc.getElementsByTagName("Nazwisko")[0];
var DataUrodzenia = xmlDoc.getElementsByTagName("DataUrodzenia")[0];
var Ulica = xmlDoc.getElementsByTagName("Ulica")[0];
var Miasto = xmlDoc.getElementsByTagName("Miasto")[0];
var Wojewodztwo = xmlDoc.getElementsByTagName("Wojewodztwo")[0];
var KodPocztowy = xmlDoc.getElementsByTagName("KodPocztowy")[0];
var Email = xmlDoc.getElementsByTagName("Email")[0];
document.getElementById("demo").innerHTML = IdentyfikatorCzlonka;//.nodeValue;
}
</script>
<script>
loadXMLDoc()
</script>
</body>
</html>
And this is DataBase, written in XML:
<Czlonkowie>
<IdentyfikatorCzlonka>1</IdentyfikatorCzlonka>
<Imie>Katarzyna</Imie>
<Nazwisko>Szewczyk</Nazwisko>
<DataUrodzenia>1977-01-09</DataUrodzenia>
<Ulica>ul. Główna</Ulica>
<Miasto>Łódź</Miasto>
<Wojewodztwo>łódzkie</Wojewodztwo>
<KodPocztowy>12-456</KodPocztowy>
<Email>kasia#mail.com</Email>
</Czlonkowie>
<Czlonkowie>
<IdentyfikatorCzlonka>2</IdentyfikatorCzlonka>
<Imie>Bogdan</Imie>
<Nazwisko>Rawecki</Nazwisko>
<DataUrodzenia>1987-01-09</DataUrodzenia>
<Ulica>ul. Mała</Ulica>
<Miasto>Poznań</Miasto>
<Wojewodztwo>wielkopolskie</Wojewodztwo>
<KodPocztowy>34-565</KodPocztowy>
<Email>bogdan#mail.com</Email>
</Czlonkowie>
I got Error:
Cannot read property 'getElementsByTagName' of null
How solve it?
It looks like my post is mostly code, so they want me to add some more detalis.

Javascript interfering with each other

As I know very little about Javascript and Jquery I am hoping to be able to get an answer here.
Here is the code in my <head></head> of my document.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jscolor/jscolor.js"></script>
<script type="text/javascript">
var current_shouts = 0;
function $(eleid) {
return document.getElementById(eleid);
}
function urlencode(u) {
u = u.toString();
var matches = u.match(/[\x90-\xFF]/g);
if (matches) {
for (var mid = 0; mid < matches.length; mid++) {
var char_code = matches[mid].charCodeAt(0);
u = u.replace(matches[mid], '%u00' + (char_code & 0xFF).toString(16).toUpperCase());
}
}
return escape(u).replace(/\+/g, "%2B");
}
function shouts() {
clearTimeout(getshout);
var xmlHttp = (window.XMLHttpRequest) ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open("GET", "../shoutbox/shouts.php?i=" + Math.random());
xmlHttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (parseInt(this.responseText) > current_shouts) {
getshouts();
current_shouts = parseInt(this.responseText);
}
getshout = setTimeout("shouts()", 1000);
}
}
xmlHttp.send(null);
}
function getshouts() {
var xmlHttp = (window.XMLHttpRequest) ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open("GET", "../shoutbox/getshouts.php?i=" + Math.random());
xmlHttp.onreadystatechange = function() {
if (this.readyState == 4) $("shoutbox").innerHTML = this.responseText;
$("shoutbox").scrollTop = $("shoutbox").scrollHeight;
}
xmlHttp.send(null);
}
function push_shout() {
shout();
return false;
}
function shout() {
var xmlHttp = (window.XMLHttpRequest) ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open("POST", "../shoutbox/shout.php");
var data = "user=" + urlencode($("user").value) + "&" + "shout=" + urlencode($("shout").value);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", data.length);
xmlHttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (!this.responseText) $("shout").value = "";
else {
$("console").innerHTML = this.responseText;
setTimeout("$('console').innerHTML = ''", 5000);
}
getshouts();
}
}
xmlHttp.send(data);
return true;
}
var getshout = setTimeout("shouts()", 1000);
</script>
It seems when I put the typed code above everything, it does not work, but the others do, if the code sits as it is shown above it works, but the scripts above it do not work anymore.
I have tried $.noConflict(); but it seems it did nothing, so I am not sure what I am to do here.
Any suggestions?
try something like:
$j = jQuery.noConflict();
then you can use $j to refer to the jQuery object whenever you need to.
I had a problem with jQuery plugins clashing somehow.
I loaded both into the head of the html document, between consecutive separated script tag zones. Then I used:
window.onload = function() {function01(); function02();};
to load each function in an orderly fashion and separately.
It worked for me this time.

Categories