Microsoft Azure 翻译 AJAX API 不工作答案

【问题标题】：Microsoft Azure Translator AJAX API not workingMicrosoft Azure 翻译 AJAX API 不工作
【发布时间】：2012-07-26 22:56:29
【问题描述】：

我正在尝试将 MS Bing 翻译器的当前版本转换为新的 Azure 版本。

我按照新文档中的描述创建了一个访问令牌，尽管 Microsoft 提供的以下示例（针对 Azure）可以正常工作：

function translate() {

  var from = "en", to = "es", text = "hello world";
  var s = document.createElement("script");
  s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate" +
            "?appId=" + settings.appID +
            "&from=" + encodeURIComponent(from) +
            "&to=" + encodeURIComponent(to) +
            "&text=" + encodeURIComponent(text) +
            "&oncomplete=mycallback";
  document.body.appendChild(s);
}

function mycallback(response) {
  alert(response); 
}

我想将上面的代码转换为 jQuery 调用。

我从以前的版本修改了一个类似的 jQuery ajax 调用，但发出了parseerror-jQuery17206897480448242277_1343343577741 was not called：

  function jqueryTranslate() {
    var p = {};
    p.appid = settings.appID;
    p.to = "es";
    p.from = "en";
    p.text = "Goodbye Cruel World";
    p.contentType = 'text/html';
    $.ajax({
      url: 'http://api.microsofttranslator.com/V2/Ajax.svc/Translate',
      data: p,
      dataType: 'jsonp',
      jsonp: 'oncomplete',
      complete: function (request, status) {
      },
      success: function (result, status) {
        alert(result);
      },
      error: function (a, b, c) {
        alert(b + '-' + c);
      }
    });
  }

我非常感谢和理解出了什么问题，所以 TIA 为您提供时间。

【问题讨论】：

标签： jquery azure language-translation microsoft-translator

【解决方案1】：

要将 Bing 翻译器与身份验证令牌一起使用，您首先需要一个服务器端脚本，例如这个 PHP 脚本 token.php。它将每 9 分钟从您网页上的 javascript 调用一次。

<?php
$ClientID="your client id";
$ClientSecret="your client secret";

$ClientSecret = urlencode ($ClientSecret);
$ClientID = urlencode($ClientID);

// Get a 10-minute access token for Microsoft Translator API.
$url = "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
$postParams = "grant_type=client_credentials&client_id=$ClientID&client_secret=$ClientSecret&scope=http://api.microsofttranslator.com";

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_POSTFIELDS, $postParams);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);  
$rsp = curl_exec($ch); 

print $rsp;
?>

然后这个html页面会显示一个从英文翻译成法文的两框界面。

注意：这篇文章的早期版本缺少前 5 行，因此无法加载 jQuery。（对不起@db1。）工作脚本在这里在线：

http://www.johndimm.com/bingtrans/

<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <script language="javascript">
    var g_token = '';

    function onLoad() {
      // Get an access token now.  Good for 10 minutes.
      getToken();
      // Get a new one every 9 minutes.
      setInterval(getToken, 9 * 60 * 1000);
    }

    function getToken() {
      var requestStr = "/bingtrans/token.php";

      $.ajax({
        url: requestStr,
        type: "GET",
        cache: true,
        dataType: 'json',
        success: function (data) {
          g_token = data.access_token;
        }
      });
    }

    function translate(text, from, to) {
      var p = new Object;
      p.text = text;
      p.from = from;
      p.to = to;
      p.oncomplete = 'ajaxTranslateCallback'; // <-- a major puzzle solved.  Who would have guessed you register the jsonp callback as oncomplete?
      p.appId = "Bearer " + g_token; // <-- another major puzzle.  Instead of using the header, we stuff the token into the deprecated appId.
      var requestStr = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate";

      window.ajaxTranslateCallback = function (response) {
        // Display translated text in the right textarea.
        $("#target").text(response);
      }

      $.ajax({
        url: requestStr,
        type: "GET",
        data: p,
        dataType: 'jsonp',
        cache: true
      });
    }


    function translateSourceTarget() {
      // Translate the text typed by the user into the left textarea.
      var src = $("#source").val();
      translate(src, "en", "fr");
    }
  </script>
  <style>
    #source,
    #target {
      float: left;
      width: 400px;
      height: 50px;
      padding: 10px;
      margin: 10px;
      border: 1px solid black;
    }
    #translateButton {
      float: left;
      margin: 10px;
      height: 50px;
    }
  </style>
</head>

<body onload="onLoad();">

  <textarea id="source">Text typed here will be translated.</textarea>
  <button id="translateButton" onclick="translateSourceTarget();">Translate English to French</button>
  <textarea id="target"></textarea>

</body>

</html>

【讨论】：

【解决方案2】：

另一个问题是 Bing AppID 对翻译器进行身份验证的机制已被弃用。

Microsoft 有一篇博文详细介绍了在 Windows Azure Marketplace 中访问 Translator 的过程：

http://blogs.msdn.com/b/translation/p/gettingstarted1.aspx

这里有一个 ASP.NET 中的示例： http://blogs.msdn.com/b/translation/p/gettingstarted2.aspx

建议（至少）将用于获取令牌服务器端的代码放在 ASP.NET、PHP、Node 或类似的东西中，这样您的客户端 ID 和客户端密码就不会暴露。

获得访问令牌后，需要将其写入服务调用的 HTTP 标头中。 ASP.NET 示例表明，它应该相对容易适应 JQuery。

【讨论】：

我确实在 C# 中实现了新的访问令牌机制。您提供的第二个链接似乎是一个值得追求的策略。谢谢！

【解决方案3】：

您能否尝试在您的调用中添加一个 jsonpCallback 并为其定义一个新函数。当我将您的 jQuery 代码与 Microsoft 的示例进行比较时，这似乎是缺少的。

  function jqueryTranslate() {
    var p = {};
    p.appid = settings.appID;
    p.to = "es";
    p.from = "en";
    p.text = "Goodbye Cruel World";
    p.contentType = 'text/html';
    $.ajax({
      url: 'http://api.microsofttranslator.com/V2/Ajax.svc/Translate',
      data: p,
      dataType: 'jsonp',
      jsonp: 'oncomplete',
      jsonpCallback: 'onCompleteCallback',   <------------------ THIS LINE
      complete: function (request, status) {
      },
      success: function (result, status) {
        alert(result);
      },
      error: function (a, b, c) {
        alert(b + '-' + c);
      }
    });
  }

  function onCompleteCallback(response) {    <------------------- THIS FUNCTION
    alert('callback!'); 
  }

【讨论】：

【解决方案4】：

尝试了 John Dimm 提交的脚本，但它对我不起作用。返回一个空白框和状态 304 Not Modified。相反，我在这个链接http://blogs.msdn.com/b/translation/p/phptranslator.aspx 的 msdn 博客上使用了 PHP 和 Microsoft 翻译代码，它运行良好

【讨论】：