原生ajax请求解决中文乱码问题

最新推荐文章于 2024-04-24 13:32:07 发布

a俊伟儿

最新推荐文章于 2024-04-24 13:32:07 发布

阅读量1.1k

点赞数 1

分类专栏： js 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/JunWeiJodn/article/details/129254785

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生ajax请求

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="generator" content="editplus" />
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>pOST请求</title>

</head>

<body>
<style>
    #result {
        width: 200px;
        height: 100px;
        border: 1px solid #3d3c07
    }
</style>
<div id="result"></div>
<script>
    //获取元素对象
    const res = document.getElementById("result")
    //绑定事件
    res.addEventListener('mouseover', function() {
        //1.创建对象
        const xhr = new XMLHttpRequest()
        //2.初始化 设置请求方法和URL 启动请求 http://127.0.0.1:8000/server
        xhr.open('POST', 'http://127.0.0.1:8000/server')
        //设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') // Content-Type设置请求体的类型 ，application/x-www-form-urlencoded 设置请求体参数的类型
        //自定义请求头
        // xhr.setRequestHeader('NAME', 'AYU')
        //3.发送请求
        xhr.send("A=100&B=200") //请求体

        //4.事件绑定 处理服务端返回来的结果
        //onreadystatechange 服务器给xmlhttpRequset对象送回响应的时候触发执行
        //readystate 是xhr对象中的属性 表示状态0: 未初始化 尚未调用open（）方法 
        //1:启动已经调用open（）方法，但尚未调用send方法
        //2:发送已经调用send（）方法，但尚未接收到响应
        //3:接收，已经接收到部分响应数据
        //4:完成已经接收到全部响应的数据，而且已经可以在客户端使用了
        xhr.onreadystatechange = function() {
            //判断服务端返回了所有的结果全部数据
            if (xhr.readyState === 4) {
                //判断响应状态码 200 404 403 401 500 200到300的
                if (xhr.status >= 200 && xhr.status < 300) {
                    //处理结果 行 头 空行 体
                    console.log(xhr.status); //响应行 状态码
                    console.log(xhr.statusText); //响应状态说明
                    console.log(xhr.getAllResponseHeaders); //响应头
                    console.log(xhr.response); //响应体
                    res.innerHTML = xhr.response
                } else {
                }
            }
        }
    })
</script>
</body>
</html>

GET请求

通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递
一般在 GET 请求中，无需设置请求头
无需设置响应体，可以传 null 或者干脆不传

<script>
    var xhr = new XMLHttpRequest();
    // 发送 get 请求
    // xhr.open("GET", "http://localhost:3000/users");
    // 获取参数
    xhr.open("GET", "http://localhost:3000/users?age=22");
    // 没有该输入为空
    // xhr.open("GET", "http://localhost:3000/users?age=33");
    xhr.send(null);
    xhr.onreadystatechange = function (){
        if (this.readyState === 4){
            console.log(this.responseText);
        }
    }
</script>

POST请求

POST 请求过程中，都是采用请求体承载需要提交的数据
需要设置请求头中的 Content-Type，以便于服务端接收数据
需要提交到服务端的数据可以通过 send 方法的参数传递

<script>
    var xhr = new XMLHttpRequest();
    // post 请求
    xhr.open("POST", "http://localhost:3000/users");
    // 设置请求头
    // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-Type", "application/json");
    // 用 & 进行连接
    // xhr.send("name=wth&age=25&class=2");
    // json格式进行传递
    // xhr.send(`{
    //     "name": "wth",
    //     "age": 25,
    //     "class": 2
    // }`);
    xhr.send(JSON.stringify({
        "name": "wth-json",
        "age": 25,
        "class": 1
    }));
    xhr.onreadystatechange = function (){
        if (this.readyState === 4){
            console.log(this.responseText); // 获取新增加的值
        }
    }
    // 会添加到 dbs.json 中，可以去查看该文件 增加了一条数据
    // 每发送一次请求就会进行添加一次
</script>

前端汉字encodeURI传中文参数解决乱码

通过URL传中文参数时，在服务端后台获取到的值往往会出现乱码问题，解决方案有很多种，本文主要介绍如何通过encodeURI来解决中文乱码问题：

first：前端传递参数的时候需要对中文参数进行两次encodeURI处理：

?var requestUrl =‘url?roleName=‘+encodeURI(encodeURI("rowObj.appName"));

注：rowObj.appName?表示即将传到后台的带中文的字符串

?second：在服务器端后台程序代码中要用java.net.Decode进行解码，得到中文：

String appName= java.net.URLDecoder.decode(request.getParameter("roleName"),"UTF-8");

然而，为什么前端要进行两次encodeURI？？？原因如下：

1、encodeURI函数主要是来对URI来做转码，它默认采用的是utf-8的编码；

2、常规来看，中文汉字在utf-8中一般是3个字节构成，每一个字节会转换成16进制的编码，同时加上%号；

假设页面中需要传到后台的中文是一个“中”字，按照下面的过程走一遍：

1）第一次encodeURI，按照utf-8的方式获取字节数变成[-28，-72，-83]，对字节码数组进行遍历，把每个字节转化成对应的16进制数，于是就变成了[E4，B8，AD]，最终变成[% E4，% B8，% AD] (注意：请去掉%和编码中间的空格，我这边写出来你们看到就是乱码了，下面的这种也是一样)，此时已经没有了多字节字符，全部都是单字节字符。

2）第二次encodeURI进行编码，会把%看做转义字符，并且不编码%后面的字符，会把%变为%25，于是刚刚的数组就变成了[% E4，% B8，% AD]，然后就把处理好的[% E4，% B8，% AD]发往服务器，当应用服务器调用getparameter方法时，getparameter方法会去向应用服务器请求参数，然而应用服务器最初收到的就是从前端发来的[% E4，% B8，% AD]，应用服务器容器会默认解一次码，而容器默认解码时采用的编码是容器的默认编码，可能是utf-8，GBK，或者ISO-8859，都能得到[% E4，% B8，% AD]，因为会把%解析成%，并且把这个值返回给getparameter方法；

3）最终用java.net.Decode 采用utf-8编码进行解码，就能得到“中”字了；

所以，如果当时只是单单编码一次，当容易自动解码（默认解一次码）的时候，如果是按照 ISO-8859 去解码 UTF-8 编码的东西然后返回给getparameter方法就是乱码了。

感谢两篇参考文献，地址：

http://blog.csdn.net/howlaa/article/details/12834595

http://www.tuicool.com/articles/fuqIBju