PDA

View Full Version : AJAX need help serious



highjo
05-29-2007, 08:43 PM
hello guy's i'm new to ajax.i'm using a ebook ajax and php programming.I just strart coding and yet i'm stopped by a problem.And honestly i've tried 4 forum sites and nobody minds me.i hope i'll have your attention here and continue learning right here:I have Mozilla FireFox 1.0.7 and Internet Explorer 6,and using xampp with dreamweaver 8. here is my problem:


//html doc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Foundation using :XMLHttpRequest</title>
<script type="text/javascript" src="async.js"></script>
</head>

<body onload="process()">
Hello Server!
<br />
<div id="myDivElement" />

</body>
</html>




/ JavaScript Document
var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject() {

var xmlHttp;
try
{
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for(var i= 0; i <XmlHttpVersions.length && !xmlHttp; i++)
{
try
{
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}
catch(e){}
}
}

if(!xmlHttp)
alert("error creating the XMLHttpRequest object.");
else
return xmlHttp;

}

function process() {
if(xmlHttp) {
try
{
xmlHttp.open("GET", "async.txt", true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
catch(e)
{
alert("can't connect to the server: \n"+ e.toString());
}
}
}

function handleRequestStateChange() {
myDiv = document.getElementById("myDivElement");
if(xmlHttp.readyState == 1 )
{
myDiv.innerHTML += "Request Status: 1 (loading) <br/>";
}
else if(xmlHttp.readyState == 2 )
{
myDiv.innerHTML += "Request Status: 2 (loaded) <br/>";
}
else if(xmlHttp.readyState == 3 )
{
myDiv.innerHTML += "Request Status: 3 (interactive) <br/>";
}
else if(xmlHttp.readyState == 4 )
{
if(xmlHttp.status == 200 )
{
try
{
response = xmlHttp.responseText;
myDiv.innerHTML += "Request Status: 4 (completed).server said: <br/>";
myDiv.innerHTML += response;
}
catch(e)
{
alert("Error reading the response: " + e.toString());
}
}
else
{
alert("There was a problem retrieving the data: \n" + xmlHttp.statusText);
}
}
}




//async.txt, my text file

Hello Joseph




/*
the error alert "there was a problem retrieving the data: Not Found" pops up after displaying :"Hello Server!
Request Status: 1 (loading)
Request Status: 2 (loaded)
Request Status: 3 (interactive) "
on the browser*/


so that makes me think that i can't create a XMLHttpRequest or ActiveXObject object but this code is working:

this one do work with the same construction so i dont know much what is wrong


// JavaScript Document
var xmlHttp = createXmlHttpRequestObject();
// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
// if running Mozilla or other browsers
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
// make asynchronous HTTP request using the XMLHttpRequest object
function process()
{
// proceed only if the xmlHttp object isn't busy
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// retrieve the name typed by the user on the form
name = encodeURIComponent(document.getElementById("myName").value);
// execute the quickstart.php page from the server
xmlHttp.open("GET", "quickstart.php?name=" + name, true);
// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
xmlHttp.send(null);
}
else
// if the connection is busy, try again after one second
setTimeout('process()', 1000);
}
// executed automatically when a message is received from the server
function handleServerResponse()
{
// move forward only if the transaction has completed
if (xmlHttp.readyState == 4)
{
// status of 200 indicates the transaction completed successfully
if (xmlHttp.status == 200)
{
// extract the XML retrieved from the server
xmlResponse = xmlHttp.responseXML;
// obtain the document element (the root element) of the XML structure
xmlDocumentElement = xmlResponse.documentElement;
// get the text message, which is in the first child of
// the the document element
helloMessage = xmlDocumentElement.firstChild.data;
// update the client display using the data received from the server
document.getElementById("divMessage").innerHTML =
'<i>' + helloMessage + '</i>';
// restart sequence
setTimeout('process()', 1000);
}
// a HTTP status different than 200 signals an error
else
{
alert("There was a problem accessing the server: " + xmlHttp.statusText);
}
}
}





//php document


<?php
// we'll generate XML output
header('Content-Type: text/xml');
// generate XML header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
// create the <response> element
echo '<response>';
// retrieve the user name
$name = $_GET['name'];
// generate output depending on the user name received from client
$userNames = array('CRISTIAN', 'BOGDAN', 'FILIP', 'MIHAI', 'YODA');
if (in_array(strtoupper($name), $userNames))
echo 'Hello, master ' . htmlentities($name) . '!';
else if (trim($name) == '')
echo 'Stranger, please tell me your name!';
else
echo htmlentities($name) . ', I don\'t know you!';
// close the <response> element
echo '</response>';
?>




/html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX with PHP: Quickstart</title>
<script type="text/javascript" src="quickstart.js"></script>
</head>
<body onload='process()'>
Server wants to know your name:
<input type="text" id="myName" />
<div id="divMessage" />
</body>
</html>


his one is working so i'm confused.i need serious help because i can't move on what is sad i want to be ready for a project so guys please help!!

pman
05-30-2007, 03:34 AM
I just quickly looked at your description and I think you are trying to get the content of "async.txt" file.

You will need a script on the server side that we will read the content of that file and print it out. Once this is done, you should see those contents via ajax. What ajax basically does is connects to the server without refreshing the browser and whichever script is provided, gets the output from that. So, the second one is working because of the following line


// execute the quickstart.php page from the server
xmlHttp.open("GET", "quickstart.php?name=" + name, true);

And the quickstart.php script outputs something similar to following script:


if (in_array(strtoupper($name), $userNames))
echo 'Hello, master ' . htmlentities($name) . '!';
else if (trim($name) == '')
echo 'Stranger, please tell me your name!';
else
echo htmlentities($name) . ', I don\'t know you!';

That's why, it's working. So, you can't just pass the name of the text file, you need to give it something that will actually try to output something to the browser. That's why, you'll need a script that will read the content of that text file and print it. Then your script should work.

I'll look at your entire code in details later, when I have time.

highjo
05-31-2007, 08:49 AM
thanks for reading and giving some explanation.