Javascript: xmlhttprequest randomly stuck at Ready State 1 - javascript

I've been working on a Windows gadget (meaning the "browser" is Internet Explorer) that queries specified subnet addresses for information. Now, it sometimes does this at a relatively quick pace (roughly every 5 seconds) and it works well enough. However, sometimes it will get stuck at ready state 1 and will just stay there forever. Whenever the gadget tries to redo the function for getting the xmlhttprequest and getting information from it it will stay at state 1. This is easily replicable when opening multiple instances of the gadget and then closing all but one of them. At that point, the one that's still open will almost always get stuck in this state. I feel like it might have something to do with them all accessing the same website, or it may just have to do with xmlhttprequests being stopped mid-transmission and that preventing another from working. Below is the relevant code.
//Reference to this for the inner function
var me = this;
var request = new XMLHttpRequest();
request.onreadystatechange = onReadyStateChange;
var url = this.url;
//Make the URL random to prevent being cached
url += ("&a=" + ((new Date()).getTime()));
Trace(DEBUG_COMM, "Sase.updateStatus url: " + url);
request.open("GET", url, true);
request.send(); // fire off the request, calls httpRequestReadyStateChange as things continue
Trace(DEBUG_COMM, "Request sent" + request.readyState);
function onReadyStateChange() {Trace(DEBUG_COMM, "Sase.httpRequestReadyStateChange: state=" + request.readyState);
if (4 == request.readyState) {
Trace(DEBUG_COMM, "Sase.httpRequestReadyStateChange: status=" + request.status);
if (request.status == 200) {
Trace(DEBUG_COMM, "retrieved html: " + request.responseText);
var results = request.responseText;
var resultsString = request.responseText.toString();
Trace(DEBUG_COMM, "results String: " + resultsString);
me.ParseStatusData(resultsString);
}
else {
//me.commError(request.status);
}
request = null;
}
}

Well it looks like I figured it out. I had a feeling it was an unresolved request, since it only happens when instances of it are closed (meaning that if one of them is closed while in communication with the server it stays in communication forever and no one else can access the server) and it appears that is the case. I made some modifications to the code in multiple areas and basically what it comes down to is when the gadget closes it makes sure to abort all of the requests. The requests are now instance variables (to allow for the aborting of them), but are still made new everytime they are needed.

For those who stumble across this and need a concrete code example, here you go.
I had the same problem and the solution was to re-use the XMLHttpRequest object, to ensure that any previous request was cancelled before initiating a new one. This won't work if you want to have multiple AJAX requests flying around but in my case triggering a new request meant that the last one was no longer needed.
All of the requests on my page went through the same XMLHttpRequest wrapper method which looked like this;
//Declare the XMLHttpRequest object to be re-used
var global_xHttpRequest = null;
function xmlHttpHandler(type, params, complete, postData) {
//Prevents an issue where previous requests get stuck and new ones then fail
if (global_xHttpRequest == null) {
global_xHttpRequest = new XMLHttpRequest();
} else {
global_xHttpRequest.abort();
}
//Parse out current URL
var baseURL = window.location.host;
var svc = "https://" + baseURL + "/processAction?";
var url = svc + params;
global_xHttpRequest.open(type, url, true);
//Add the callback
global_xHttpRequest.onreadystatechange = complete;
global_xHttpRequest.send(postData);
}
Which can be used like this:
xmlHttpHandler("GET", params, completeFnc);

Related

Validate if a file exists with JavaScript

