Home/ Questions/Q 6536067
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:26:51+00:00

I just started this book – AJAX and PHP Second edition and I failed

  • 0

I just started this book – “AJAX and PHP Second edition” and I failed on the very first example.I’m pretty sure the code is just as it is shown in the book, but still when I run index.htm in the error console(Mozzila 6.0) I get this : “xmlResponse is NULL http://localhost/ajax/quickstart/quickstart.js.I don’t know what’s going on but really don’t want to give up at the very begining so I’ll pase all the 3 files and hopefully anyone would point me where the problem is.
Here is the index.htm :

<!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, 2nd Edition: 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" ></div>
</body>
</html>

here is the quickstart.js :

// stores the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();
// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject()
{
// stores the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer 6 or older
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(name)
{
// 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();
}
else
// if the connection is busy, try again after one second
setTimeout('process()', 1000);
}
// callback function executed 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;
// display 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);
        }
    }
}

and finally the quickstart.php :

<?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('YODA', 'AUDRA', 'BOGDAN', 'CRISTIAN');
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>';
?>

Thanks in advanced!
Leron

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a couple of problems I found with your code. Mentioning some of them

    • You are calling the process() on body-onload. This means, when the DOM is ready, the browser calls the process() function. This, IMO, is not something you would want. Instead, have a button, which calls this process function with the onclick event. Something like:

      <button onclick="process('YODA');return false;">Click Me!</button>

    • Process is defined as taking one parameter called name, you are passing none. So, make a fix something like this:

      <button onclick="myProcess();return false;">Click Me!</button>

    And is your JS section/file

    function myProcess(){
    process(encodeURIComponent(document.getElementById('myName').value));
}
    • Do not have that document.getElementById(..) inside the process function. It defeats the entire purpose of passing that parameter ‘name’

    I would ask you to use a really good browser like Mozilla Firefox, or Google Chrome (since you seem to give IE6 a prefence in your code, atleast seems like it!). Chrome has a fantastic inspector window. Once you get the hang of it, you will almost fall in love with it. I did! 😉

    I would suggest, you use libraries like jQuery(www.jquery.com) or something, for ajax. Makes your life easier! 🙂

    EDIT

    I would suggest the following steps, since you want to get this piece of code working.

    • First open the url [BASE-URL]/quickstate.php?name=YODA. If everything is just fine, you should see the XML that should be the response to your AJAX call. If not, there’s some problem with the PHP file(or a few settings of your server), and not anything else. I feel this step wouldn’t be a problem.

    • Next, once the page is loaded, type ‘YODA’ in the textbox, type this in the browser’s URL box: javascript:process(''). This should call the function that has the ajax call. You could keep a tab on the data transferred section of the firebug(I dont know the name exactly, but its the ‘Network’ section in Google Chrome). You could analyse the headers sent to the PHP scripts, and the response (including the HTTP error codes) sent back to you from the server. I also feel this wont be a problem.

    What causes the problem is: The DOM of the page is loaded. The AJAX call is made once the DOM is ready. This means the AJAX request is made even before you type anything in that textbox. And thus, the request that goes to the server has a empty value for name parameter. This is exactly, (IMO) the reason why things are not working for you. But even then, this is not the reason why you see a null for XML out there. Could you do a console.log(xmlHttp) and tell us the results?

    • 0