Trying to keep track of number of outstanding AJAX requests in firefox - javascript

I am using Selenium to test a web application and am not allowed to modify the application's javascript code. I am trying to track the number of outstanding AJAX requests by using GreaseMonkey to override XMLHttpRequest.send. The new send() will basically wrap what was set as the onreadystatechange callback, check the readyState, incrementing or decrementing the counter as appropriate, and calling the original callback function.
The problem that I'm having appears to be a privilege issue because if I just browse to a page in a normal firefox browser, open firebug and paste in the following code, it seems to work fine:
document.ajax_outstanding = 0;
if (typeof XMLHttpRequest.prototype.oldsend != 'function') {
XMLHttpRequest.prototype.oldsend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
console.log('in new send');
console.log('this.onreadystatechange = ' + this.onreadystatechange);
this.oldonreadystatechange = this.onreadystatechange;
this.onreadystatechange = function() {
if (this.readyState == 2) {
/* LOADED */
document.ajax_outstanding++;
console.log('set ajax_outstanding to ' + document.ajax_outstanding);
}
this.oldonreadystatechange.handleEvent.apply(this, arguments);
if (this.readyState == 4) {
/* COMPLETED */
document.ajax_outstanding--;
console.log('set ajax_outstanding to ' + document.ajax_outstanding);
}
};
this.oldsend.apply(this, arguments);
};
}
Now if I use a slightly modified version of that snippet from within a GreaseMonkey user script like so:
unsafeWindow.document.ajax_outstanding = 0;
if (typeof unsafeWindow.XMLHttpRequest.prototype.oldsend != 'function') {
unsafeWindow.XMLHttpRequest.prototype.oldsend = unsafeWindow.XMLHttpRequest.prototype.send;
unsafeWindow.XMLHttpRequest.prototype.send = function() {
GM_log('in new send');
GM_log('this.onreadystatechange = ' + this.onreadystatechange);
this.oldonreadystatechange = this.onreadystatechange;
this.onreadystatechange = function() {
if (this.readyState == 2) {
/* LOADED */
unsafeWindow.document.ajax_outstanding++;
GM_log('set ajax_outstanding to ' + unsafeWindow.document.ajax_outstanding);
}
this.oldonreadystatechange.handleEvent.apply(this, arguments);
if (this.readyState == 4) {
/* COMPLETED */
unsafeWindow.document.ajax_outstanding--;
GM_log('set ajax_outstanding to ' + unsafeWindow.document.ajax_outstanding);
}
};
this.oldsend.apply(this, arguments);
};
}
and I go to a page, do something that causes an AJAX request, I get the following message in the javascript error console:
http://www.blah.com/gmscripts/overrides: in new send
uncaught exception: [Exception... "Illegal value" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: file:///tmp/customProfileDir41e7266f56734c97a2ca02b1f7f528e1/extensions/%7Be4a8a97b-f2ed-450b-b12d-ee082ba24781%7D/components/greasemonkey.js :: anonymous :: line 372" data: no]
So it appears to be throwing the exception when trying to access this.onreadystatechange
Presumably, this is due to the sandboxed environment.
Any help would be greatly appreciated. I am not tied to this solution, so any other suggestions for doing what I need are welcome. It's just that I've tried several others and this seems to be the most promising. The requirement is that I need to make sure that the counter gets to 0 after the readyState goes to 4 and the onreadystatechange callback has finished execution.

I've made something myself: http://jsfiddle.net/rudiedirkx/skp28agx/ (updated 22 Jan 2015)
The script (should run before anything else):
(function(xhr) {
xhr.active = 0;
var pt = xhr.prototype;
var _send = pt.send;
pt.send = function() {
xhr.active++;
this.addEventListener('readystatechange', function(e) {
if ( this.readyState == 4 ) {
setTimeout(function() {
xhr.active--;
}, 1);
}
});
_send.apply(this, arguments);
}
})(XMLHttpRequest);
And the jsFiddle's test script:
window.onload = function() {
var btn = document.querySelector('button'),
active = btn.querySelector('span');
btn.onclick = function() {
// jQuery for easy ajax. `delay` is a jsFiddle argument
// to keep some requests active longer.
jQuery.post('/echo/json/', {
delay: Math.random() * 3,
});
};
updateActive();
function updateActive() {
active.textContent = XMLHttpRequest.active;
requestAnimationFrame(updateActive);
}
};
It updates the counter in the button every animation frame (~ 60 times per second), separate from the AJAX requests. Whatever you do, however fast and much you click it, the counter should always end up at 0 after a few seconds.

I ended up using the following:
unsafeWindow.document.ajax_outstanding = 0;
if (typeof unsafeWindow.XMLHttpRequest.prototype.oldsend != 'function') {
unsafeWindow.XMLHttpRequest.prototype.oldsend = unsafeWindow.XMLHttpRequest.prototype.send;
unsafeWindow.XMLHttpRequest.prototype.send = function() {
unsafeWindow.XMLHttpRequest.prototype.oldsend.apply(this, arguments);
this.addEventListener('readystatechange', function() {
if (this.readyState == 2) {
/* LOADED */
unsafeWindow.document.ajax_outstanding++;
console.log('set ajax_outstanding to ' + unsafeWindow.document.ajax_outstanding);
} else if (this.readyState == 4) {
/* COMPLETED */
unsafeWindow.document.ajax_outstanding--;
console.log('set ajax_outstanding to ' + unsafeWindow.document.ajax_outstanding);
}
}, false);
};
}

Related

Wait for a URL to download all the contents of a webpage

I have to download HTML Content of a URL. The problem is that the URL takes some time to load , so I have to wait/ timeout for sometime ( ~10 - 15 secs) before logging the content. To achieve this, I tried 2 approaches, but all of them fail to produce the desired result.
First approach is the use of setTimeOut:
var page = require('webpage').create()
page.open(url, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
window.setTimeout(function () {
console.log(page.content);
phantom.exit();
}, 10000);
}
});
But setTimeout fails to set the specified timeout. No matter what value I put as Timeout , it times out after a fixed amount of time which is less than the page load time.
The second approach was the use of OnLoadFinished:
var page = new WebPage(), testindex = 0, loadInProgress = false;
page.onConsoleMessage = function(msg) {
console.log(msg)
};
page.onLoadStarted = function() {
loadInProgress = true;
console.log("load started");
};
page.onLoadFinished = function() {
loadInProgress = false;
console.log("load finished");
};
var steps = [
function() {
page.open("url");
},
function() {
console.log(page.content);
}
];
interval = setInterval(function() {
if (!loadInProgress && typeof steps[testindex] == "function") {
console.log("step " + (testindex + 1));
steps[testindex]();
testindex++;
}
if (typeof steps[testindex] != "function") {
console.log("test complete!");
phantom.exit();
}
}, 5000);
In this approach, OnLoadFinished fires before the full page is loaded.
I am new to phantomJS , so the above two solutions are also from stack overflow. Is there something I am missing that is particular to my case ? Is there any other way to achieve the same result? ( I tried Waitfor construct also, but with no success).
Ok, you problem is to load Content after some timeout. If you are looking for DOM element, you have to use known to you WaitFor function. But if you just want to get page content after timeout, it is so much easier. So lets start.
var page = require("webpage").create();
var address = "http://someadress.com/somepath/somearticle";
var timeout = 10*1000;
page.open(address);
function getContent() {
return page.evaluate(function() {
return document.body.innerHTML;
});
}
page.onLoadFinished = function () {
setTimeout(function() {
console.log(getContent());
}, timeout);
}
Note! If you are waiting for large content in HTML body, use setInterval function, to wait for document.body.innerHTML more than you want.

