Forum Moderators: open
SCENARIO - I created a web app that allows the user to take multiple math drills and record there score. I am using ASP for this because I have yet to learn .net (must do that soon, I am way behind now).
So after the user finishes their drill I want to store their results and some data to a database. Not wanting to refresh the page for the user I discovered XMLHttpRequest, never used it and no nothing about it.
So, searched the web and found a script that would help me acheive what I was looking for. This script can be found at brainjar.com > DHTML > Getting Started with AJAX. This script creates a user defined javascript object which is a wrapper for the XMLHttpRequest object.
To save posting room the script can be found here:
[brainjar.com...]
Now all this worked fine for me in IE6 and firefox. But when I try to run the same pages in IE7 I get the following scenario:
1. Take drill for the first time
2. Create data to send in request
3. post request
4. data is added to the database
5. get response
6. display results
7. Take drill for the second time
8. Create data to send in request
9. post request
10. data is added to the database
11. WHERE IS THE RESPONSE - the page never seems to enter the function which is setup to handle a successfull response
I will add the code that I use to achieve what I am after and please refer to the link I used above to see the code that creates the wrapper for the XMLHttp Object
My Code:
I start of by creating my XMLHttpRequest object:
// Create an XMLHttpRequest object using cross-browser function.
var myRequest = new HttpRequest();
// Assign callback functions, URL and set request headers.
myRequest.successCallback = processResponse;
myRequest.failureCallback = showError;
myRequest.url = "processPostData.asp";
myRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// Variable to hold all data to be sent by post request
var postData = "";
The following function puts all the data into a variable to be sent to the database:
function createPostData() {
// Create the post data.
document.getElementById("resultsHolder").innerHTML = "<p> </p><p> </p><p> </p><p> </p><h3 align='center'>Processing... </h3>";
document.getElementById("resultsHolder").style.visibility = 'visible';
postData = "userID=" + userID;
postData = postData + "&drillLevel=" + drillLevel;
postData = postData + "&drillType=" + drillType;
postData = postData + "&drillSkipRange=" + drillSkipRange;
postData = postData + "&drillRandomRange1=" + drillRandomRange1;
postData = postData + "&drillRandomRange2=" + drillRandomRange2;
postData = postData + "&drillStartDate=" + drillStartDate;
postData = postData + "&drillStartTime=" + drillStartTime;
postData = postData + "&drillCompleteTime=" + document.getElementById('drillTimer').innerHTML;
postData = postData + "&drillScore=" + finalScore + "/" + numberOfQuestions;
postData = postData + "&drillScorePercent=" + finalScorePercent;
// Run Loop to add test questions and results to postData
for (var x = 0; x < numberOfQuestions; x++)
{
postData = postData + "&Q" + (x + 1) + "Question=" + firstNumber[x] + "%20%2B%20" + secondNumber[x];// %20 = " " and %2B = +
postData = postData + "&Q" + (x + 1) + "CorrectAnswer=" + correctAnswer[x];
if (userAnswer[x] == "") {//Array Element is Empty
postData = postData + "&Q" + (x + 1) + "UserAnswer=" + "%97";//%97 is a hyphen
} else {
postData = postData + "&Q" + (x + 1) + "UserAnswer=" + userAnswer[x];
}
}
doPost();
}
The next function posts the data using HttpRequest object:
function doPost() {
myRequest.post(postData);
}
The next two functions are setup to handle the response:
function processResponse(httpRequest) {
var bestTimeData = httpRequest.responseText;
// This function call displays the results of the test to the user
displayResults(bestTimeData);
}
function showError(httpRequest) {
error = myRequest.responseText;
document.write(error);
}
When I run it the first time in IE7 it goes through all these functions fine but when I take the drill again the data is gathered and sent to the database where it is stored but it never seems to make it back to the processResponse() to display the results to the user.
DISCOVERY - I recently came across a site where the editor talked about issues he had with IE7 and said he disabled 'native XMLHTTP support', so I decided to try this and it solved my issue and everything worked again.
BUT this is on by DEFAULT, so a user that uses my app would have to disable it.
Here is the constructor from the script I got from brainjar, which I believe sets up my XMLHttpRequest object:
// Define a list of Microsoft XML HTTP ProgIDs.
HttpRequest.prototype.MS_PROGIDS = new Array(
"Msxml2.XMLHTTP.7.0",
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.5.0",
"Msxml2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"
);
// Define constants.
HttpRequest.prototype.READY_STATE_UNINITIALIZED = 0;
HttpRequest.prototype.READY_STATE_LOADING = 1;
HttpRequest.prototype.READY_STATE_LOADED = 2;
HttpRequest.prototype.READY_STATE_INTERACTIVE = 3;
HttpRequest.prototype.READY_STATE_COMPLETED = 4;
//=============================================================================
// Contructor function.
//=============================================================================
function HttpRequest()
{
// Create the appropriate HttpRequest object for the browser.
this.xmlHttpRequest = null;
if (window.XMLHttpRequest!= null)
this.xmlHttpRequest = new window.XMLHttpRequest();
else if (window.ActiveXObject!= null)
{
// Must be IE, find the right ActiveXObject.
var success = false;
for (var i = 0; i < HttpRequest.prototype.MS_PROGIDS.length &&!success; i++)
{
try
{
this.xmlHttpRequest = new ActiveXObject(HttpRequest.prototype.MS_PROGIDS[i]);
success = true;
}
catch (ex)
{}
}
}
// If we couldn't create one, display an error and exit
if (this.xmlHttpRequest == null)
{
alert("Error in HttpRequest():\n\nCannot create an XMLHttpRequest object.");
return;
}
}
Conclusion:
I am not familiar with the HttpRequest object so this script got me on my way when I was in a crunch. But now I have problems, which is why I try not to use something until I can make some sense of it but didn't have time here.
So does anyone no why the 'native XMLHTTP support' in IE7 is causing my issue? I could tell someone who is using IE7 to disable this so that it works but I would rather not and make it work for both IE6, IE7 and firfox (these for now - wink,wink)
Sorry for the long post but I wanted to give as much information as I could to help you understand what is going on.
Awaiting some responses........
this is on by DEFAULT
GOOD.
As it should be. Sites using xmlhttprequest are the bane of my browsing experience. Activex security popup windows all over the place. Maybe this will put a nail in the coffin of a braindead idea.
I realise that this is the ajax forum, and so this might be the world's worst place to post this opinion. But it also might be the best place to motivate change.
There are a multitude of ways to pass data back and forth without resorting to xmlhttprequest. Please use one. I don't care which one you use as long as it does not involve activex.
So if you need more code let me know and I will provide it. If it can't be solved then that is fine too then I will put the code in to check for it, but I don't want to.
SO PLEASE HELP ME OUT ON THIS ONE.
Sorry to beg but it is my last chance.
Any help is greatly appreciated.
User