should be simple but im having alot of trouble.

i am simply trying to get ajax to work on my webpage. i ahve been working and learning php, css and jscript on my own as a hobby for the past 3 months and im in need of some assistance.

got the code for creating the xmlhttpReq. obj in various browsers. then i made a simple page using PHP to echo the word "Hi".

however i simply can't get it to work....

what i should mention is that i want the page to update on button click. im working towards that by changing pages on button click at first.

could anyone help me with this. I've been on several forums and working on it off and on for over a month. its just frustrating and severely limiting my progress (im working on a text rpg )


jscript

<script type="text/javascript" src="jquery.js">


function addNode(inText)
{
newGraf=document.createElement("p");
newText=document.createTextNode(inText);
newGraf.appendChild(newText);
docBody=document.getElementsByTagName("td").item(0)
docBody.appendChild(newGraf);
return false;
}


function Xp()
{
var xmlhttp;//create a  var for the obj
if (window.XMLHttpRequest)//if requesting an obj...
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
return addNode('You suck');
  }
}
xmlhttp.open("GET","testatt.php",true);
xmlhttp.send(null);
}
</script>

Code (markup):

thanks in advance

 

hi,
what should your addNode function do?
If you just need to display text in the document you can do something like this:

function addNode(inText)
{
   newGraf=document.createElement("p");
   newGraf.innerHTML = inText;
   document.body.appendChild(newGraf);
}

Code (markup):

the part of you Xp function

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
       // you can just cal  the function from here
       // no need to return value
       addNode('request done');
       addNode(xmlhttp.responseText); // will add the text of response
  }
};

xmlhttp.open("GET","testatt.php");
xmlhttp.send();

Code (markup):

 

try this:

function AjaxRequest(url){
var httpRequest;

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP.5.0"); //new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}


if (!httpRequest) {
alert('Giving up Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function() { DoSomething(httpRequest); };
httpRequest.open('GET', url, true);
httpRequest.send(null);
return ResponseText;
}


function DoSomething(httpRequest) {

if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
ResponseText = httpRequest.responseText;
alert(ResponseText);
} else {
alert('There was a problem with the request.');
}
}

}


when you click the button, call the AjaxRequest function and pass the url of your php page to it. The php should generate some sort of result and print it out. The result is passed to the DoSomething function where it alerts what it gets.

 

You're doing too much hard work that you don't need to be doing seeing as you already have Jquery loaded on the first line... but you're not using it at all. Especially since it would solve your cross browser problem. Also you can't have a src="" and body script at the same time, its one or the other.

Anyways this is a possible conversion of your code over to Jquery.

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      function addNode(inText)
      {
	$("td:first-child").append('<p>'+inText+'</p>'); 
	return false;
      }
      
      function Xp()
      {
	$.get('testatt.php');
      }
    </script>

Code (markup):

Anyways that above is essentially the same thing as your code except without the whole xmlhttp checking bit, and the nice thing is the above should work on IE, Firefox, Safari, on both Windows and Mac. Figure if you're gona include jquery.js you might as well use it.

by the way if you're expecting a response back from testatt.php

$.get("testatt.php", function(data){
  alert("Data Loaded: " + data);
});

Code (markup):

data would contain the response text.

Or if you need to pass some variables and get a response:

$.get("testatt.php", { name: "Rick", note: "something" },
  function(data){
    alert("Data Loaded: " + data);
  });

Code (markup):

PS: you can also do $.post() if you want to send variables/data to a php file like you would from a form set to method=post

 

thanks , both responses have been very helpful.