Using AJAX and HTML

therealwesfoster · December 8, 2007

Here's my code:

index.htm

<html>
<head>
  <title>hey</title>
   <script type="text/javascript" src="xmlhttp.js"></script>
</head>

<body>

<select name="hey" onChange="doit()">
<option value="h">h</option>
<option value="f">f</option>
<option value="d">d</option>
</select>

</body>
</html>

xmlhttp.js

var xmlHttp

function doit()
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
	alert ("Your browser does not support AJAX!");
	return;
}

   	var url = "http://domain.com/page.asp?get=value";
   	xmlHttp.onreadystatechange=stateChanged;
   	xmlHttp.open("GET",url,true);
   	xmlHttp.send(null);
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{
	var xmlDoc=xmlHttp.responseXML.documentElement;
   		var firstname	=	xmlDoc.getElementsByTagName("input")[2].value;
   		var favcar	=	xmlDoc.getElementsByTagName("input")[3].value;
   		alert("Name: "+firstname+"\nFavcar: "+favcar+"");
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
}
catch (e)
{
	// Internet Explorer
	try
	{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
}

return xmlHttp;
}

When I run the script it does nothing at all... but I noticed I should be loading an XML file in order to use my DOM structure.. is there any way to load a page as pure html? I know there is xmlHttp.responseText, but I'm not sure how to use it or even if it would work with what I need to do.. help please

The DOM is correct btw.

phpQuestioner · December 9, 2007

check out this tutorial and you will see how http.responseText works.

http://www.ajaxfreaks.com/tutorials/1/0.php

therealwesfoster · December 9, 2007

Awesome.. i searched google through and through and it was there the entire time

thanks again

therealwesfoster · December 9, 2007

well.. crap

I can use responseText fine, and it returns like i need it to.. but I'm needing to access the text's DOM structure in order to receive data (instead of pulling from the DB)

I have this:

doit.htm

<html>
<head>
  <title>hey</title>
   <script src="ggf.js"></script>
</head>

<body>

<a href="javascript:onClick=doit()">click me</a><br /><br />

<div id="h"></div>

</body>
</html>

ggf.js

var xmlHttp

function doit()
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
	alert ("Your browser does not support AJAX!");
	return;
}

   	var url = "what.htm";
   	xmlHttp.onreadystatechange=function()
   	{
   		if (xmlHttp.readyState == 4)
   		{
   			var res = xmlHttp.responseText;
   			document.getElementById("h").innerHTML = res;
   		}
   		else
   		{}
   	}
   	xmlHttp.open("GET",url,true);
   	xmlHttp.send(null);
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
}
catch (e)
{
	// Internet Explorer
	try
	{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
}

return xmlHttp;
}

what.htm

<html>
<head><title>h</title>
</head>
<body>

<p id="hey">lololol <b>HAHAHAHAHAHA22</b></p><br />

<b>HAHAHAHAHAHA22</b><br />

</body>
</html>

And it works, it displays what.htm in the designated area on the index page. But what I'm wanting to do is something like this:

   		if (xmlHttp.readyState == 4)
   		{
   			var res = xmlHttp.responseText;
   			document.getElementById("h").innerHTML = res.getElementById("hey").innerHTML;
   		}
   		else
   		{}

You see? I'm wanting to use DOM in order to get certain text from the document and display it..

Thanks

phpQuestioner · December 9, 2007

Create a PHP page that uses "file_get_contents". Use your AJAX script (with the http.responseText) to get the contents from your PHP page and display it in your "h" div.

phpQuestioner · December 9, 2007

try this (I named the pages by todays date - you can change them to whatever you want them to be named):

12-09-2007.html

<script language="javascript">
function createRequestObject() {

   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
     alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP");
   }

   return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(pick) {

   // Open PHP script for requests
   http.open('get', '12-09-2007.php?url='+pick);
   http.onreadystatechange = handleResponse;
   http.send(null);

}

function handleResponse() {

   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;

      if(response) {
         // UPDATE ajaxTest content
         document.getElementById("h").innerHTML = response;
      }

   }

}
</script>

</head><body>

<div id="h" style="width:500px;height:400px;overflow:auto;display:block;border:solid 1px black"></div>
<br>
<a href="javascript:void(0)" onclick="sendRequest('http://www.expedia.com')">Travel Now!</a>

12-09-2007.php

<?php

$url = $_GET['url'];
$page = file_get_contents("$url");
echo "$page";

?>

but be aware that if your getting pages from outside of your CSS style control (web pages from outside your domain); you may run into some CSS issues - you should be fine if your getting all the files from your domain, because you will have control of the CSS style for each of the pages you get.

also if you want to get the images from an external website/web page use their domain in a base href and place it in the "12-09-2007.php" page.

like so:

<?php

$url = $_GET['url'];
$page = file_get_contents("$url");
echo "<base href=\"$url\">";
echo "$page";

?>

therealwesfoster · December 10, 2007

Sweet awesome.. ill try it and get back with ya in a little bit

Sign In

Using AJAX and HTML

Recommended Posts

therealwesfoster

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

therealwesfoster

Link to comment

Share on other sites

therealwesfoster

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

therealwesfoster

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information