Reputation: 11
I'm new to AJAX, and trying to use it to speed up the display of results for a PHP full-text file search. I have about 1700 files to search, so instead of waiting for the server to process everything I want to send just the first 100 to the script and display the results, then the next 100 etc., so users get instant gratification.
To do this, I call a function callftsearch with the names of all the files in a string and some other information needed for the PHP function on the other side to run the search. callftsearch creates arrays of each 100 files, joins them in strings and sends that to ftsearch.php through the javascript function ftsearch. The PHP runs the search and formats the results for display, and sends the HTML string with the table back. addresults() just appends that table onto an existing div on the page.
Here's the javascript:
function GetXmlHttpObject()
{
var xmlHttp=null;
try { xmlHttp=new XMLHttpRequest(); }
catch (e) { try { xmlHttp=new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e) { xmlHttp=new ActiveXObject('Microsoft.XMLHTTP'); } }
return xmlHttp;
}
function callftsearch(allfiles, count, phpfilenames, keywordscore, keywordsboolean, ascii) {
var split_files = allfiles.split("|");
var current_files = new Array();
var i;
for (i = 1; i<=count; i++) {
file = split_files.shift();
current_files.push(file);
if (i%100 == 0 || i == count) {
file_batch = current_files.join('|');
ftsearch(file_batch, phpfilenames, keywordscore, keywordsboolean, ascii);
current_files.length = 0;
}
}
}
function ftsearch(file_batch, phpfilenames, keywordscore, keywordsboolean, ascii)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) { return; }
// If our 'socket' has changed, send the response to addresults()
xmlHttp.onreadystatechange=addresults;
xmlHttp.open('POST','ftsearch.php', true);
var content_type = 'application/x-www-form-urlencoded';
xmlHttp.setRequestHeader('Content-Type', content_type);
xmlHttp.send('f='+file_batch+'&pfn='+phpfilenames+'&kw='+keywordscore+'&kwb='+keywordsboolean+'&a='+ascii);
}
function addresults()
{
var displayarray = new Array();
if (xmlHttp.readyState==4)
{
var ftsearchresults = xmlHttp.responseText;
$('#result_tables').append(ftsearchresults);
}
}
The problem: the page displays the exact same table repeatedly, with only the first few results. When I add alert(file_batch) to callftsearch it shows that it's sending the correct packets of files in succession. But when I alert(ftsearchresults) in addresults() it shows that it's receiving the same string over and over. I even added a timestamp at one point and it was the same for all of the printed tables.
Why would this happen?
Upvotes: 0
Views: 389
Reputation: 6622
A few things here.
First: it looks like you are already using jQuery since you have the line,
$('#result_tables')
If thsts the case, then why not use jQuerys built in ajax functionality? You could just do something like this,
$.ajax({
type: "POST",
url: "ftsearch.php",
data: 'f='+file_batch+'&pfn='+phpfilenames+'&kw='+keywordscore+'&kwb='+keywordsboolean+'&a='+ascii,
success: function(response){
$('#result_tables').append(response);
}
});
Second: If the output continues to be the same first few items each time, have you tried outputting the information that the ajax page is receiving? If it is receiving the correct information, then that meens there is something wrong with your PHP logic, which you do not have posted.
Upvotes: 1