综合案例:实现国际化(i18n)的欢迎消息 (1)编写php:i18n.php,解析客户端请求消息头部,获取当前客户端的首选语言, 根据语言的不同,返回不同形式的欢迎消息,如alert('你好!'), console.log('hello!') (2)编写html,i18n.html,一个按钮“获取欢迎消息”,点击后发起异步的GET请求, 获得响应消息后,执行出来
php:i18n.php如下:
<?php
//根据客户端浏览器首选语言的不同,返回不同形式的欢迎消息
header("Content-Type:application/javascript;charset=UTF-8");
//得到客户端请求消息的所有头部
$list=getallheaders();
//var_dump($list);
//读取Accept-Language请求头的内容
$lang=$list['Accept-Language'];
//var_dump($lang);
//读取可接收语言列表中的首选语言---前2个字符
$start2=substr($lang,0,2);
if($start2==='zh'){ //客户端浏览器首选中文
echo 'alert("你好!");';
echo 'var p=document.createElement("p");p.innerHTML="你好哦~";document.body.appendChild(p);';
}else if($start2==='ja'){ //客户端浏览器首选日文
echo 'console.log("こんにちは!");';
}else{
echo ';var p=document.createElement("p");p.innerHTML="hello";document.body.appendChild(p);';
}
//在php看来,js只是普通的字符串
?>
i18n.html如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="bt">获取国际化的欢迎消息</button>
<script>
bt.onclick = function () {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
if(xhr.readyState===4){
if(xhr.status===200){
doResponse(xhr);
}
}
};
xhr.open('GET','i18n.php',true);
xhr.send(null);
function doResponse(xhr) {
console.log(xhr);
console.log(xhr.responseText);
//eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
eval(xhr.responseText); //执行返回的js字符串
};
}
</script>
</body>
</html>
效果如下: