如何在用户脚本中处理多个AJAX结果?

时间:2011-03-04 09:23:09

标签: javascript loops xmlhttprequest greasemonkey tampermonkey

我目前正在使用Google Translation API开发Greasemonkey脚本来翻译Intranet应用中的<textarea>字段。

但是有些文本太大而无法只用一个请求进行翻译。我在尝试时遇到此错误:

  

请求实体太大

无论如何,我找到了一种方法来剪切片段中的文本,并将它们分别发送给我们。如果它变得棘手,我应该如何在原始文本中替换这些片段,特别是在正确的位置。

在尝试了几种方法但没有成功之后,我在textarea中插入了占位符,对应于必须翻译的文本片段:

{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功能(遗憾的是)

3 个答案:

答案 0 :(得分:2)

更新:使用较新版本的Greasemonkey和Tampermonkey,您现在可以通过contextDoc

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 (/&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
                   );
                }
             }
} );

对于其他/较旧的平台,要使用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 (/&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
                      );
                   }
                }
   } );
} ) (i);

答案 1 :(得分:0)

据我所知,你可以使用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;
      }
    });

'crossDomain:true'属性是jQuery 1.5的新特性。此外,我认为您可以利用成功并完成并在文本返回时将其连接起来,并将其分配给具有外部范围的变量。

答案 2 :(得分:0)

您可以考虑使用此API:

Includes : Translate