ajax XMLHttpRequest readystate - php

Question

I have an html page with this form
<form id="quick-search" autocomplete="off" class="form-wrapper cf" >
<div style="text-align: center;">
<input id="qsearch" name="qsearch" onkeyup="liveSearch()" placeholder="Search here..." required="" type="text">
<button onclick='ajaxFunction()' id="submitButton">Search</button>
</div>`
and this div where I put the results of ajaxFunction
<div id='ajaxDiv'>Your result will display here</div>
when I click the button the ajaxFunction executed. Just opens a php file where I make a sql query as user writes it in qsearch input form. Here is the JavaScript code:
function createRequestObject(){
var request_o;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_o = new XMLHttpRequest();
}
return request_o;
}
var http = createRequestObject()
function ajaxFunction(){
// Create a function that will receive data sent from the server
http .onreadystatechange = function(){
try{
if(http .readyState == 4){
if(http .status==200){
try{
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML= http .responseText;
}catch(err){
// display error message
alert("Error reading the response: " + err.toString());
return false;
}
}
}
else{
alert(http .readyState+" "+http .status);
}
}catch(e){
alert('Caught Expection: '+e.description+' '+http .status);
return false;
}
}
var par = document.getElementById('qsearch').value;
var queryString = "?par=" + par;
http.open("GET", "results3.php" + queryString, true);
http.send(null);
}
The code works well but the problem is that I need to click the button two times(with the same text in input field of course) to make result text stay in div. At first click the same results come out but the page automatic refresh and results(also the text in input form) disappear.At second click the page don't refresh show no problem.With the alert in code I can see the readyState and status. The states,status produced are 1,0->2,200->3,200->1,0. between state 3 and 1 results shown on page(clearly state 4 comes without problem) but why I have state 1 after 4? All this in Firefox 17.0.1
Thanks in advance for any help!

Answer 1

I work on this at least one day and I found the solution 10 min after I post my problem! The answer is here [Stop refreshing with ajax , javascript , php][1] [1]: Stop refreshing with ajax , javascript , php… I only had to add return false here: onclick='ajaxFunction();return false' and now it works perfect! Thanks!