Getting Collections of data through AJAX

[Arun Manivannan]

Hi,
I tried using AJAX is one of my current projects and it was a very big success. It was liked by all my supervisors. What i did was ... as the user enters the search criteria, his totalRowcount of the search criteria would get returned and thats getting displayed in a <div> tag. I used the following method to do it.

function responseHandleMethod(){

resultDivTag=document.getElementById("divCountResultMessage");
if (req.readyState==4){
if (req.status==200){
var response=req.responseText;
if (response=='0'){
resultDivTag.innerHTML="<font color=\"#006600\"> Sorry !!! No matching results found </font>";
}
else{
resultDivTag.innerHTML="<font color=\"#006600\">"+ response+" matching results found</font>";
}
}
}
}


My question is, it was pretty simple getting a single string and displaying. But I am planning to display a collection (similar to Google suggest). I understand that the response would be an XML file. But I am not sure how I should do this. Should I create an XML on my own from the server-side or the response itself is an XML? Can you help me out in this. Please.

Arun
[ November 15, 2005: Message edited by: Arun Manivannan ]

[Barend Garvelink]

You have several options, not all of which require XML.

1) Using responseText like you are now, you could have your server respond with a comma-seperated or newline-seperated list of values and parse that in your onreadystatechange method using String.split to chop it up into an array.

2) Alternatively (but somewhat deviant), you could have your server generate a bit of Javascript code and have your event handler call the eval-function on it.

3) Using XML, you'll have to have your server generate an XML response and parse that on the client side using responseXML and the standard DOM API. This may be "prettier" and all official and stuff, but it's a bit more work.

If there's no particular reason why you'd need XML (other than perhaps professional curiosity), I'd just go with option 1.

[Eduardo Luttner]

You could make the server return the HTML as the response.

If your suggest box is a <select> object, you can create a jsp file to answer with a new <select> object, and replace it.

The file which has the suggest:
<input type="text" id="suggestFilter" on key Press="search();"/>
<div id="divSuggest">
<select></select>
</div>

function search()
{
//creates the url that has the filterQuery
}

function responseHandleMethod(){
resultDivTag=document.getElementById("divSuggest");
if (req.readyState==4){
if (req.status==200){
var response=req.responseText;
if (response=='0'){
resultDivTag.innerHTML="";
}
else{
resultDivTag.innerHTML=response;
}
}
}
}

And the JSP which has the response:

<select>
<option value="1">result....</option>
<option value="2">result....</option>
<option value="3">result....</option>
<option value="4">result....</option>
</select>


I hope this helps you to build the Suggest field.