html - Web サービスへの XMLHttpRequest が Web ワーカーで機能しない

Question

以下のコードは、メインの JavaScript から呼び出された場合は完全に実行されますが、Web ワーカーでは実行されません。

  function getSpecData(detailLvl, startWeek, endWeek, mkt) {
        var params = { "detailLvl": detailLvl, "startWeek": startWeek, "endWeek": endWeek, "mkt": mkt };
        var xhr;
        var url = "WebServices/wsSProgress.asmx/GetSpecProgressTable";
        try {
            xhr = new XMLHttpRequest();
            xhr.open('POST', url, false);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = JSON.parse(xhr.responseText);
                    $('#specProgTbl').html(result.d);
                }
            };
            xhr.send(JSON.stringify(params));
        } catch (e) {
            alert('Error occured in XMLHttpRequest: ' + xhr.statusText + '  ReadyState: ' + xhr.readyState + ' Status:' + xhr.status);
        }
    }

Web ワーカーコードの唯一の違いは、postMessage を使用して結果を返すことです。

<script id="worker" type="javascript/worker">

    self.onmessage = function (e) {
        var data = e.data;
        //self.postMessage(data.mkt + " " + data.detailLvl + " " + data.refreshMin + " " + data.isRotate +" "+data.weekNum);

        var startWeek=data.weekNum-3;
        var endWeek=data.weekNum;
        self.postMessage(getSpecData(1,startWeek,endWeek,data.mkt));

    }; 
    function getSpecData(detailLvl, startWeek, endWeek, mkt) {
        self.postMessage('DetailLvl '+detailLvl+' Start '+startWeek+' End '+endWeek+' Mkt '+mkt); 
        var params = { "detailLvl": detailLvl, "startWeek": startWeek, "endWeek": endWeek, "mkt": mkt };
        var xhr;
        var url = "WebServices/wsSpecProgress.asmx/GetSpecProgressTable";
        try {
            xhr = new XMLHttpRequest();
            xhr.open('POST', url, false);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = JSON.parse(xhr.responseText);
                    self.postMessage(result.d);
                }
            }; 
            xhr.send(JSON.stringify(params));
        } catch (e) {
            self.postMessage('Error occured in XMLHttpRequest: ' + xhr.statusText + '  ReadyState: ' + xhr.readyState + ' Status:' + xhr.status);
        }
    }

</script>

ワーカーを開始するメインの JavaScript:

  $(function initialize() {
        $('#options').hide();
        $("[id$='btnViewOpt']").val("View Options");
        var mkt = $("[id$='lstMkt'] :selected").text();
        var detailLvl = $("[id$='lstDetailLvl'] :selected").val();
        var refreshMin = $("[id$='lstRefresh'] :selected").val();
        var isRotate = $("[id$='chkRotate']").is(":checked");

        var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
        window.URL = window.URL || window.webkitURL;
        if (BlobBuilder) {
            var bb = new BlobBuilder();
            bb.append(document.querySelector('#worker').textContent);
            wUrl = window.URL.createObjectURL(bb.getBlob());
            worker = new Worker(wUrl);
            alert("Web worker started");
            worker.addEventListener('message', dispMsg, false);
            worker.addEventListener('error', onError, false);
            worker.postMessage({ 'mkt': mkt, 'detailLvl': detailLvl, 'refreshMin': refreshMin, 'isRotate': isRotate, 'weekNum': getCurrentWeekNumber() }); // Start the worker.
        }
        else
            alert("Your browser does not support web workers");
 });

  function onError(e) {
        alert('ERROR in WebWorker: Line ' + e.lineno + ' in ' + e.filename + ': ' + e.message);
    }
    function dispMsg(e) {
        alert("Message from worker: " + e.data);
        $('#specProgTbl').html(e.data);

    }

Web ワーカーが起動し、パラメーターは正しいが、result.d は undefinedです。キャッチには statusText はなく、readyState=0とstatus=0だけです。

これは何の魔術ですか？？？

メインの Javascript から呼び出された場合のUPDATE

xhr.responseTextは次のとおりです。

   {"d":"\u003ctable border=\u00271px\u0027 cellpadding=\u00275\u0027 cellspacing=\u00270\u0027\u003e\u003ctr height=\u002710\u0027 \u003e\u003cth height=\u002710\u0027 colspan=\u002712\u0027\u003ePAS\u003c/th\u003e\u003c/tr\u003e\u003ctr height=\u002710\u0027 \u003e\u003ctd align=\u0027center\u0027 width=\u0027200\u0027\u003eManufacturer\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027150\u0027\u003eMake\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eNoSpec W22\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eComplete% W22\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eNoSpec W23\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eComplete% W23\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eNoSpec W24\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eComplete% W24\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eNoSpec W25\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eComplete% W25\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eNoSpec W26\u003c/td\u003e\u003ctd align=\u0027center\u0027 width=\u0027100\u0027\u003eComplete% W26\u003c/td\u003e\u003c/tr\u003e\u003ctr height=\u002710\u0027 \u003e\u003ctd align=\u0027left\u0027  class=\u0027default\u0027  height=\u002710\u0027 \u003eAAD\u003c/td\u003e\u003ctd align=\u0027left\u0027  class=\u0027default\u0027  height=\u002710\u0027 \u003eCHERY\u003c/td\u003e\u003ctd align=\u0027left\u0027 class=\u0027noSpecSame\u0027  height=\u002710px\u0027 \u003e0\u003c/td\u003e\u003ctd align=\u0027center\u0027  class=\u0027percSame\u0027  height=\u002710\u0027 \u003e\u003cdiv style=\u0027background-image: linear-gradient(left , rgba(8,68,250,1) 18%, rgba(240,241,250,1) 92%, rgba(240,241,250,0) 8%);background-image: -o-linear-gradient(left , rgba(8,68,250,1) 18%, rgba(240,241,250,1) 92%, rgba(240,241,250,0) 8%);background-image: -moz-linear-gradient(left , rgba(8,68,250,1) 18%, rgba(240,241,250,1) 92%, rgba(240,241,250,0) 8%);background-image: -webkit-linear-gradient(left , rgba(8,68,250,1) 18%, rgba(240,241,250,1) 92%, rgba(240,241,250,0) 8%);background-image: -ms-linear-gradient(left , rgba(8,68,250,1) 18%, rgba(169,199,245,1) 92%, rgba(240,241,250,0) 8%);background-image: -webkit-gradient(linear,left bottom,right bottom,color-stop(0.18, rgba(8,68,250,1)),color-stop(0.92, rgba(240,241,250,1)),color-stop(1, rgba(240,241,250,0)));\u0027\u003e92\u003c/div\u003e\u003c/td\u003e\u003ctd align=\u0027left\u0027 class=\u0027noSpecSame\u0027  height=\u002710\u0027 \u003e0\u003c/td\u003e\u003ctd align=\u0027center\u0027  class=\u0027percSame\u0027 height=\u002710\u0027 \u003e\u003cdiv style=\u0027background-image: linear-gradient(left , rgba(8,68,250,1) 18%, rgba(240,241,250,1..............."}

score 9 · Accepted Answer

わかりました、私はここで本当に愚かでした。を取得していた理由

 DOMException: INVALID_STATE_ERR

これは、 W3 のドキュメントによると、 xhr.readyStateの値が無効な場合、xhr.status属性が例外をスローするためです。

    Exceptions on retrieval
    DOMException  INVALID_STATE_ERR exception SHOULD be raised if this attribute is accessed when readyState has an inappropriate value.

呼び出している Web サービスへのフルパスを指定しなかったため、無効なxhr.readyStateがありました。Webworker は「その場で」作成された別のBlob ファイルで実行されるため、Web サービスへのフルパスが必要です。とにかく、以下は、Webサービス呼び出しスクリプトが機能するWebwokerコードです。

<script id="worker" type="javascript/worker">

    self.onmessage = function (e) {
        var param = e.data;
        var url="http://localhost:54071/WebServices/wsSProgress.asmx/GetSpecProgressTable";
        var data=getSpecData(param.detailLvl,param.startWeek,param.endWeek,param.mkt,url)
        self.postMessage(data);
    }; 
    function getSpecData(detailLvl, startWeek, endWeek, mkt, url) {
        var params = { "detailLvl": detailLvl, "startWeek": startWeek, "endWeek": endWeek, "mkt": mkt };
        var xhr;
        try {
            xhr = new XMLHttpRequest();
            xhr.open('POST', url, false);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = JSON.parse(xhr.responseText);
                    self.postMessage(result.d);
                }
            }; 
            xhr.send(JSON.stringify(params));
        } catch (e) {
            self.postMessage('Error occured in XMLHttpRequest: ' + xhr.statusText + '  ReadyState: ' + xhr.readyState + ' Status:' + xhr.status + ' E: ' +e+' Msg:'+e.message);
        }
    }
    </script>

score 2 · Accepted Answer

コメントから、あなたの例外は次のとおりです。

DOMException: INVALID_STATE_ERR

これは、親にポストバックされるメッセージの内容をシリアル化できないことを意味します。

私の経験では、これは通常、オブジェクトに存在する循環参照または関数が原因です。サーバーの応答を知らなくても、これは私ができる限りのことです。

html - Web サービスへの XMLHttpRequest が Web ワーカーで機能しない

2 に答える 2

Related

Reference