homepage Welcome to WebmasterWorld Guest from 54.198.148.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Continually receiving data from server
data to come in without user event
Tastatura




msg:3870924
 7:37 pm on Mar 15, 2009 (gmt 0)

Not being "native JS speaker" I think I ran out of options and direction to solve my problem....
I am trying to
1. get data from server
2. display it in a page
3. do 1 and 2 without reloading /refreshing whole page
4. have 1-3 run continuously ,i.e over and over receiving new data while page is viewed without need for user to perform an event (like clicking a button or pressing a key). Something like "streaming" data if you will. I would like to receive data continuously or at least to be fetched once a second

I got 1-3 working using AJAX, but I have to initiate event, either button / mouse click (using onMouseDown for example), or I have to type a letter in a form field (onkeyup). Data is only sent for that event and if I want more data (which I do :) ) I have to keep clicking (which I don't want to do). One of the approaches I tried for solving #4 was to use a function that calls itself, effectively putting it in endless loop, but that didn't really work, perhaps due to my coding (browser hang-up).
Parts of the code I got is below. Note that script output on the server is not predicated to data i send it - it will return same thing if I send it different parameters in query string. Actually, sending nothing in query string is acceptable, I just want server script to run and return data

Server side - bash script echoing some values from serial port (this can be anything, it just needs to output data

control2.cgi :


#!/bin/sh

# serial port of the microcontroller
RPORT="/dev/usb/tts/0"

#I put this in but its not used
#just in case I do want to get value of query string
qs="$QUERY_STRING"

#this is the part that outputs data and date
echo head -1 $RPORT
echo -n "Date: "; date

web page


<html>
<head>
<script type="text/javascript">
var xmlHttpData

function getData(str)
{
if (str.length==0)
{
document.getElementById("dataResponse").innerHTML="";
// str="givemedata";
return;
}

xmlHttpData=GetxmlHttpDataObject();
if (xmlHttpData==null)
{
alert ("Your browser does not support AJAX!");
return;
}

var url="http://10.0.0.40/cgi-bin/control2.cgi";
url=url+"?"+str;
xmlHttpData.onreadystatechange=stateChanged;
xmlHttpData.open("GET",url,true);
xmlHttpData.send(null);
}

function stateChanged()
{
if (xmlHttpData.readyState==4)
{
document.getElementById("dataResponse").innerHTML=xmlHttpData.responseText;
}
}

function GetxmlHttpDataObject()
{
var xmlHttpData=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttpData=new XMLHttpRequest();
}
catch (e)
{

...FUNCTIONALITY FOR OTHER BROWSERS- DELETED HERE TO SAVE SPACE ON WebmasterWorld

return xmlHttpData;
}
</script>
</head>


<body>
<form>
<input type="text" id="ArduData" onkeyup="getData(this.value)">
</form>

<p>Data: <span id="dataResponse"></span></p>
</body>
</html>

so in above code if I type anything in the input box, upon releasing keyboard key I will get response back from the server. What I want is that data always keeps coming without key having to be pressed.
Any help or direction is greatly appreciated

 

Fotiman




msg:3871030
 11:00 pm on Mar 15, 2009 (gmt 0)

In your callback function for onreadystatechanged (your function stateChanged), after you set the innerHTML to the responseText value, fire off the send method again. I think that should do it.

Tastatura




msg:3871097
 2:45 am on Mar 16, 2009 (gmt 0)

@Fotiman - you rock! that did it, and data is contentiously coming in.

Although, I am now done with this part , and am not modifying it any more, I am wondering how easy (or hard) would it be to do something useful with incoming data rather then just displaying it on the page. What I mean is getting the incoming data into some kind of a variable and using it for other purposes....
For posterity and, hopefully if this is useful to somebody else this is how modified web page looks like. Note that i changed getData function (no need for argument in my case now - although it can be modified to accept say query string as an argument...)

web page


<html>
<head>
<script type="text/javascript">

var xmlHttpData

function getData()
{
xmlHttpData=GetxmlHttpDataObject();
if (xmlHttpData==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="http://10.0.0.40/cgi-bin/control2.cgi";
// uncomment if changing function to send specific query string
// don't forget to modify function getData to accept argument, as in getData(str)
// url=url+"?"+str;
xmlHttpData.onreadystatechange=stateChanged;
xmlHttpData.open("GET",url,true);
xmlHttpData.send(null);
}

function stateChanged()
{
if (xmlHttpData.readyState==4)
{
document.getElementById("dataResponse").innerHTML=xmlHttpData.responseText;
//fire getData function here to continuously receive data, i.e "stream data"
getData();
}
}

function GetxmlHttpDataObject()
{
var xmlHttpData=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttpData=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttpData=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttpData=new ActiveXObject("Microsoft.XMLHTTP");
}
}

return xmlHttpData;
}

</script>
</head>

<body onload="getData();">
<p>Data: <span id="dataResponse"></span></p>

</body>
</html>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved