通过XMLHttpRequest将gettext与PHP中的Javascript结合使用

我有一个主要用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文件吗？（我希望不是。）

附言：

我不使用任何类似jQuery的框架。这是一件“宗教”的事情。我希望自己完全理解并维护整个代码库

我读了以下问题，但没有回答我的问题：

• （断开的链接）

---

是的，你需要回电话

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函数

函数ajax（url、方法、json、回调） { //它支持get和post //当JSON设置为true时，返回已解析的JSON。|可通过回调中的this.JSON访问JSON //可以在引用xmlHTTP的位置附加回调 //提供与get请求类似的url：http://www.example.com/page.php?query=1 //使用xmlDoc.fire启动请求。 var xmlDoc=新的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； 如果（方法==“post”） { xmlDoc.pUrl=url； xmlDoc.pArg=“”； if（url.match（//\？/）//我们需要过滤掉参数，因为参数是单独发送的。 { var splitted=url.split（/\？/）； xmlDoc.pUrl=splitted[0]； xmlDoc.pArg=“”； 对于（变量i=1；i”+this.responseText； this.errorObj.error=this.error； this.errorObj.message=this.errorMessage； } } } //404或400，未找到错误 如果（this.status==“400”| | this.status==“404”| | this.status==400 | | this.status==404） { this.error=true； this.errorMessage=“404:找不到请求的页面。”； this.errorObj.error=this.error； this.errorObj.message=this.errorMessage； } 否则如果（this.status==“500”） { this.error=true； this.errorMessage=“500:内部服务器错误。”； this.errorObj.error=this.error； this.errorObj.message=this.errorMessage； } if（类型（回调）！=“未定义”） { callBack.call（this）；//将xmlDoc对象传递给回调 } } 其他的 { 警报（“错误\n”+此.errorMessage）； if（类型（回调）！=“未定义”） { 回调。调用（此）； } } } 其他的 { this.error=true； this.errorMessage=“未加载XML。”； this.errorObj.error=this.error； this.errorObj.message=this.errorMessage； } } //使用 ajx=ajax（“index.php？query=1”，“post”，true，false，function（）{/*callback*/}）； console.log（ajx）；

---

ajx.fire（）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事件和回调。

正如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'));

它可以被称为：

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'));

“假期”是要翻译的字符串，输入框形式原因是要更改值的对象。为使赋值更灵活，请设置_值