javascript - onreadystatechange triggers reload of page -

I am trying to learn some composite php, javascript, sql, html content ... i created something that Works on Firefox without any errors (both WinXP and Android versions). The desired action is that, whenever I click the button "Process!" Clicking on a php script reads in "Textrera", puts each word in the database and some HTML comes back ...

   The server is working on the text ..." various feedback; Try {var httpReq = new XMLHttpRequest (); } Hold (error) {document.write (error); } HttpReq.open ("POST", "textinput.php", true); HttpReq.send (.ocument.getElementById ("text field") innerHTML); HttpReq.onreadystatechange = function () {if (httpReq.readyState == 4) {response = httpReq.responseText; Document.getElementById ("m_block"). InnerHTML = Feedback; }} & Lt; / Script & gt; & Lt; Div id = "container" & gt; & Lt; Div id = "l_block" & gt; & Lt; / Div & gt; & Lt; Div id = "m_block" & gt; & Lt; Form & gt; & Lt; Br / & gt; & Lt; Textarea id = "textarea" rows = "10" cols = "42" & gt; Insert text here! & Lt; / Textarea & gt; & Lt; Button onclick = "processText ()" & gt; process! & Lt; / Button & gt; & Lt; / Form & gt; & Lt; / Div & gt; & Lt; Div id = "r1_block" & gt; CSS 2 & lt; / Div & gt; & Lt; Div id = "r2_block" & gt; CSS 1 & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 The response from php-script looks like this:  
  search:  & Lt; Div id = "ajaxoutput" & gt; & Lt; / Div & gt;   
 I call things "ajax", I do not know anything if it is considered Ajax. But I call it because it is considered sending the string to  textfield  on each keyboard event. Just put a little azee, as far as I understand it.  
 However, this works really well on Firefox as I said, but when I try it on other browsers, then nothing happens. It seems that such a page seems to have added the URL to the address bar ? The page reloads with  ...  
 I can only ask all my friends to use Firefox, but I am curious to know what is the reason. Where do I go wrong?  
 Thank you!  
  Edit!  I did some excavation in the debugger of Chrome, the reaction gets back out. When I set a breakpoint, I think the div gets populated with new content. However, the callback function is called twice in the row. After it is finished, I return to the previous content, the server response is not found elsewhere. What is happening? As soon as Jonathan had said that you did not mention the browser that gives you concrete answer. In addition, your AJAX implementation is incomplete, please give it a try  
  // Put it up before anything (String.prototype.trim) {String.prototype.trim = function () {return This.replace (/ ^ \ s + | \ ro + $ / g, ''); }; }   
 Update your AJAX related code with it also  
  var xmlhttp; If (window.XMLHttpRequest) {// code for IE7 +, Firefox, Chrome, Opera, Safari xmlhttp = New XMLHttpRequest (); } Else {// code for IE6, IE5 xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); } Xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 & xmlhttp.status == 200} {// something}} xmlhttp.open ("post", "textinput.php", true) ; Xmlhttp.setRequestHeader ("content-type", "application / x-www form-urlencoded"); //xmlhttp.send("fname=Henry&lname=Ford ");   
 You can also try using a library such as a library that will take care of most browser incompatibilities.