前后端交互---综合案例1：实现国际化（i18n）的欢迎消息

综合案例：实现国际化（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>

效果如下：

前后端交互---综合案例1：实现国际化（i18n）的欢迎消息

猜你喜欢