JSONP GETレスポンスをHTMLにレンダリングする方法

Question

私は複数のホストにGETリクエストを送信しようとしました。 以下のコードはxhttpリクエストで正常に動作しますが、の場合jsonpデータタイプ（Access-Control-Allow-Headersエラーを避けるため）リクエストを送信するために別のjsonタイプを使用する必要があります。通常の関数です。 下のコードでは、ajaxリクエストを使用していましたが、responseHandler関数を使用してレスポンスステータスを表示することはできませんでした。 このコードを修正する方法をお手伝いしてください。

var hosts = ['http://www.bla.com:8082/bla','http://www.bla2.com:8082/bla','http://www.bla3.com:8082/bla', 'http://www.bla4.com:8082/bla']; //Added 


var ledTypes = { 
    green: "<img id='logo' src='green.png' height='30' width='30'>", 
    red: "<img id='logo' src='red.png' height='30' width='30'>", 
    yellow: "<img id='logo' src='yellow.png' height='30' width='30'>" 
}; 

var hostIndx = 0; 

function collectionChecking() { 

    for (hostIndx < hosts.length; hostIndx++;) { 
      $.ajax({ 
       url: hosts[hostIndx], 
       dataType: "jsonp", 
       jsonpCallback: "_stdout", 
       cache: false, 
       crossDomain: true, 
       timeout: 10000, 
       success: handleLedResponse(data, textStatus, jqXHR, hostIndx) { alert(data); }, 
       error: handleLedResponse(jqXHR, textStatus, errorThrown, hostIndx) { alert(errorThrown); } 
      }) 
    } 
} 

function handleLedResponse(textStatus, hostIndx) { 
    var curSpan = document.getElementById('col_host_' + hostIndx); 
    if (textStatus === 200 || textStatus === 204) { 
     curSpan.innerHTML = ledTypes.green; 
    } else if (textStatus === 500 || textStatus === 404) { 
     curSpan.innerHTML = ledTypes.red; 
    } else if (textStatus === 300 || textStatus === 301 || textStatus === 302) { 
     curSpan.innerHTML = ledTypes.yellow; 
    } 

このスクリプトを実行するトリガー：

<li><a href="#tabs-2" onclick="collectionChecking()">Services status</a></li> 

応答は、同様

Answer 1

このコードを試してみてのindex.htmlにレンダリングされています。

for(; hostIndx < hosts.length; hostIndx++) { 最初の問題はforループ構文です。あなたのループは機能しませんでした。ループ内でconsole.log(hostIndx)を試してください。

function collectionChecking() { 

    for(; hostIndx < hosts.length; hostIndx++) { 

      $.ajax({ 
       url: hosts[hostIndx], 
       dataType: "jsonp", 
       jsonpCallback: "_stdout", 
       cache: false, 
       crossDomain: true, 
       timeout: 10000, 
       success: function(data, textStatus, jqXHR) { handleLedResponse(textStatus, hostIndx) }, 
        error: function(data, textStatus, jqXHR) { handleLedResponse(textStatus, hostIndx); } 
      }) 
    } 
}