Console.log Internet explorer 8 particular case [duplicate]

This question already has answers here:
'console' is undefined error for Internet Explorer
(21 answers)
Closed 8 years ago.
Hi i found the problem in other stackoverflow questions , the problem is i have tried all solutions that should work, but i think im not understanding where and how to implement that fixes..
My problem is console.log in internet explorer throws an error as undefined. I search and found
Console undefined issue in IE8
Internet Explorer: "console is not defined" Error
I try to wrap the code inside the function using a condition like 'if(window.console) '
this dosent work i even try most of the recommended contitions no one work, try to insert the snnipet in the code so it worked, but it dont..
Im obviously not understanding how and where to put does fixes. Sorry for my ignorance. but im in a hurry, need to someone points at my stupidity
Thanks
var jcount = 0;
var scroll_count = 0;
var playflag=1;
var ajxcallimiter=0;
var hp_totalcount=parseInt($("#hp_totalcount").val());
if(hp_totalcount<5)
hp_totalcount=5;
function hlist_slider()
{
if($(".items img").eq(jcount).length != 0 && playflag==1){
firedstyle();
console.log(jcount);
$(".items img").eq(jcount).trigger("mouseover");
if(jcount % 5 === 0 && jcount!=0)
{
console.log('scroll');
api.next();
scroll_count++;
}
jcount++; // add to the counter
if(jcount>hp_totalcount)
{
if(playflag==1)
{
jcount = 0; //reset counter
while(scroll_count--)
{
api.prev();
}scroll_count=1;
}
}
}
else if(jcount<hp_totalcount && playflag==1)
{
playflag=0;homepagelist_nextclick();playflag=1;
}
else
{
if(playflag==1)
{
jcount = 0; //reset counter
while(scroll_count--)
{
api.prev();
}
scroll_count=1;
}
}
}
$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });
hlist_slider();
setInterval(hlist_slider,10000);
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
function firedstyle()
{
$(".items img").on("hover",function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("t_", "");
var tbtit = $(this).siblings('.tbtit').text();
var tbdesc = $(this).siblings('.tbdescp').text();
var tbtitgoto = $(this).attr("data");
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").stop(true, true).fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
wrap.find(".img-info h4").text(tbtit);
wrap.find(".img-info p").text( tbdesc);
wrap.find("a").attr("href", tbtitgoto);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
}).filter(":first").trigger("mouseover");
}
function toggle(el){
if(el.className!="play")
{
playflag=0;
el.className="play";
el.src='images/play.png';
//api.pause();
}
else if(el.className=="play")
{
playflag=1;
el.className="pause";
el.src='images/pause.png';
// api.play();
}
return false;
}
function hp_nxtclick()
{
homepagelist_nextclick();
console.log('scroll');
if(api.next()){
scroll_count++;}
}
function homepagelist_nextclick()
{
var hp_totalcount=parseInt($("#hp_totalcount").val());
var hp_count=parseInt($("#hp_count").val());
if(hp_totalcount==0 || hp_count >=hp_totalcount)
return ;
if(ajxcallimiter==1)
return;
else
ajxcallimiter=1;
$.ajax(
{
type: "GET",
url: "<?php echo $makeurl."index/homepageslide/";?>"+hp_count,
success: function(msg)
{
hp_count=parseInt($("#hp_count").val())+parseInt(5);
$("#hp_count").val(hp_count);
$("#hp_list").append(msg);ajxcallimiter=0;
}
});
}
The problem is that the console (developer tool panel) needs to be active on page-load*.
Hit F12, reload your page, and you should get what you're looking for.
*Just to clarify: The developer panel needs to be open prior to window.console being called/tested. I'm assuming your code is being run on-load.
This should work:
if(!window.console || !window.console.log) window.console = {log: function(){}};
This way you will be able to use console.log without producing errors.
In my code, I put this snippet at the top - before any other javascript that might try to use the console loads:
if (window.console == null) {
window.console = {
log: function() {},
warn: function() {},
info: function() {},
error: function() {}
};
}
Or in coffeescript:
if not window.console?
window.console = {
log: () ->
warn: () ->
info: () ->
error: () ->
}
This provides a dummy console for browsers that don't include one.

