Jump to content

Simple Ajax problem

prime

By prime
in Javascript Help

 Share

Recommended Posts

prime Member

prime

Posted
Posted

ok I'm just starting to learn ajax, so I made a simple php script to query:

 

<?php

$variable = "PHP Data";

echo "$variable";

?>

 

As you see nothing fancy just echoing a variable no big deal

 

but anyhow here's my Ajax/Javascript script I made trying to get it to work, yet I'm not getting anything back, and I'm not exactly sure where I went wrong

 

<html>

<head><title>Ajax Script</title>



<script type="text/javascript">

var request = null;


funtion createRequest()
	{
		try
			{
				request = new XMLHttpRequest();
			}
				catch(trymicrosoft)
					{
						try
							{
								request = new ActiveXObject("Msxml2.XMLHTTP");
							}
								catch(othermicrosoft)
									{
										try
											{
												request = new ActiveXObject("Microsoft.XMLHTTP");
											}
												catch(failed)
													{
														request = null;
													}
									}
					}
	}

					if(request == null)
						{
							alert("Cannot create Request");
						}


funtion updatePage()
			{
				if(request.readyState == 4)
					{
						var newData = request.responseText;
						var phpdatael = document.getEelementById("phpdata");
						replace.Text(phpdatael, newData);
					}

			}


funtion getdata()
{
	createRequest();
	var serverurl = "server.php";
	request.open("GET", serverurl, true);
	request.onreadystatechange = updatePage;
	request.send(null);
}

</script>

</head><body>

<p>test</p>
<p>The results of the request are <span id="phpdata"></span></p>

<form method="GET">
<input value="get information" type="button" onClick="getdata();" />

</form>

</body>

</html>

Link to comment
Share on other sites
prime Member

prime

Posted
  • Author
Posted

Ok I've corrected a spelling mistake I had there so now I have

 

<html>

<head><title>Ajax Script</title>



<script type="text/javascript">

var request = null;


function createRequest()
	{
		try
			{
				request = new XMLHttpRequest();
			}
				catch(trymicrosoft)
					{
						try
							{
								request = new ActiveXObject("Msxml2.XMLHTTP");
							}
								catch(othermicrosoft)
									{
										try
											{
												request = new ActiveXObject("Microsoft.XMLHTTP");
											}
												catch(failed)
													{
														request = null;
													}
									}
					}
	}

					if(request == null)
						{
							alert("Cannot create Request");
						}


function updatePage()
			{
				if(request.readyState == 4)
					{
						var newData = request.responseText;
						var phpdatael = document.getEelementById("phpdata");
						replace.Text(phpdatael, newData);
					}

			}


function getdata()
{
	createRequest();
	var serverurl = "server.php";
	request.open("GET", serverurl, true);
	request.onreadystatechange = updatePage;
	request.send(null);
}

</script>

</head><body>

<p>test</p>
<p>The results of the request are <span id="phpdata"></span></p>

<form method="GET" action="">
<input value="get information" type="button" onClick="getdata();" />

</form>

</body>

</html>

 

and I am getting the error cannot create object so obviously I have a problem with that now, sigh

Link to comment
Share on other sites
prime Member

prime

Posted
  • Author
Posted

still no luck but the source I read said that in that context that JavaScript requires no parenthesis in that situation.

 

and any help is appreciated as I said this is he first time I've tried to put topgether an Ajax script so :-S

Link to comment
Share on other sites
prime Member

prime

Posted
  • Author
Posted

I have it creating the object now but still no luck Im not sure why but I dont seem to have any repsonse text, iether that or I'm doing something wrong to display it

 

<html>

<head><title>Ajax Script</title>



<script type="text/javascript">

var request = null;


function createRequest()
	{
		alert("create request object called");
		try
			{
				request = new XMLHttpRequest();
			}
				catch(trymicrosoft)
					{
						try
							{
								request = new ActiveXObject("Msxml2.XMLHTTP");
							}
								catch(othermicrosoft)
									{
										try
											{
												request = new ActiveXObject("Microsoft.XMLHTTP");
											}
												catch(failed)
													{
														request = null;
													}
									}



					}




							alert(request);


		}


function updatePage()
			{
				if(request.readyState == 4)
					{
						var newData = request.responseText;
						var phpdatael = document.getEelementById("phpdata");
						replace.Text(phpdatael, newData);
						alert(newData);
					}

			}


function getdata()
{
	alert("getdata funtion called");
	createRequest();
	var serverurl = "server.php";
	request.open("GET", serverurl, true);
	request.onreadystatechange = updatePage;
	request.send(null);
}

</script>

</head><body>

<p>test</p>
<p>The results of the request are <span id="phpdata"></span></p>

<form method="GET" action="">
<input value="get information" type="button" onClick="getdata();" />

</form>

</body>

</html>

Link to comment
Share on other sites
prime Member

prime

Posted
  • Author
Posted

I have found the response text

 

<html>

<head><title>Ajax Script</title>



<script type="text/javascript">

var request = null;


function createRequest()
	{
		alert("create request object called");
		try
			{
				request = new XMLHttpRequest();
			}
				catch(trymicrosoft)
					{
						try
							{
								request = new ActiveXObject("Msxml2.XMLHTTP");
							}
								catch(othermicrosoft)
									{
										try
											{
												request = new ActiveXObject("Microsoft.XMLHTTP");
											}
												catch(failed)
													{
														request = null;
													}
									}



					}




							alert(request);


		}


function updatePage()
			{
				if(request.readyState == 4)
					{
						alert("updatepage function called");
						var newData = request.responseText;
						alert("reponse text contains " + newData);
						document.getEelementById('phpdata').innerHTML = request.responseText;

					}

			}


function getdata()
{
	alert("getdata function called");
	createRequest();
	var serverurl = "server.php";
	request.open("GET", serverurl, true);
	request.onreadystatechange = updatePage;
	request.send(null);
}

</script>

</head><body>

<p>test</p>
The results of the request are <span id="phpdata"></span>

<form method="GET" action="">
<input value="get information" type="button" onClick="getdata();" />

</form>

</body>

</html>

 

now I have no idea how to write it into a page, sorry if it seems I'm writing a lot here but as I'm asking for help I continue searching and trying to find solutions, now I'm in a big problem, not sure what to do sigh

Link to comment
Share on other sites
prime Member

prime

Posted
  • Author
Posted

Nvm I have the dang thing working sigh

 

for anyone else having the same problems Hope this helps

 

<html>

<head><title>Ajax Script</title>



<script type="text/javascript">

var request = null;


function createRequest()
	{
		alert("create request object called");
		try
			{
				request = new XMLHttpRequest();
			}
				catch(trymicrosoft)
					{
						try
							{
								request = new ActiveXObject("Msxml2.XMLHTTP");
							}
								catch(othermicrosoft)
									{
										try
											{
												request = new ActiveXObject("Microsoft.XMLHTTP");
											}
												catch(failed)
													{
														request = null;
													}
									}



					}




							alert(request);


		}


function updatePage()
			{
				if(request.readyState == 4)
					{
						alert("updatepage function called");
						var newData = request.responseText;
						alert("reponse text contains " + newData);
						document.getElementById("phpdata").innerHTML = newData;

					}

			}


function getdata()
{
	alert("getdata function called");
	createRequest();
	var serverurl = "server.php";
	request.open("GET", serverurl, true);
	request.onreadystatechange = updatePage;
	request.send(null);
}

</script>

</head><body>

<p>test</p>
The results of the request are <span id="phpdata"></span>

<form method="GET" action="">
<input value="get information" type="button" onClick="getdata();" />

</form>

</body>

</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.