Using Blob WebWorker to send Synchronous XMLHttpRequest - javascript

First off, I am very new to web services, web workers, and XMLHttpRequests, so please bear with me. Also, there are a lot of stipulations in my project, so solutions to "just do it this way" may not be viable.
So I have a web service set up to receive calls from an XMLHttpRequest in javascript, and it does this synchronously. This works fine, but it ties up the UI thread, and I would like to have a loading spinner run while making the requests to the server. Due to one issue, I can't have the program access external scripts on the web, so I am using a Blob to mask the "file://" preface.
I am also using an inline webworker to accomplish this. Now I'm getting to my actual issue. Spawning the webworker is fine, and I can create and send the XMLHttpRequest, but as soon as I call "send" everything exits. It will run no lines of code after this.
Here's some code:
Called from JS:
var blob = new Blob([document.querySelector('#getWorker').textContent]);
var blobUrl = window.URL.createObjectURL(blob);
var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function (e) {
alert(e.data);
}
worker.postMessage();
The worker:
var bigString = "";
var invocation = new XMLHttpRequest();
var url = 'http://<ipAddress>/<serviceName>/Service.asmx/<method>';
if (invocation) {
invocation.open('GET', url, false);
invocation.send(); //*****EXITS AFTER THIS LINE*****//
if (invocation.status == 200) {
var responseText = invocation.responseText.replace(/(\r\n|\n|\r)/gm, "");
responseText = responseText.replace('<?xml version="1.0" encoding="utf-8"?>', '');
responseText = responseText.replace('<string xmlns="http://tempuri.org/">', '');
responseText = responseText.replace('</string>', '');
postMessage("Success");
//updateTable(responseText);
} else {
postMessage("Fail");
//alert("Could not connect to database. Check your internet connection.");
}
var c = 0;
var b = 1;
}
var q=1;
The debugger will just end after the "invocation.send()" line. No error, no status, no nothing. And that's where I'm lost.
Any insight would be greatly appreciated. Also, this exact code works when it is not in a WebWorker, so there's likely something about them that I do not understand.
Thanks in advance!

Chrome problem. Silent fail if COR request is blocked. Firefox console shows more information on the error.

Related

Write to file from Chrome console

Is it possible to have Chrome write the console output to a local file?
If not; Can I make an external call from the console to my server and save it there?
I know this can be done with devtool extended but I would rather do it from console.
You can't write into a file in a local computer. It will lead to great security flaw.
Best way is to save the data in server.
The following may work, but need some server side work.
(function(console){
var url = "domain.com/../userdata/"
console.save = function(data, filename){
var ajaxreq = new XMLHttpRequest();
ajaxreq.open("POST", url+filename, false);
ajaxreq.onreadystatechange = function ()
{
if(ajaxreq.readyState === 4)
{
if(ajaxreq.status === 200)
{
alert(ajaxreq.responseText);
}
}
}
ajaxreq.send(data);
}
})(console);

Send ~HI command to Zebra printer and receive the response in javascript clientside

