Is there any way other than XMLHttpRequest.responseText.length to get the current download progress of an AJAX request?
I ask this because IE just gives up with a "data not yet available" error. Other browsers have no issues, but I'd like to be able to at least give some indication of progress.
The progress event’s support is limited to version 10 in terms of Internet Explorer, but you didn’t specify a version…
rq.onprogress = function(e) {
if(e.lengthComputable) {
progressElement.textContent = Math.floor(e.loaded / e.total * 100) + "%";
}
};
you should define separate object for IE and other browsers
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
req.setRequestHeader('Content-Type', 'application/x-www-formurlencoded');
req.send(data);
} // branch for IE/Windows ActiveX version
else if (window.ActiveXObject)
{
req = new ActiveXObject('Microsoft.XMLHTTP');
.
.
.
}
and you know there is more than one xmlhttp
xmlhttp1.0 , 2.0 ,...
or you can make a try-catch block
Related
i'm experiencing problems with testing my web application on firefox and internet explorer, the problem seem to be in the ajax calls made by my application to the server i realized this when i debugged my application using FIDDLER WEB DEBUGGER and i noticed that i don't get any response when im using IE or firefox.
I tried to change my request type from "GET" to "POST" and add a cache buster without any success.
Please peep my CODE:
this is where i create my ajax object:
function createXmlHttpRequestObject()
{
var xmlHttp;
if(window.ActiveXObject){
try{alert(0);
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
xmlHttp = false;
}
}
else{
try{
xmlHttp = new XMLHttpRequest();
}
catch(e){
xmlHttp = false;
}
}
if(!xmlHttp){
alert("Can't create object!!!");
}
else{
return xmlHttp;
}
}
and this is where i send the request:
function process(){
var params = "word="+word;
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
xmlHttp.open("POST","/gwizz/scripts/definition.php",true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length",params.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(params);
}else{
setTimeout('process()',1000);
}
}
Any piece of help will be much appreciated.
#Moor
I can't answer exactly what is wrong but here are some pointers that may help you.
XMLHttpRequest - Perhaps this is a bit of topic but think its useful for more browser independent code.
I suggest using to create Ajax request and use ActiveXObject only in case you can't find XMLHttpRequest. Most browsers including IE8+ support this object so you have less code dependent on browsers. e.g. below copied from http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Use Developer tools Firefox and IE modern versions come with very useful developer tools. Check the network sections and then perform clicks on your web application that are expected to invoke the ajax call. The full details of the http request actually fired are available in the network section. It will show you how the browser sees the request.
use console.log This question talks about some logging support which is available in IE. The same is also available in firefox. You should be able to pin point where your code execution fails. Does IE9 support console.log, and is it a real function?
If I were to take a guess, I would say the URL that is used to connect to the server may be resulting in 404.
I can run this code in Android app (using PhoneGap adn jQuery Mobile) but not on desktop browsers.
It gives me a syntax error in firebug for this line =
var TicketList = eval("(" + ajax.responseText + ")");
Here is the code
// JScript source code
// ran on body load
function doJsStuff()
{
var ajax = AJAX();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
var TicketList = eval("(" + ajax.responseText + ")");
if (TicketList.ListCount > 0) {
document.getElementById("opencount").innerHTML = TicketList.ListCount +" Open Tickets";
for (Ticket in TicketList.Tickets) {
// add stuff to DOM
//AddTicketToList(TicketList.Tickets[Ticket]);
}
}
else {
document.getElementById("opencount").innerHTML = "All Tickets Reviewed";
DisplayNoresults();
}
}
}
ajax.open("GET", "http://website.com/ListTicketsRequest.ashx?PageNumber=1&PageSize=1&Status=Open", true);
ajax.send(null);
//document.addEventListener("deviceready", onDeviceReady, false);
//event to check for PhoneGap
//$('ul').listview('refresh');
$('#mtickets').page();
//showVars();
}
function AJAX()
{
var xmlHttp;
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
}
return xmlHttp;
}
**TicketList is a variable in the JSon that comes across like this=
{"Tickets" : [{"TicketID": "1054","Category": "N/A","SubmittedUserID": "bob.thebuilder","ShortDescription": "test question QID:16668","CreationDate": "2/16/2011 12:24:19 PM","TicketStatus": "Open","LongDescription": "Something is wrong with this question I know I hve the right answer but it keeps telling me I'm wrong"},{"TicketID": "1053","Category": "Mission Support","SubmittedUserID": "dave","ShortDescription": "Make courseware revisions","CreationDate": "2/16/2011 9:34:48 AM","TicketStatus": "Open","LongDescription": "Find help tickets generated by users for possible courseware update."}], "PageCount": "6", "ListCount": "11"}
Note about PhoneGap If you are trying to include phoengap functions in a place where the code may also be executed on in a browser make sure you only add the phone gap function with on "deviceready" or your browser will not render. Example:
function onload(){
//event to check for PhoneGap
document.addEventListener("deviceready", onDeviceReady, true);
}
...
function onDeviceReady()
{
// Now PhoneGap API ready
vibrate(90); // vib to ack pg ready
$("a").click(function(event){
vibrate(30); // add 30 sec vib to all links
});
}
My immediate response would be to use jQuery's getJSON method, since you're aready using jQuery. jQuery's AJAX provides a much broader base of browser compatibility. Also, every time you use eval(), a small baby somewhere cries.
var url = "http://website.com/ListTicketsRequest.ashx?PageNumber=1&PageSize=1&Status=Open";
$.getJSON(url ,function(TicketList){
if (TicketList.ListCount > 0) {
$("#opencount").html(TicketList.ListCount +" Open Tickets");
for (Ticket in TicketList.Tickets) {
...
}
} else {
$("#opencount").html("All Tickets Reviewed");
DisplayNoresults();
}
});
If this still doesn't work for you, ensure that the JSON being returned is valid. But please stick to this method, and don't use eval!!
SIMPLIFIED UPDATE
var url = "http://website.com/ListTicketsRequest.ashx?PageNumber=1&PageSize=1&Status=Open";
$.getJSON(url ,function(AnyNameYouWant){
alert(AnyNameYouWant.ListCount + " Open Tickets");
});
UPDATE USING 'DATA'
If your url becomes too long, you might begin to encounter problems. It is suggested to pass the url data via the data argument.
var url = "http://website.com/ListTicketsRequest.ashx";
var data = "PageNumber=1&PageSize=1&Status=Open";
$.getJSON(url, data, function(AnyNameYouWant){
alert(AnyNameYouWant.ListCount + " Open Tickets");
});
Looking at your code, it seems likely to me that the syntax error isn't in the code you posted, but instead is contained in the JSON object you're evaluating in ajax.responseText. Take a look at the data being returned by the AJAX request. Is it valid Javascript? Does the page you're calling return something different to desktop browsers vs mobile? Is there an error message where the JSON code should be?
Another possibility: Is your app running on website.com? If not, Firefox is probably blocking the XMLHttpRequest from functioning properly. Firefox 3 and below block cross-site AJAX requests. Firefox 3.5 seems to allow some exceptions.
I added ajax to a web application with 7 'select' tags, in which selecting an option would populate the following 'select' tags with the related information. And some of these tags can also show another set of radio buttons or checkboxes. In all, you can make more than 10 requests to the server until you get your desired product.
All work fine in major browsers except in IE, where the request to the server are limited to 7 times and then nothing happens any more until you refresh the browser to start again. I even tried to disable the cache, but still the same problem occured...
Why is IE doing this nonsense?
This is the ajax code doing the server-client talking:
function updateAvailableAttributes()
{
var xmlhttp;
var form = document.forms["orderDefinition"];
form.elements["formChangeRequest"].value = "true";
var processingMsgBox = $("#waitingMsgOverlay, #waitingMsgBox, #waitingMsg, #waitingMsgParag");
var map = document.getElementById("OrderMap");
if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6 and below
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
switch(xmlhttp.readyState)
{
case 1:
map.disableApplication();
processingMsgBox.show();
break;
case 4:
if(xmlhttp.status == 200)
{
$('#usercontent .sleeve .toprow').html(xmlhttp.responseText);
applyValidation();
browserScrollManagement();
$("#toolpanel").height($("#orderMap").height());
inputBtnHighlightSelection();
}
else
{
sessionTimedOut();
}
$("#toolpanel").height($("#orderMap").height());
map.enableApplication();
processingMsgBox.hide();
break;
}
}
var parameters = $("form#orderDefinition").serialize();
xmlhttp.open("POST", "ajax/possibleValues.html", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", parameters.length);
xmlhttp.setRequestHeader("Cache-Control", "no-cache");
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(parameters);
}
The HTTP spec recommends that simultaneous connections to a web server must be limited. The limit is lower for IE7 than it is for other browsers. Modify the registry to increase it for testing purposes only.
I have an old site that uses xml documents, and when I created it i had firefox and IE7 to test on, and it worked just great. Since then, IE8 appeared, and it seams that the site does no longer work properly.
This is the current code:
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
XMLHttpRequestObject.overrideMimeType("text/xml");
XMLHttpRequestObject.open("GET", "produse.xml", true);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4)
{
xmlDocument = XMLHttpRequestObject.responseXML;
removeWhitespace(xmlDocument);
}
}
XMLHttpRequestObject.send(null);
}
else if (window.ActiveXObject)
{
xmlDocument= new ActiveXObject("Microsoft.XMLDOM");
xmlDocument.async=false;
if (xmlDocument .readyState == 4)
{
xmlDocument.load("produse.xml");
}
}
But I get this error:
Message: Object doesn't support this property or method
Line: 19
Char: 3
Code: 0
which relates to:
XMLHttpRequestObject.overrideMimeType("text/xml");
What should I use instead?
This page shows what the differences are between firefox/ie/ie8 are and has some examples of how to do it:
http://www.javascriptkit.com/jsref/ajax.shtml
Mostly it says that IE8 does not support this method and you have to make sure your server is adding the proper header (text/xml) to the outgoing response.
It also has a link to http://www.javascriptkit.com/dhtmltutors/ajaxgetpost3.shtml that explains the common pitfalls and IE problems.
It says do:
if (mygetrequest.overrideMimeType)
mygetrequest.overrideMimeType('text/xml')
jQuery would be my choice. It is a lot faster and is cross browser supported and on a CDN.
You could strip that code down to just a few lines.
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
My project is running perfectly in Firefox, google chorme and IE 8.0
But it is not working on IE 6.0 or 7.0
I realized that it is given problem at window.location
I am placing my code over here to show what i am doing.
function GetEmailId()
{
var url="http://server.com/GetPostEmail.php";
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=statechangedLogin2;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
function statechangedLogin2()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.responseText=="Login again")
{
window.location="http://server.com/profile.html";
}
}
}
So this code is working fine in other browsers except for IE 6 and 7.
When i get the response from my AJAX in xmlhttp.responseText it should go over to profile.html rather in IE 6 and 7 it stays back on the original page where i was before that is qotw.html.
i think there is something wrong with the window.location, probably i need a different command here.
Also my GetXmlHttpObject looks like this.
function GetXmlHttpObject() {
//var xmlHttp = null;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Please if anyone can help me with this problem of mine.
Regards
zeeshan
Note: I again tried to decode my code and realized that in IE 6 and 7 my code never goes into statechangedLogin2(). And that is the reason my code is not working. But why is that happening as the code it working fine in other browsers even in IE8?
The location property is an object, the url is the href property in that object. Use this instead:
window.location.href="http://server.com/profile.html";