PDA

View Full Version : Getting chunks of data with AJAX with a script element and innerHTML

resander
06-06-2009, 07:01 PM
I have an application that needs chunks of data from a server database, where a chunk contains an array of person records of people living at a particular place and data about the place. The javascript code contains logic for searching and displaying a chunk on the client. The server only provides chunk data on request from the client.

I am thinking of doing it like this (outlined):

<html>
...
<script id=dataid....>
var placename = "Dagenham";
var longitude = somevalue;
var latitude = somevalue;

var persons =["John Johnson" , ... "Carpenter",
.............
"Carla Karlsson" , ... "Teacher"
];
</script>
<script id=codeid..> (uses data in script section above and searches and displays a chunk)
function xyz() {....}
function zyx() {....}
</script>
...
<body>
(presentation and GUI elements here start/refine search and request new chunks)
...
</body>

AJAX XMLHttpReq will be used to request another chunk, e.g. data for Romford and the server would return different text data in the same format as above:

var placename = "Romford";
var longitude = othervalue;
var latitude = othervalue;

var persons =["Ben Benson" , ... "Retired",
.............
"Anne Andersson" , .. "Nurse"
];

The XMLHttpRequest callback function would call:

document.getelementbyid ( 'dataid').innerHTML = textdatareturnedbyXMLHttpreq;


Q1. is this approach going to work? or are there better ways?

Q2. is the 'old' dataid script element content automatically deleted when a new
value is set by innerHTML?

Q3. will textdatareturnedbyXMLHttpReq be parsed or prepared so that
the code script-section can refer to it?
A1ien51
06-09-2009, 03:03 PM
You really should be using an object

var people = [
{ "name" : "John Doe", "job" : "Competitive Eater", "age" : 29 },
{ "name" : "Mary Doe", "job" : "Belly Dancer", "age" : 23 }
];

You can access it via

var who = people[0]["name"]

If you stick JavaScript code in the page with innerHTML it is not going to do anything. It will not be evaluated. It is better to make what comes back in a format you can do. OR you can do eval, but that is a risk.

Return back a JSON object


{
"placename" : "Romford",
"longitude" : "othervalue",
...
"people" : [
{ "name" : "John Doe", "job" : "Competitive Eater", "age" : 29 },
{ "name" : "Mary Doe", "job" : "Belly Dancer", "age" : 23 }
]
}


With that you can either use a JSON Parser or you can eval it.

var newStuff = eval("(" + myXHR.responseText + ")");
placeName = newStuff.placename;
longitude = newStuff.longitude;


Eric
resander
06-12-2009, 11:48 AM
Many thanks for your advice.

I have been experimenting with:

obj =document.getElementById (id);
obj.innerHTML = text;

and found obj.innerHTML=text works if text contains HTML like <b>Hi</b> and obj is obtained from any element except <script>. It has no effect for <script>, nor has obj/innerHTML=eval(text).

So, it seems I have to take the JSON route.

Again, many thanks.