xhr.status and xhr.readyState is 0

I'm working with HTML5 multiple file uploader. For some purpose I'm queuing the requests into a JavaScript array and I'm trying with two approaches here, one is, sending all the requests by a loop using a for loop and the next approach is like starting the next request after the previous request got finished. Here is the code,
function processUploads(i)
{
if(typeof(i)=="undefined")
return;
if(i==0)
{
for(i=0;i<4;i++)
{
xhrQ[i].open("POST",FUurl,true);
xhrQ[i].send(fdQ[i]);
xhrQ[i].onreadystatechange = function() {
if (xhrQ[i].readyState == 4 && xhrQ[i].status == 200) {
uploadComplete(xhrQ[i],i);
}
}
}
}
else
{
xhrQ[i].open("POST",FUurl,true);
xhrQ[i].send(fdQ[i]);
xhrQ[i].onreadystatechange = function() {
if (xhrQ[i].readyState == 4 && xhrQ[i].status == 200) {
uploadComplete(xhrQ[i],i);
}
}
}
}
function uploadComplete(xhr,i)
{
//processUploads(i+1);
var responseJSON = eval('(' + xhr.responseText + ')');
var upldrID = responseJSON.data.queueId;
var fileProgElem = $("#file_content").find("div[file-count="+upldrID+"]");
fileProgElem.attr("upload","finished");
fileProgElem.find("input[id=asset_id]").val(responseJSON.data.asset_id);
if(typeof(responseJSON)=="undefined") {
return;
}
$("#bar"+upldrID).css("width: 100%");
$("#progress_text"+upldrID).addClass("hide");
$("#progress_bar"+upldrID).html("Upload Complete!");
var pagename = $("#pagename").attr('value');
var cover_art = "<img src='"+responseJSON.data.thumb_location+"' alt='"+$.trim($("#file_name"+upldrID).html())+"' />";
$("#cover_art"+upldrID).html(cover_art);
//Hide the cross icon and enable the save
var action_divs = '<div id="done'+upldrID+'" class="hide enable">'
+'<a id="delete_file_'+upldrID+'" onclick="saveWorkspaceFileDetails(\''+responseJSON.data.project_id+'\',\''+responseJSON.data.asset_id+'\',\''+upldrID+'\',\''+responseJSON.data.file_name+'\',\''+responseJSON.data.size+'\',\'delete\',\''+pagename+'\')">'
+'<i class="tl-icon-20-close-gray"></i>'
+'</a>'
+'</div>';
$("#cancel_upload"+upldrID).append(action_divs);
$("#progress_cancel"+upldrID).addClass("hide").removeClass("show");
$("#done"+upldrID).addClass("show").removeClass("hide");
//To show the post and cancel button
$("#submitFileUpload").removeClass("hide").addClass("show");
//Updating the title with the default value of file_name
var file_title = $.trim($("#file[file-count='"+upldrID+"']").find("#file_title").val());
if (file_title == "" && file_title != undefined){
$("#file[file-count='"+upldrID+"']").find("#file_title").val(responseJSON.data.file_name);
}
//For other category we need to enable the dropdown
if(responseJSON.data.category_id=='999')
{
$("#select_category"+upldrID).removeClass("hide").addClass("show");
}
//totSelFiles is a number of selected files that i sets as a global variable
if(i<(totSelFiles-1))
{
processUploads(i+1);
}
else
return;
}
But the problem is i'm getting the readyState and status as 0 in the if loop. But the file is getting uploaded to the server and the else condition is also working well if i only enable that block. So what could be the problem. I'm greatly confused. Any help would be greatly appreciate.
The problem is related to the closure you create with the anonymous function you use for onreadystatechange. It will have access to the value of i, but not from the time of creation of the closure but rather from the time of its execution. At that point of time i is always 4 and xhrQ[i] will not refer to the correct object. Use this instead
xhrQ[i].onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
}
}
The problem is that you want to continue with the index i inside the uploadComplete() function. For this you might need to create another inner closure with an immediately executing function that will create a local copy of the current index.
xhrQ[i].onreadystatechange = (function(_innerI) {
var that = this;
return function() {
if(that.readyState == 4 && that.status == 200) {
uploadComplete(that, _innerI);
}
}
})(i);