Good day. I need to know if the file that I indicate in the path that I save in the text variable "t" as the slide variable "s" exist, in order to be able to show them or not through the view. I need to do this with only java script and local files, no server side. If possible, I would be very grateful to receive your help.
My current code in JavaScript:
function loadFiles(num) {
let s = 'assets/content/Compiladores/Slides/' + num + '.jpg';
let t = 'assets/content/Compiladores/Texts/' + num + '.txt';
document.slider.src = s;
$("#description").load(t);
$("#num").text(num);
}
You are never going to be able to reliably determine if a resource exists before doing something with it.
Note that this holds true even on a program that runs directly on a user's machine or a server. I don't normally mention other people's answers in my own, but the one advocating that you do that check (which per the link is problematic even in the best of circumstances) but across a client-server gap is sheer folly. Think about all the things that can go wrong:
The server could have moved the resource between the time you check and the time you set it.
Another thread or even entire other program could have acquired a lock on the resource causing your request to either take a lot of extra time or fail outright.
The user could be on a mobile connection and lost signal between the time of the check and the time of the resource request.
If you're passing an authentication token the user's session could expire between the time of the check and the time of the actual request.
The server could crash between the first request and the second.
The second request could be load-balanced to a different server than the first request.
The entire network for a major service could go down between the requests. Yes, really.
And so on.
Not to mention that for the happy path it involves a completely unnecessary extra round trip to the server before you start showing them the thing you wanted to show them in the first place!
The correct way to do this is to attempt to load the resource and then just handle the error if it fails:
function loadFiles(num) {
let s = 'assets/content/Compiladores/Slides/' + num + '.jpg';
let t = 'assets/content/Compiladores/Texts/' + num + '.txt';
document.slider.onerror = function () {
// deal with the resource not loading here
}
document.slider.src = s;
const desc = $("#description");
desc.on("error" function () {
// deal with the resource not loading here
});
desc.load(t);
$("#num").text(num);
}
try this for the file exists or not
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
function loadFiles(num) {
let s = 'assets/content/Compiladores/Slides/' + num + '.jpg';
let t = 'assets/content/Compiladores/Texts/' + num + '.txt';
document.slider.src = s;
if(UrlExists(s)){
$("#description").load(t);
}
if(UrlExists(t)){
$("#num").text(num);
}
}

Start workflow with javascript in Dynamics CRM 2016

I need to create a JS-Library which can run workflow using new WebApi for Dynamics CRM 2016:
https://msdn.microsoft.com/de-de/library/mt607689.aspx
I need to start workflow from my Code. (workflow should be “real-time”) and not asynchronously . I will build my function-call into Ribbon on form.
If anyone can help me I would be more then thankful, since I searched all internet and could not found how to solve this, except from above link where I found this method
https://msdn.microsoft.com/de-de/library/mt622404.aspx
but I'm not sure how to use this method? Once agin it has to be “real-time”
I found solutions such as:
-https: //processjs.codeplex.com/
but this does not work for me since it run workflow asynchronously. It has to be using Web API from link provided above. I think that this Web API works only for Microsoft Dynamics 2016
Now that we have actions there really isn't a need to start a workflow from javascript anymore. I used to do so using a javascript library that used the SOAP api but the web api actions are much easier to use. And an action is created in the same way as a workflow. To create an action go to create a workflow but instead of choosing workflow from the dropdown select action. You will end up with a form like this.
Remember the unique name and the entity which you will run it against. In this example I'll be using this workflow pictured which runs against a contact record.
From javascript I can now issue a POST to
https://<your-crm-server>/api/data/v8.0/contacts(<contact-id>)/Microsoft.Dynamics.CRM.wa_GetContactSyncStatus
Again this is an action targeting contacts and running the wa_GetContactSyncStatus action, change the values to what you need them to be. Also as a side note this is against a 2016 server anything later will have a different api version for you to use. Consult the developer resources page in your crm instance to figure out what your url for the web api is.
The action will run asynchronously and as long as your javascript request is set to be synchronous as well your request will return when the action is complete.
As another side note if you have your action call another workflow that isn't synchronous it will quite probably return before your asynchronous background workflow does.
I do this quite often: make the process an Action, they are designed specifically for this purpose (click a ribbon button and invoke what essentially is a workflow through WebAP; they also become custom messages for plugin registration, which is nice in some scenarios).
To have synchronous invocations all you need to do is to make the XmlHttpRequest synchronous by tweaking the open statement:
// 'xhr' is the XMLHttpRequest
xhr.open(http_method, request_url, false); <-- third parameter 'false' means sync request
I never use libraries to invoke the webapi so unfortunately I can't suggest any library-specific piece of code, but I would assume any decent library allows you to make XHR requests synchronous.
(Mandatory warning: sync requests are suboptimal and browsers do complain about them, I expect Chrome in particular to start breaking sync code at some point in the future).
Soap Request in JS :
function RunWorkflow(in_entitiId,in_workflowId,in_url) {
var _return = window.confirm('Do you want to execute workflow ?');
if (_return) {
var url = in_url;
var entityId =in_entitiId ;
var workflowId = in_workflowId;
var OrgServicePath = "/XRMServices/2011/Organization.svc/web";
url = url + OrgServicePath;
var request;
request = "<s:Envelope xmlns:s=\"http://schemas.xmlsoap.org/soap/envelope/\">" +
"<s:Body>" +
"<Execute xmlns=\"http://schemas.microsoft.com/xrm/2011/Contracts/Services\" xmlns:i=\"http://www.w3.org/2001/XMLSchema-instance\">" +
"<request i:type=\"b:ExecuteWorkflowRequest\" xmlns:a=\"http://schemas.microsoft.com/xrm/2011/Contracts\" xmlns:b=\"http://schemas.microsoft.com/crm/2011/Contracts\">" +
"<a:Parameters xmlns:c=\"http://schemas.datacontract.org/2004/07/System.Collections.Generic\">" +
"<a:KeyValuePairOfstringanyType>" +
"<c:key>EntityId</c:key>" +
"<c:value i:type=\"d:guid\" xmlns:d=\"http://schemas.microsoft.com/2003/10/Serialization/\">" + entityId + "</c:value>" +
"</a:KeyValuePairOfstringanyType>" +
"<a:KeyValuePairOfstringanyType>" +
"<c:key>WorkflowId</c:key>" +
"<c:value i:type=\"d:guid\" xmlns:d=\"http://schemas.microsoft.com/2003/10/Serialization/\">" + workflowId + "</c:value>" +
"</a:KeyValuePairOfstringanyType>" +
"</a:Parameters>" +
"<a:RequestId i:nil=\"true\" />" +
"<a:RequestName>ExecuteWorkflow</a:RequestName>" +
"</request>" +
"</Execute>" +
"</s:Body>" +
"</s:Envelope>";
var req = new XMLHttpRequest();
req.open("POST", url, true)
// Responses will return XML. It isn't possible to return JSON.
req.setRequestHeader("Accept", "application/xml, text/xml, */*");
req.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
req.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/xrm/2011/Contracts/Services/IOrganizationService/Execute");
req.onerror = displayError;
req.onreadystatechange = function () { assignResponse(req); };
req.send(request);
}
function displayError(e) {
alert(this.status);
}
}
function assignResponse(req) {
if (req.readyState == 4) {
if (req.status == 200) {
alert('successfully executed the workflow');
}
}
}
Example:
RunWorkflow(Xrm.Page.data.entity.getId(),"21E95262-5A36-46CA-B5B5-3F5AA539A9AF","https://org.dynamics.com");

