Jump to content

Ajax Beginner


spamoom

Recommended Posts

I have never ventured into ajax or javascript really and thought I'd give it a go..

 

After 20minutes of messing around, i counjured up a small script but not to my suprise... it doesn't work.

 

Please could someone point out the mistake that I have made in my code and explain why it needs to be that.  ;D

 

index.html

<html>
<head>
<title>Ajax Test</title>
<script>
http = new XMLHttpRequest();

function updateData(param) {
  var myurl = cap.php;

  http.open("GET", myurl + "?n=" + escape(param), true);
  http.onreadystatechange = useHttpResponse;
  http.send(null);

}

function useHttpResponse() {
  if (http.readyState == 4) {
    var textout = http.responseText;
    document.write.textout;
  }
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="question">
<input type="text" name="text">
<input type="submit" OnClick="javascript: updateData(document.question.text.value)" value="Captilase">
</form>
<br /><br />
--><script>useHttpResponse()</script><--
</body>
</html>

 

and cap.php...

 

<?php
echo ucfirst($_GET['n']);
?>

 

Thanks in advance!!

Link to comment
https://forums.phpfreaks.com/topic/67022-ajax-beginner/
Share on other sites

First things first does your browser support XMLHttpRequest() I know Firefox, Opera 8.0+ and Safari support it. Internet explorer however doesnt.

 

1. Put quote marks around: var myurl = "cap.php"

2. Document.write should be used: document.write(textout)

3. Remove: --><script>useHttpResponse()</script><--

4. I recommend using OnClick="updateData(this.form.somefieldname.value); return false;"

5. Change the field name to something other then text

Link to comment
https://forums.phpfreaks.com/topic/67022-ajax-beginner/#findComment-336669
Share on other sites

Ok, I did what you said, (i think  :-\)

 

I have this.. for some reason it seems to be reloading the page when I submit the form.(it still doesnt work :D)

 

And yeah I know thats for firefox only, but thats all I am using to test it

 

<html>
<head>
<title>Ajax Test</title>
<script>
http = new XMLHttpRequest();

function updateData(param) {
  var myurl = "cap.php";

  http.open("GET", myurl + "?n=" + escape(param), true);
  http.onreadystatechange = useHttpResponse;
  http.send(null);

}

function useHttpResponse() {
  if (http.readyState == 4) {
    var textout = http.responseText;
    document.write(textout);
  }
}
</script>
</head>


<body bgcolor="#FFFFFF">
<form name="question">
<input type="text" name="stuff">
<input type="submit" OnClick="OnClick="updateData(this.form.stuff.value); return false;"" value="Captilase">
</form>
</body>


</html>

 

Thankies

Link to comment
https://forums.phpfreaks.com/topic/67022-ajax-beginner/#findComment-338414
Share on other sites

Since you mentioned you're just starting... like me here :)

 

Check your readystates -> add additional ifs for the other readystates, probably place an alert for each state...

and you also might wish to add additional ifs for other HTTP status codes.

 

and make sure that you're receiving a $_GET in your php ... well just because i missed out on that one the first time around

Link to comment
https://forums.phpfreaks.com/topic/67022-ajax-beginner/#findComment-340237
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.