I'm facing an issue and I cannot find a way to overcome it. If I send a ZPL command to print a label via XMLHttpRequest() like this:
var request = new XMLHttpRequest();
var method = "POST";
var async = true;
var zpl = "^XA...^XZ";
var urlForPrint = "http://192.168.0.242/printer/pstprnt";
var urlForHi = "http://192.168.0.242:9100";
request.onload = function () {
var status = request.status; // HTTP response status, e.g., 200 for "200 OK"
var data = request.responseText; // Returned data, e.g., an HTML document.
}
request.open(method, urlForPrint, async);
request.overrideMimeType('text/plain; charset=unicode');
request.send(zpl);
it all works fine (prints the label). But before trying to print anything, I need to send the command ~HI, which, according to the documentation, should return a string with a number of properties, related to the printer at this IP.
The problem: I cannot receive this string.
var requestForPrinter = new XMLHttpRequest();
requestForPrinter.onerror = function (e) {
//...
}
requestForPrinter.onload = function (e) {
// I suppose that response message should arrive here, as a parameter of e
//...
}
requestForPrinter.open(method, urlForHi, async);
requestForPrinter.send("~HI");
If I use PuTTY, the printer returns the message and it is displayed in the PuTTY console.
After a lot of research, I realized that PuTTY communicates with the printer via TCP/IP, while I'm trying to communicate with it via HTTP. So I have now got a clear idea what is the problem. But how to solve it?
A colleague of mine suggested creating a socket. So I tried WebSocket, TCPSocket, socket.IO with no success. Also, they seem not to be supported by all popular browsers and I couldn't manage to test them because of errors, which appeared in the browser's console. Tried to fix them with no luck.
Any help will be appreciated! Thank you!
edit: I found this. So my second question is: I am just starting to learn node.js and find out its capabilites. I read somewhere, that It is a server-side js library. Can I use it only client-side? I mean, they have to be able to print labels using the printer in their LAN and to be able to work even if the Internet connection drops (to ask the server for data only once, at the beginning, when it loads some data into a JqGrid). So communicating with a server is not an option here.

reading server file with javascript

