surreal5335
06-02-2010, 06:38 AM
I am working on a tutorial about the xmlHttpRequest object and trying to get info from .txt file and display the status of the object as it goes through its 4 processes.
So far I am getting:
>>no errors from my error console
>>no messages from the .txt or my status codes.
My div id in my HTML page is: <div id="myDivElement" />
I am calling my function as so: <body onload="process()">
My javascript file is:
// holds an instance of the XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
// creates an XMLHttpRequest instance
function createXmlHttpRequestObject() {
//will store the reference to the XMLHttpRequest object
var xmlHttp;
//create the XMLHttpRequest object
try {
// assume IE7 or newer or other modern browsers
xmlHttp = new XMLHttpRequest();
} catch (e) {
// assume IE6 or older
try {
xmlHttp = new ActionXObject("Microsoft.XMLHttp");
} catch (e) { }
// return the created object or display an error message
if (!xmlHttp) {
alert("Error creating the XMLHttpRequest object.");
} else {
return xmlHttp;
} // end if else
} // end first catch (e) {}
} // end createXmlHttpRequestObject()
/*************************************************************************************/
// performs a server request and assigns a callback function
function process() {
//only continue if we have a valid xmlHttp object
if (xmlHttp) {
// try to connect to the server
try {
// initiate reading the async.txt file from the server
xmlHttp.open("GET", "async.txt", true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
//change cursor to "busy" hourglass icon
document.body.style.cursor = "wait";
} catch (e) {
alert("Cant connect to server: \n" + e.toString());
// revert "busy" icon to normal cursor
document.body.style.cursor = "default";
} // end try catch() {}
} // end if statement
} // end process()
/***************************************************************************************/
// function that handles the HTTP response
function handleRequestStateChange() {
// obtain a reference to the <div> element on the page
myDiv = document.getElementById("myDivElement");
// display the status of the request
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) {
// revert "busy" hourglass incon to normal cursor
document.body.style.cursor = "defualt";
// read response only if HTTP staus is "OK"
if (xmlHttp.status == 200) {
try {
// read the message from the server
response = xmlHttp.responseText;
//display the message
myDiv.innerHTML += "Request status 4 (complete). Server said: <br />";
myDiv.innerHTML += response;
} catch (e) {
// display the error message
alert("Error reading the response: " + e.toString());
} // end try catch
} else {
// display status message
alert("There was a problem retrieving the data: \n" + xmlHttp.statusText);
// revert "busy" hourglass icon to normal cursor
document.body.style.cursor = "defualt";
} // end if else ()
} //end if else if statement
} // end handleRequestStateChange()
I appreciate the help
So far I am getting:
>>no errors from my error console
>>no messages from the .txt or my status codes.
My div id in my HTML page is: <div id="myDivElement" />
I am calling my function as so: <body onload="process()">
My javascript file is:
// holds an instance of the XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
// creates an XMLHttpRequest instance
function createXmlHttpRequestObject() {
//will store the reference to the XMLHttpRequest object
var xmlHttp;
//create the XMLHttpRequest object
try {
// assume IE7 or newer or other modern browsers
xmlHttp = new XMLHttpRequest();
} catch (e) {
// assume IE6 or older
try {
xmlHttp = new ActionXObject("Microsoft.XMLHttp");
} catch (e) { }
// return the created object or display an error message
if (!xmlHttp) {
alert("Error creating the XMLHttpRequest object.");
} else {
return xmlHttp;
} // end if else
} // end first catch (e) {}
} // end createXmlHttpRequestObject()
/*************************************************************************************/
// performs a server request and assigns a callback function
function process() {
//only continue if we have a valid xmlHttp object
if (xmlHttp) {
// try to connect to the server
try {
// initiate reading the async.txt file from the server
xmlHttp.open("GET", "async.txt", true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
//change cursor to "busy" hourglass icon
document.body.style.cursor = "wait";
} catch (e) {
alert("Cant connect to server: \n" + e.toString());
// revert "busy" icon to normal cursor
document.body.style.cursor = "default";
} // end try catch() {}
} // end if statement
} // end process()
/***************************************************************************************/
// function that handles the HTTP response
function handleRequestStateChange() {
// obtain a reference to the <div> element on the page
myDiv = document.getElementById("myDivElement");
// display the status of the request
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) {
// revert "busy" hourglass incon to normal cursor
document.body.style.cursor = "defualt";
// read response only if HTTP staus is "OK"
if (xmlHttp.status == 200) {
try {
// read the message from the server
response = xmlHttp.responseText;
//display the message
myDiv.innerHTML += "Request status 4 (complete). Server said: <br />";
myDiv.innerHTML += response;
} catch (e) {
// display the error message
alert("Error reading the response: " + e.toString());
} // end try catch
} else {
// display status message
alert("There was a problem retrieving the data: \n" + xmlHttp.statusText);
// revert "busy" hourglass icon to normal cursor
document.body.style.cursor = "defualt";
} // end if else ()
} //end if else if statement
} // end handleRequestStateChange()
I appreciate the help