Pass the value of an xhr onload function globally

In an app I'm creating I have the below XMLHttpRequest and I'm trying to pass the results of data inside the xhr.onload() into an array that's created within the same parent function.
var url = 'http://api.soundcloud.com/resolve.json?'+resource+'&'+CLIENT_ID;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function(){
var data = JSON.parse(xhr.responseText);
console.log(data.permalink_url);
};
xhr.send();
Below this I have the building blocks of an array and I'm trying to pass the results of data into the track string.
var metadata = {
id: val,
title: title,
url: posturl,
track: data.permalink_url
};
Everything I've tried thus far either returns undefined or function and now I'm totally out of ideas...
Ajax executes asynchronously (generally). This is vital to how Ajax works. What this means is that you can't count on the when the onload method will fire, or even if it will fire. What this means is that all code that depends on the xhr.responseText (result of the HTTP request) has to be done within the callback itself. For example:
xhr.onload = function () {
// This will execute second
doStuffWithData(JSON.parse(xhr.responseText));
}
// This will execute first
xhr.send();
var anything = anythingElse;
Like I said in the comment to my previous answer, you can change the one line to xhr.open('GET', url, false). It will make the request synchronous and will prevent everything else from running until the request completes. It will allow you to access xhr.responseText without waiting for an onload function.
CLIENT_ID = 'client_id=xxx';
var src = track,
match = src.match(/url=([^&]*)/),
resource = match[0],
stream = decodeURIComponent(match[1]) + '/stream/?' + '&' + CLIENT_ID;
var url = 'http://api.soundcloud.com/resolve.json?' + resource + '&' + CLIENT_ID;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send();
parsedResults.push({
title: title,
track: JSON.parse(xhr.responseText)
});
You can see it in action here. It appears to be broken in Chrome for some reason. Works in Firefox though. I assume it's something to do with the CORS + 302 redirect + synchronous request.
I've gone for Explosion Pills solution. The only problem I encounter is that the links that get crawled don't always come back in the same order each time I run the node app. Realistically they should return in the order that they're crawled in (which would be newest posts first, right?) However this isn't always the case?

Append something always to an XHR Request