I have a html page using javascript that gives the user the option to read and use his own text files from his PC. But I want to have an example file on the server that the user can open via a click on a button.
I have no idea what is the best way to open a server file. I googled a bit. (I'm new to html and javascript, so maybe my understanding of the following is incorrect!). I found that javascript is client based and it is not very straightforward to open a server file. It looks like it is easiest to use an iframe (?).
So I'm trying (first test is simply to open it onload of the webpage) the following. With kgr.bss on the same directory on the server as my html page:
<IFRAME SRC="kgr.bss" ID="myframe" onLoad="readFile();"> </IFRAME>
and (with file_inhoud, lines defined elsewhere)
function readFile() {
func="readFile=";
debug2("0");
var x=document.getElementById("myframe");
debug2("1");
var doc = x.contentDocument ? x.contentDocument : (x.contentWindow.document || x.document);
debug2("1a"+doc);
var file_inhoud=doc.document.body;
debug2("2:");
lines = file_inhoud.split("\n");
debug2("3");
fileloaded();
debug2("4");
}
Debug function shows:
readFile=0//readFile=1//readFile=1a[object HTMLDocument]//
So statement that stops the program is:
var file_inhoud=doc.document.body;
What is wrong? What is correct (or best) way to read this file?
Note: I see that the file is read and displayed in the frame.
Thanks!
Your best bet, since the file is on your server is to retrieve it via "ajax". This stands for Asynchronous JavaScript And XML, but the XML part is completely optional, it can be used with all sorts of content types (including plain text). (For that matter, the asynchronous part is optional as well, but it's best to stick with that.)
Here's a basic example of requesting text file data using ajax:
function getFileFromServer(url, doneCallback) {
var xhr;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open("GET", url, true);
xhr.send();
function handleStateChange() {
if (xhr.readyState === 4) {
doneCallback(xhr.status == 200 ? xhr.responseText : null);
}
}
}
You'd call that like this:
getFileFromServer("path/to/file", function(text) {
if (text === null) {
// An error occurred
}
else {
// `text` is the file text
}
});
However, the above is somewhat simplified. It would work with modern browsers, but not some older ones, where you have to work around some issues.
Update: You said in a comment below that you're using jQuery. If so, you can use its ajax function and get the benefit of jQuery's workarounds for some browser inconsistencies:
$.ajax({
type: "GET",
url: "path/to/file",
success: function(text) {
// `text` is the file text
},
error: function() {
// An error occurred
}
});
Side note:
I found that javascript is client based...
No. This is a myth. JavaScript is just a programming language. It can be used in browsers, on servers, on your workstation, etc. In fact, JavaScript was originally developed for server-side use.
These days, the most common use (and your use-case) is indeed in web browsers, client-side, but JavaScript is not limited to the client in the general case. And it's having a major resurgence on the server and elsewhere, in fact.
The usual way to retrieve a text file (or any other server side resource) is to use AJAX. Here is an example of how you could alert the contents of a text file:
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){alert(xhr.responseText);};
xhr.open("GET","kgr.bss"); //assuming kgr.bss is plaintext
xhr.send();
The problem with your ultimate goal however is that it has traditionally not been possible to use javascript to access the client file system. However, the new HTML5 file API is changing this. You can read up on it here.

Internet Explorer CrossDomain Request doesnt work correctly and MS doesnt give onerror reasoning

I added variables in the request as per the Microsoft standard below, var openRetVal and var sendRetVal... Odd thing is, that they dont get anything returned in them, so did Microsoft lie in their own documentation?
I was working on a ajax request, and like usual, IE is a difficult specimen to work with. I found that instead of doing a AJAX request, i can do an XDR. My code in chrome works, so i know the destination server is working and on a successful request does what is suppose to happen. Below is my code segment for an XDR.
if ($.browser.msie && window.XDomainRequest) {
var xdr = new XDomainRequest();
//var webstring = location.protocol +"//"+ location.host +"/" + WEBSERVICE_URL + "/test";
//WEBSERVICE_URL = "webservices/FormDesigner.svc";
var webstring = WEBSERVICE_URL + "/test";
var openRetVal = xdr.open("GET", webstring); //added this var as it supposidly gets a return value from the function call.
xdr.onload = function () {
var JSON = $.parseJSON(xdr.responseText);
if (JSON == null || typeof (JSON) == 'undefined') {
JSON = $.parseJSON(data.firstChild.textContent);
}
//below is my onsuccess call which is called by both successes for IE and NON-IE processes allowing all stuff to be piped into 1 call.
ajax_success(JSON);
};
xdr.ontimeout = function () {
alert("XDR Error. Timeout");
}
xdr.onerror = function () {
alert("XDR Error. Unable to do a Cross Domain Server Request.");
};
var sentRetVal = xdr.send(); //added this var as the function is suppose to return success or error as per microsoft.
}
It always returns onerror which is NOT what i am aiming for, naturally. I am pinging something within the same domain for the moment for testing purposes which is why there is not other stuff. Like i said, it works with other browsers so far... Is there an improper formatting I am unaware of? There is no data submitted as well with this test request.
If you are already using jQuery, just use jQuery for ALL BROWSERS, then you should not have any issues in IE.

Using JavaScript to perform a GET request without AJAX

Out of curiosity, I'm wondering about the best (easiest, fastest, shortest, etc; make your pick) way to perform a GET request in JavaScript without using AJAX or any external libraries.
It must work cross-browser and it's not allowed to distort the hosting web page visually or affect it's functionality in any way.
I don't care about headers in the request, just the url-part. I also don't care about the result of the request. I just want the server to do something as a side effect when it receives this request, so firing it is all that matters. If your solution requires the servers to return something in particular, that's ok as well.
I'll post my own suggestion as a possible answer, but I would love it if someone could find a better way!
Have you tried using an Image object? Something like:
var req = new Image();
req.onload = function() {
// Probably not required if you're only interested in
// making the request and don't need a callback function
}
req.src = 'http://example.com/foo/bar';
function GET(url) {
var head = document.getElementsByTagName('head')[0];
var n = document.createElement('script');
n.src = url;
n.type = 'text/javascript';
n.onload = function() { // this is not really mandatory, but removes the tag when finished.
head.removeChild(n);
};
head.appendChild(n);
}
I would go with Pekka idea and use hidden iframe, the advantage is that no further parsing will be done: for image, the browser will try to parse the result as image, for dynamically creating script tag the browser will try to parse the results as JavaScript code.. iframe is "hit and run", the browser doesn't care what's in there.
Changing your own solution a bit:
function GET(url) {
var oFrame = document.getElementById("MyAjaxFrame");
if (!oFrame) {
oFrame = document.createElement("iframe");
oFrame.style.display = "none";
oFrame.id = "MyAjaxFrame";
document.body.appendChild(oFrame);
}
oFrame.src = url;
}

Categories