Skip to main content

Processing ASP MVC Web API Requests in Multi-threaded JS Web Worker

Unlike an asynchronous Ajax call, HTML5 Web workers provide an opportunity to run a Multi-threaded JavaScript code in modern browsers that support them. Each worker spawns an isolated thread with dedicated JavaScript Event Loop, Stack and Heap memory. For example a regular Ajax Call to MVC Web API service call goes through the following asynchronous call cycle.

The JavaScript Event Loop in this case could be interrupted by events that are being executed on the UI; for instance, a "window.alert", could possibly stop all scripts on the page from executing until a user responds.

Replacing the Ajax Call with HTML5 web worker provides a great way to run long running scripts in separate threads so that asynchronous code execution is not interrupted by UI events. Here is the a JavaScript worker implementation of the same MVC Web API call using a JavaScript web worker.

Despite the advantages of using a web worker, implementing one requires working with some constraints. The worker runs in a separate thread and isolated scope, it doesn't have access to global JS objects including "window" and DOM elements, asynchronous calls would also have to be called via plain "XMLHttpRequest" rather than libraries such as jQuery.ajax.

The following simple utility replaces a regular Ajax call with web worker to make use of Multi-threaded JS implementation in HTML5.


// WebWorkerAjax:: Utility function to process ajax requests with HTML5 Web Worker 
// Request params {URL:"", PostData: {}} e.g. {URL: '/Service/LongProcess', JSON.stringify({ input: "Test" }))
// Adapted from
var WebWorkerAjax = {
    processRequest: function (request) {
        var req = this.createXMLHTTPObject();
        var isPost = (request.PostData) ? true : false; // Use Post if postData is passed
        if (!req) return;
        var method = isPost ? "POST" : "GET";, request.URL, true);
        if (isPost) {
            req.setRequestHeader("Content-type", "application/json; charset=utf-8");

        //Send request
        if (req.readyState == 4) return;
        req.onreadystatechange = function () {
            if (req.readyState != 4) return;
            if (req.status == 200) {
        req.onerror = function (e) {

    finishRequest: function (data) {
    createXMLHTTPObject: function () {
        var xmlhttp = false;
        for (var i = 0; i < this.XMLHttpFactories().length; i++) {
            try {
                xmlhttp = this.XMLHttpFactories()[i]();
            catch (e) {
        return xmlhttp;
    XMLHttpFactories: function () {
        return [
            function () { return new XMLHttpRequest() },
            function () { return new ActiveXObject("Msxml2.XMLHTTP") },
            function () { return new ActiveXObject("Msxml3.XMLHTTP") },
            function () { return new ActiveXObject("Microsoft.XMLHTTP") }
this.onmessage = function (e) { WebWorkerAjax.processRequest(; }

Using the Worker Script

I found the method useful in processing long running scripts such a data from live HTML5 camera and audio streams. The script takes a URL of an MVC web API call with parameters and returns results from the Web API.

To use the script.

1- Save the JS script (above) as "WebWorkerAjax.js"
2- Start the web worker as follows

var worker = new Worker("/scripts/WebWorkerAjax.js");
    var postData = JSON.stringify({parameter object});
    var request = { URL: "Absolute URL Path to Web API", PostData: postData };
    worker.onmessage = function (e) {
        // Worker responded with data

You can download the "WebWorkerAjax.js" code along with a sample MVC application on GitHub.


Great article! I guess this will get rid of the javascript warnings about XmlHttpRequest on the main thread, which are pretty anoying for me :-)

Popular posts from this blog

Turning WCF Service into .asmx for debugging

Even though .asmx web services are becoming dinosaurs of the new .NET world of WCF. I missed the simplicity of debugging code right in visual studio without: Creating a client to consume WCF service Attaching w3p.exe process and Adding break points  One quick solution: Turn WCF service into .asmx service with few lines of code, debug your code with asmx, and turn .asmx off during deployment.  Detail steps: 1- First take your WCF class and add WebService attribute to it Code Snippet /// <summary> /// Dual mode with .ASMX and WCF /// </summary> [ WebService (Namespace = "" )] 2- Then add WebMethod attribute to a function you want to expose in .asmx Code Snippet [ WebMethod ] public List < PageController . Page > DualFunction() { 3- Take the .svc file from your solution - copy and rename the copied file [YourOriginalWCFFile.asmx]. Open up the copied file and rename "ServiceHost&qu

ASP.MVC Real-time data processing with Sharded RavenDB and SignalR

In a move that some call "Radical” The Weather Channel recently swapped their enterprise Oracle and MySql Databases for NoSQL  MongoDB .  One word that could describe the rapid adoption of NoSQL databases compared to relational once is “ sharding .” Unlike relational databases, NoSQL systems allow developers to be active participants in the data storage process by providing a way to create logic (sharding strategy) that outlines how and where data could be stored, resulting in better scalability and improved performance. RavenDB , an open source NoSQL system for .NET that is easy to deploy (both as a standalone/embedded system) for an ASP.MVC application. SingalR is a tool that one can use in a .NET environment to add real-time client-server processing in an application. SignalR allows a developer to broadcast messages to all (or some) clients from a centralized client and/or server call. I was looking for a quick data-sharding example with embedded RavenDB that I can