通過XMLHttpRequest使用來自PHP的Javascript的gettext

Question

我有一個主要用PHP編寫的應用程序。 翻譯是使用gettext（）完成的。

有一個小的JavaScript部分，它還包含要翻譯的字符串。 我使用XMLHttpRequest編寫了這個簡單但有效的方法：

function gettext(string_to_translate) {
    var filename = get_php_script_folder() + 'gettext.php?string_to_translate=' + string_to_translate;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", filename, false);
    xmlhttp.send();
    if (xmlhttp.status === 200) {
        var translated_string = xmlhttp.responseText;
        return translated_string;
    } else {
        console.log("Error while translating " + string_to_translate + " Status " + xmlhttp.status);
        return string_to_translate; //Just give the original string.
    }

}

php文件也很簡單：

require_once '../../default.php'; //configures gettext, session management, etc.
//TODO: support for ngettext might be added.
$string_to_translate = filter_input(INPUT_GET, 'string_to_translate', FILTER_SANITIZE_STRING);
$translated_string = gettext($string_to_translate);
echo $translated_string;

在我剛剛調用的JavaScript中：

var input_box_form_default_reason = gettext("Vacation");
document.getElementById('input_box_form_reason').value = input_box_form_default_reason;

如果我同步調用此函數[xmlhttp.open（“GET”，filename，false）;] Firefox / Chrome警告我：

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

因此，雖然這種方法有效，但它可能隨時停止使用。

但是如果我運行代碼async [xmlhttp.open（“GET”，filename，true）;]，那么下一行將在結果出現之前執行。 該值將是未定義的。

在這種情況下使異步XMLHttpRequest工作是否可行？ 我應該堅持同步獲取值，直到寫入一些聰明的API？ 我應該用PHP編寫我的JS文件嗎？ （我希望不是。）

PS：

1. 我不使用像jQuery這樣的任何框架。 這是一個“宗教”的事情。 我希望自己完全理解並維護整個代碼庫。

2. 我讀了以下問題，但沒有回答我的問題：

   • 像PHP中的gettext一樣在JavaScript中進行翻譯？

   • PHP中的PHP Gettext，不在extern JS文件中工作

   • 在Poedit中提取javascript gettext？

   • 如何將gettext字典中的術語提供給JavaScript？

   • 帶有gettext和.po文件的javascript i18n （斷開的鏈接）

Answer 1

是的，你需要一個回調！

function gettext(string_to_translate, obj, callback)
... //your original xmlhttprequest
xmlhttp.callback = callback;, add a callback to the xmlhttp

//set the readystate event that listens to changes in the ajax call
xmlhttp.onreadystatechange = function()
{
    //target found and request complete
    if (this.status === 200 && this.readyState == 4) {
        //send result to the callback function
        this.callback(obj, this.responseText);
    } else {
        console.log("Error while translating " + string_to_translate + " Status " + xmlhttp.status);
        this.callback(obj, string_to_translate);
    }
}

//callback function specific for this case.
function setValue(obj, value)
{
   obj.value = value;
}

稱之為：

gettext("Vacation", document.getElementById('input_box_form_reason'), setValue);

---