I want to attach a JS Variable to every XHR request that will be issued from my single page web application.
What would be the best approach to achieve this? I don't want to establish special methods for sending with this attributes, as there may be third parties integrating with my application.
I thought about overriding the send method on the XHR Object but thats not considered good style either.
I can't use cookies due to requests being cross-domain.
Any better idea or approach to this?
Thank you!
-Alessandro
if you really want to extend the existing functionalities without adding any library-like function, you could solve this using monkey patching:
(function() {
var originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
var getParameter = 'foo=bar';
if(url.indexOf('?') === -1) {
url = url + '?' + getParameter;
} else {
url = url + '&' + getParameter;
}
console.log('you just got monkey-patched! url is now:', url);
originalOpen.call(this, method, url, async, user, password);
}
})();
var request = new XMLHttpRequest();
request.open('get', 'http://google.com');
see also this jsfiddle for a working example.
you can use the same technique when injecting stuff into the body of a request if you patch the send() function.
if you do, ensure you take care for the type of the data to be transmitted (see MDN). it doesn't make sense to append a parameter to a binary body ;)

Consecutive Ajax requests without jQuery/ JS library

I have an issue, mainly with IE.
I need to be able to handle n queries one after another. But If I simply call my function below in a for loop IE does some strange things (like loading only so many of the calls).
If I use an alert box it proves that the function gets all of the calls, and surprisingly IT WORKS!
My guess is that IE needs more time than other browsers, and the alert box does just that.
Here is my code:
var Ajax = function(all) {
this.xhr = new XMLHTTPREQUEST(); // Function returns xhr object/ activeX
this.uri = function(queries) { // Takes an object and formats query string
var qs = "", i = 0, len = size(queries);
for (value in queries) {
qs += value + "=" + queries[value];
if (++i <= len) { qs += "&"; }
}
return qs;
};
xhr.onreadystatechange = function() { // called when content is ready
if (this.readyState === 4) {
if (this.status === 200) {
all.success(this.responseText, all.params);
}
this.abort();
}
};
this.post = function() { // POST
xhr.open("POST", all.where, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(uri(all.queries));
};
this.get = function() { // GET
xhr.open("GET", all.where + "?" + uri(all.queries), true);
xhr.send();
};
if (this instanceof Ajax) {
return this.Ajax;
} else {
return new Ajax(all);
}
};
This function works perfectly for a single request, but how can I get it to work when called so many times within a loop?
I think the problem might be related to the 2 concurrent connections limit that most web browsers implement.
It looks like the latency of your web service to respond is making your AJAX requests overlap, which in turn is exceeding the 2 concurrent connections limit.
You may want to check out these articles regarding this limitation:
The Dreaded 2 Connection Limit
The Two HTTP Connection Limit Issue
Circumventing browser connection limits for fun and profit
This limit is also suggested in the HTTP spec: section 8.14 last paragraph, which is probably the main reason why most browsers impose it.
To work around this problem, you may want to consider the option of relaunching your AJAX request ONLY after a successful response from the previous AJAX call. This will prevent the overlap from happening. Consider the following example:
function autoUpdate () {
var ajaxConnection = new Ext.data.Connection();
ajaxConnection.request({
method: 'GET',
url: '/web-service/',
success: function (response) {
// Add your logic here for a successful AJAX response.
// ...
// ...
// Relaunch the autoUpdate() function in 100ms. (Could be less or more)
setTimeout(autoUpdate, 100);
}
}
}
This example uses ExtJS, but you could very easily use just XMLHttpRequest.
Given that the limit to a single domain is 2 concurrent connections in most browsers, it doesn't confer any speed advantage launching more than 2 concurrent requests. Launch 2 requests, and dequeue and launch another each time one completes.
I'd suggest throttling your requests so you only have a few (4?) outstanding at any given time. You're probably seeing the result of multiple requests being queued and timing out before your code can handle them all. Just a gess though. We have an ajax library that has built-in throttling and queues the requests so we only have 4 outstanding at any one time and don't see any problems. We routinely q lots per page.
Your code looks like it's put together using the constructor pattern. Are you invoking it with the new operator like var foo = new Ajax(...) in your calling code? Or are you just calling it directly like var foo = Ajax(...) ?
If the latter, you're likely overwriting state on your later calls. It looks like it's designed to be called to create an object, on which the get/post methods are called. This could be your problem if you're "calling it within a loop" as you say.

Categories

Resources