Show GIF-Animation after page request in Firefox

I have a simple throbber, that is automatically shown when an ajax request lasts longer than 3 seconds. This throbber consists mainly of an animated GIF-Image.
Now, I want to use the same throbber also for regular links, meaning that when I click a link and it takes the server more than 3 seconds to respond, the throbber is shown.
Unfortunately, it seems that firefox is unable to play the animation, while it is "reloading" the webpage. The javascript is called and fades the throbber correctly in, but is it not spinning.
How can I make firefox play the GIF-Animation while it is loading?
This is the function:
// Throbber manager
function Throbber() { }
Throbber.prototype = {
image : null,
requests : 0,
requestOpened : function(event) {
if (this.requests == 0) {
this.image.src = 'throbber.gif';
}
this.requests++;
},
requestLoaded : function(event) {
this.requests--;
if (this.requests == 0) {
this.image.src = 'throbber_stopped.gif';
}
},
clicked : function() {
request_manager.abortAll();
},
// Called on window load
attach : function() {
this.image = document.getElementById('throbber');
if (this.image && request_manager) {
request_manager.addEventListener('open', [this, this.requestOpened]);
request_manager.addEventListener('load', [this, this.requestLoaded]);
request_manager.addEventListener('abort', [this, this.requestLoaded]);
this.image.onclick = function() { Throbber.prototype.clicked.apply(throbber, arguments); };
}
}
}
var throbber = new Throbber();
window.addEventListener('load', function() { Throbber.prototype.attach.apply(throbber, arguments); }, false);
function SimpleDemo() { }
SimpleDemo.prototype = {
// The AjaxRequest object
request : null,
// Setup and send the request
run : function() {
this.request = request_manager.createAjaxRequest();
this.request.get = {
one : 1,
two : 2
};
this.request.addEventListener('load', [this, this.ran]);
this.request.open('GET', 'xml.php');
var req = requests[this.request.id];
return setTimeout(function() { req.send(); }, 5000);
},
// Triggered when the response returns
ran : function(event) {
alert(event.request.xhr.responseText);
}
}
If you use jQuery:
$("#throbber").show();
/* Your AJAX calls */
$("#throbber").hide();
Check to see when the DOM is ready before calling all your Ajax stuff.
using Prototype:
document.observe("dom:loaded", function() {
//your code
});
using jQuery:
$(document).ready(function() {
//your code
});
Or Refer this: http://plugins.jquery.com/project/throbber
I just tried my old code and found out that this issue does not exist anymore in Firefox 10.0.2

"Object doesn't support..." IE8 stops at declaring ordinary variable

I'm trying to make a form send its data through AJAX and cancel the event sans jQuery, just for learning native JavaScript, which can never be bad, I figured. Anyway, this code is returning the error:
"Object doesn't support this property or method"
in IE8 at the line where I declare variables s and r in the send() function. I figured the problem must actually be elsewhere? Code works in both Firefox and Chrome, returning no errors. Ideas?
// Function to serialize form
function serialize() {
var a = document.getElementsByTagName('input'), b = '';
for (i = 0; i < a.length; i++) {
b += a[i].name + '=' + a[i].value + '&';
}
return b.substring(0, b.length - 1);
}
// Function to execute when user submits form
function send(evt) {
// Prevent the page from reloading
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
// Declare DOM variables for quick access
var s = document.getElementsByClassName('skicka')[0], r = document.getElementById('return');
// Hides the submit button and return text
s.style.visibility = 'hidden';
r.style.visibility = 'hidden';
// Initialize and send data and request to login.php
var xhr = new XMLHttpRequest();
xhr.open('POST', 'login.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(serialize());
// Check for return value from login.php
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.responseText == true) {
// If response if true, reload page
window.location.reload(true);
} else {
// If response is false, reset form and show response
s.style.visibility = 'visible';
r.style.visibility = 'visible';
r.innerHTML = xhr.responseText;
}
}
};
return false;
}
// Declare event listeners
if (window.addEventListener) {
window.addEventListener('load', function() {
document.forms[0].addEventListener('submit', send, false);
}, false);
} else {
window.attachEvent('onload', function() {
document.forms[0].attachEvent('onsubmit', function() {
send(window.event);
});
});
}
IE8 does not support .getElementsByClassName(). See the Ultimate GetElementsByClassName for a pure JavaScript implementation that will work in IE.

Categories