CODEWITHSUNDEEP
phpajaxxmlhttprequest
Ibrahim.I
Ibrahim.I

Reputation: 329

AJAX XMLHttpRequest not working

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..

Upvotes: 0

Views: 2264

Answers (2)

user2036918
user2036918

Reputation:

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);
            }
        }
    }

Upvotes: 4

wandering-geek
wandering-geek

Reputation: 1378

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.

Upvotes: 0

Related Questions