AJAX XMLHttpRequest not working

Question

I'm trying to work with ajax. I have two pages: request.html and reply.php.

request.html:

<html>
<script language="javascript">
    var xht = new XMLHttpRequest();
    function testAJAX()
    {
        xht.open("get","http://localhost:9999//a.php", true);
        xht.send();
        xht.onreadystatechange=function() { 
            if (xht.readyState==4) {
                alert("Text: "+xht.responseText);
            }
        }
    }
</script>
<form id="form1" name="form1" method="post" action="">
  btn
  <input name="btn" type="submit" id="btn" onClick="testAJAX();" value="Submit" />
</form>
</html>

reply.php:

<?php
echo 'hi';
?>

The problem is that I don't get a response via xht.responseText and with xht.responseXML I get null and with xht.status I get 0.

I asked the link http://localhost:9999//a.php via browser and got hi correctly.

P.S: I tried this on Chrome 29.0.1547.18 and Maxthon v4.1.1

any ideas..

score 4 · Accepted Answer · 2013-09-12 07:36:45Z

4

You don't need to mention "http://localhost".

The main mistake is you have given the input type as Submit If it is submit the form will be submitted first the click event will not trigger. Change the input type to button. If you want to do form submission do it in java script

The corrected code is below.

<form id="form1" name="form1" method="post" action="">
  btn
  <input name="btn" type="button" id="btn" onClick="testAJAX();" value="Submit" />
   // change type to button
</form> 

var xht = new XMLHttpRequest();
    function testAJAX()
    {
        xht.open("get","a.php", true); /// Change to a.php
        xht.send();
        xht.onreadystatechange=function() { 
            if (xht.readyState==4) {
                alert("Text: "+xht.responseText);
            }
        }
    }

edited Sep 12, 2013 at 7:36

answered Aug 3, 2013 at 15:34

user2036918

Sign up to request clarification or add additional context in comments.

4 Comments

Ibrahim.I Over a year ago

this answer requires the html page to be on the same level as a.php the answer is correct. but why AJAX doesn't work with onSubmit() event?

user2036918 Over a year ago

try the new edit i have made change type="button". it will work

user2036918 Over a year ago

Its because you are submitting the form to the server.But ajax is client side request. However, you are asking the button to submit the form to server side

user2036918 Over a year ago

@Krishna Kishore Shetty onsubmit = return false has the same effect of not giving submit button. Submit button is used to submit the form to server and if form submission is not needed why to use submit button. And I agree with your opinion of following the HTML structure correctly

Community · Accepted Answer · 2020-06-20 09:12:55Z

Adding to SarathPrakash's answer, I would like to point out that there is nothing wrong with specifying localhost. It will still work as long as the PHP file's address is valid.

You can also have the submit button. But you'll have to modify the form opening tag as follows:-

<form id="form1" name="form1" method="POST" action="" onsubmit="return false">

This is will stop the default behaviour of the form being submitted. Although in my opinion, it is best to avoid it altogether, and just stick with assigning the correct event handler to the onclick attribute.

Also, it is good practice to follow the correct syntax for HTML documents.

<html>
 <head>
  <title> Your title here </title>
  <script type="text/javascript"> Your script here </script>
 </head>
 <body>
  Your main document text here. Forms, tables etc.
 </body>
</html>

For a simple tutorial, you could try this.

Collectives™ on Stack Overflow

AJAX XMLHttpRequest not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related