通过XMLHttpRequest使用来自PHP的Javascript的gettext

我有一个主要用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：

>我不使用像jQuery这样的任何框架.这是一个“宗教”的事情.我希望自己完全理解并维护整个代码库.
>我读了以下问题,但没有回答我的问题：

> Translation in JavaScript like gettext in PHP?
> PHP Gettext in JavaScript, not working in extern JS file
> Extract javascript gettext in Poedit?
> How do I feed terms from a gettext dictionary into JavaScript?
> javascript i18n with gettext and .po files(断链)

解决方法:

是的,你需要一个回调！

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