如何在一個用戶腳本中處理多個AJAX結果？

Question

我目前正在開發一個Greasemonkey腳本，使用Google翻譯API在Intranet應用中翻譯<textarea>字段。

但是有些文本太大而無法用一個請求進行翻譯。當試圖我得到這個錯誤：

請求實體太大

無論如何，我找到了一種方法來削減片段的文本，並在獨立的請求發送。在那裏變得棘手，我應該如何在原來的textareas中替換這些碎片，特別是在正確的位置。

嘗試幾種方法沒有任何成功後，我插入佔位符的文本區域，對應於有需要翻譯的文本片段：

{1} 
{2} 
... 

但現在在我XHR的成功回調，我有用翻譯文本替換佔位符。問題是，我的XHR在for循環中，遍歷包含原始文本片段的表格，當請求完成時，循環很長時間，我不知道如何獲得翻譯。

下面的代碼：

//Array text[] contains the fragments of original text 
var translated_text = []; 
var l = text.length; 
for(var i = 0; i < l; i++) 
{ 
var fullurl = apiurl+encodeURIComponent(text[i]); 
GM_xmlhttpRequest({ 
    method: 'GET', 
    url: fullurl, 
    headers: 
    { 
     'User-agent': 'Mozilla/5.0 (compatible) Greasemonkey', 
     'Accept': 'application/atom+xml,application/xml,text/xml', 
    }, 
    onload: function(responseDetails) 
    { 
     var destination = "{"+i+"}"; 
     if(responseDetails.status == 200) 
     { 
      var data = $.parseJSON(responseDetails.responseText); 
      translated_text[i] = data.responseData.translatedText.replace(/&quot;/g,"\"").replace(/&#39;/g,"\"").replace(/&gt;/g,">"); 
      textarea.text(textarea.text().replace("{"+i+"}",translated_text[i])); 
     } 
     else 
     { 
      alert('Request Failed : '+responseDetails.status+"\nError : "+responseDetails.statusText); 
     } 
    } 
}); 
} 

PS：我不能使用jQuery的AJAX方法，因爲這是一個跨域請求，因此新$.when功能不能被（可惜）

Answer 1

更新：用的Greasemonkey和Tampermonkey的新版本，現在可以通a context^Doc：

GM_xmlhttpRequest ({ 
    method: 'GET', 
    url:  fullurl, 
    context: i, 
    headers: { 
       'User-agent': 'Mozilla/5.0 (compatible) Greasemonkey', 
       'Accept': 'application/atom+xml,application/xml,text/xml', 
      }, 
    onload: function (responseDetails) { 
       var destination = "{" + responseDetails.context + "}"; // context is `i` 
       if (responseDetails.status == 200) { 
        var data   = $.parseJSON (responseDetails.responseText); 
        translated_text[i] = data.responseData.translatedText.replace (/"/g,"\"") 
             .replace (/'/g,"\"").replace (/>/g,">") 
             ; 
        textarea.text (textarea.text().replace ("{"+i+"}",translated_text[i])); 
       } 
       else { 
        alert (
         'Request Failed : '+responseDetails.status+"\nError : " 
         + responseDetails.statusText 
        ); 
       } 
      } 
}); 

---

對於其他/較老的平臺，使用的i值，則需要將其包裹在JavaScript closure中。一種方式做這樣做是：

(function (i) { 
    GM_xmlhttpRequest ({ 
     method: 'GET', 
     url:  fullurl, 
     headers: { 
        'User-agent': 'Mozilla/5.0 (compatible) Greasemonkey', 
        'Accept': 'application/atom+xml,application/xml,text/xml', 
       }, 
     onload: function (responseDetails) { 
        var destination = "{"+i+"}"; 
        if (responseDetails.status == 200) { 
         var data   = $.parseJSON (responseDetails.responseText); 
         translated_text[i] = data.responseData.translatedText.replace (/"/g,"\"") 
             .replace (/'/g,"\"").replace (/>/g,">") 
             ; 
         textarea.text (textarea.text().replace ("{"+i+"}",translated_text[i])); 
        } 
        else { 
         alert (
         'Request Failed : '+responseDetails.status+"\nError : " 
         + responseDetails.statusText 
        ); 
        } 
       } 
    }); 
}) (i); 

Answer 2

至於這裏使用據我所知，你可以使用jQuery做跨域請求是這樣的...

function pass_ajax(url,text_to_translate){ 
    $.ajax({ 
     type: 'GET', 
     url: url, 
     crossDomain: true, 
     data: text_to_translate, 
     dataType: 'json', 
     success: function(data){ 
     req = data; //here you can sanitize the data before concatenating 
     }, 
     complete: function(xhr,textStatus){ 
     translated_text += req; 
     } 
    }); 

的「跨域：真正的財產是新的jQuery 1.5。另外，我認爲你可以利用成功並完成，並在文本返回時連接文本，並將其分配給具有外部範圍的變量。

Answer 3

您可以考慮使用此API：

Includes : Translate