具有回調的擴展ajax函數

 function ajax(url, method, json, callBack) { //it supports get and post //returns parsed JSON, when json is set to true. | json accessible via this.JSON in the callBack //a callback can be attached where the this refers to the xmlHTTP //supply an url like you would in a get request: http://www.example.com/page.php?query=1 //start the request with xmlDoc.fire. var xmlDoc = new XMLHttpRequest xmlDoc.JSON = json ? true : false; xmlDoc.error = true; xmlDoc.errorMessage = ""; xmlDoc.errorObj = {"error" : xmlDoc.error, "object" : "XMLHttpRequest", "message" : xmlDoc.errorMessage, "url" : url, "sync" : true, "method" : (method ? "POST" : "GET")}; xmlDoc.url = url xmlDoc.method = method ? "post" : "get"; xmlDoc.preserveWhiteSpace = true; if (method == "post") { xmlDoc.pUrl = url; xmlDoc.pArg = ""; if (url.match(/\\?/)) //we need to filter out the arguments since the are send seperately. { var splitted = url.split(/\\?/); xmlDoc.pUrl = splitted[0]; xmlDoc.pArg = ""; for (var i = 1; i < splitted.length; i++) { xmlDoc.pArg += splitted[i]; //prevent additional questionmarks from being splitted. } } xmlDoc.open.apply(xmlDoc, ["post", xmlDoc.pUrl , true]); //set up the connection xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded ; charset=UTF-8"); } else { //get request, no special action need, just pass the url this.xmlDoc.open("get", url, true); //true for async } xmlDoc.onreadystatechange = readyStateXML.bind(xmlDoc, callBack); xmlDoc.setRequestHeader("Pragma", "no-cache"); xmlDoc.setRequestHeader("Cache-Control", "no-cache, must-revalidate"); xmlDoc.fire = fireXmlRequest; //set up fire function. return xmlDoc; } function fireXmlRequest() { if (this.method == "post") { this.send(this.pArg); //post } else { this.send(null); //get } } function readyStateXML(callBack) { if (this.readyState == 4) { //request completed, now check the returned data //We always assume that a request fails. if (this.errorMessage == "XML Not loaded." || this.errorMessage == "") { this.error = false; //set error to false, request succeeded. this.errorObj.error = false; if (!this.responseXML && !this.JSON) { this.error = true; this.errorMessage = "invalid XML."; this.errorObj.error = this.error; this.errorObj.message = this.errorMessage; } if (this.error == false) { this.xmlData = this.responseXML; if (this.JSON) { try { this.JSON = JSON.parse(this.responseText); } catch(err) { //JSON couldn't be parsed this.error = true; this.errorMessage = err.message + "<br />" + this.responseText; this.errorObj.error = this.error; this.errorObj.message = this.errorMessage; } } } //404 or 400, not found error if (this.status == "400" || this.status == "404" || this.status == 400 || this.status == 404) { this.error = true; this.errorMessage = "404: The requested page isn't found."; this.errorObj.error = this.error; this.errorObj.message = this.errorMessage; } else if(this.status == "500") { this.error = true; this.errorMessage = "500: Internal server error."; this.errorObj.error = this.error; this.errorObj.message = this.errorMessage; } if (typeof(callBack) != "undefined") { callBack.call(this); //pass the xmlDoc object to the callBack } } else { alert("Error \\n" + this.errorMessage); if (typeof(callBack) != "undefined") { callBack.call(this); } } } else { this.error = true; this.errorMessage = "XML Not loaded."; this.errorObj.error = this.error; this.errorObj.message = this.errorMessage; } } //to use ajx = ajax("index.php?query=1", "post", true, false, function(){/*callback*/}); console.log(ajx); ajx.fire(); 

Answer 2

JS是一種事件驅動的編程語言。 您缺少的是在您的請求完成時觸發的事件。 您可以將事件“ onreadystatechange ”綁定到xmlhttp對象，每次readyState更改時都會觸發該事件。

function gettext(string_to_translate) {
var filename = get_php_script_folder() + 'gettext.php?string_to_translate=' + string_to_translate;
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.status === 200) {
        var translated_string = xmlhttp.responseText;
        document.getElementById('input_box_form_reason').value = translated_string;
    } else {
        console.log("Error while translating " + string_to_translate + " Status " + xmlhttp.status);
    }
};
xmlhttp.open("GET", filename);
xmlhttp.send();
}

我建議閱讀有關JS事件和回調的內容。

Answer 3

正如Mouser所指出的那樣，需要回調。 我編輯了我的功能如下：

function gettext(string_to_translate, object, callback_function) {
    var filename = get_php_script_folder() + 'gettext.php?string_to_translate=' + string_to_translate;
    var xml_http_request = new XMLHttpRequest();

    /*
     * Default values:
     */
    if (undefined === callback_function) {
        callback_function = set_value;
    }
    /*
     * Input error handling:
     */
    if (typeof object !== "object") {
        console.log("Error:" + object + " is not an object.");
        return false;
    }
    if (typeof callback_function === "function") {
        xml_http_request.callback = callback_function; // add a callback to the xml_http_request
    } else {
        console.log("Error:" + callback_function + " is not a function.");
        return false;
    }

    xml_http_request.onreadystatechange = function ()
    {
        //target found and request complete
        if (this.status === 200 && this.readyState === 4) {
            //send result to the callback function
            this.callback(object, this.responseText);
        } else if (this.readyState === 4) {
            console.log("Error while translating " + string_to_translate + " Status " + xml_http_request.status);
            this.callback(object, string_to_translate);
        }
    };
    xml_http_request.open("GET", filename, true);
    xml_http_request.send();
}
//callback function specific for gettext
function set_value(object, value)
{
    object.value = value;
}

它可以如下調用：

gettext("Vacation", document.getElementById('input_box_form_reason'));

“Vacation”是要翻譯的字符串，input_box_form_reason是值將被更改的對象。 為了更靈活地分配，可以修改set_value函數。 對於復雜的翻譯和文本連接，必須優化gettext.php。