Request 接收参数乱码原理解析二:浏览器端编码原理

上一篇《Request 接收参数乱码原理解析一:服务器端解码原理》,分析了服务器端解码的过程,那么浏览器是根据什么编码的呢?

1. 浏览器解码

浏览器根据服务器页面响应Header中的“Content-Type: text/html; charset=gb2312”解码。修改web.config中“responseEncoding=utf-8”,发现服务器页面响应Header变成了“Content-Type: text/html; charset=utf8”。

  <system.web>
    <globalization requestEncoding="gb2312" responseEncoding="gb2312"/>
  </system.web>

除了web.config中的globalization结点可以影响charset,修改页面Page_Load(配置文件仍为gb2312),发现页面charset输出也变成了utf-8,但同时也发现页面中的中文成了乱码。微软对Response.Charset的解释是获取或设置输出流的HTTP字符集,为什么会出现乱码?个人猜测可能整个页面是按照web.config中指定GB2312编码的,但输出的时候将字符集强制变成了utf-8。

        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Charset = "utf-8";
        }

2. 提交表单时的编码

页面Get或者Post提交form表单数据时,会对表单中的中文进行编码,而编码方式是由服务器页面响应Header中的“Content-Type: text/html; charset=gb2312”确定的(和浏览器解码方式一致)。示例代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EncodeTest.aspx.cs" Inherits="Com.Shizi.Time8.UI.Test.WebTest.EncodeTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>页面编码测试</title>
    <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
    <form id="form1" action="EncodeTest.aspx" method="post">
        <div>
            <input type="text" name="name" id="name" value="北京" />
        </div>
        <div>
            <input type="submit" name="btnSumbit" value="sumbmit" /></div>
    </form>
    <div>
        <input type="button" name="btnAjaxPost" value="AJaxPost提交" onclick="AjaxPost()" />
        <input type="button" name="btnAjaxGet" value="AJaxGet提交" onclick="AjaxGet()" /></div>
    <div id="divMessage" style="color:red"></div>
    <script type="text/javascript">
        function AjaxGet() {
            $.ajax({
                type: "GET",
                url: "EncodeTest.aspx?namequery=" + $("#name").val(),
                data: { name: $("#name").val(), action: "ajax", methodtype: "get" },
                success: function (data) {
                    $("#divMessage").html(data);
                }
            });
        }
        function AjaxPost() {
            $.ajax({
                type: "POST",
                url: "EncodeTest.aspx?namequery=" + $("#name").val(),
                data: { name: $("#name").val(), action: "ajax", methodtype: "post" },
                success: function (data) {
                    $("#divMessage").text(data);
                }
            });
        }

    </script>
</body>
</html>

EncodeTest.aspx代码

不管get提交还是post提交,input控件全部都进行了GB2312编码,提交的数据为“name=%B1%B1%BE%A9&btnSumbit=sumbmit”。修改web.config中“responseEncoding=utf-8”,发现服务器页面响应Header中的“Content-Type: text/html; charset=utf8”,再次提交表单时编码已经成了utf-8,内容变为“name=%E5%8C%97%E4%BA%AC&btnSumbit=sumbmit”。

观察发现,不管get提交还是post提交,HTTP请求中并没有指定服务器端的解码方式,服务器端解码还是根据服务器配置获取的,本例中是用GB2312解码的。

3. 浏览器地址栏Url编码

在浏览器中输入地址:http://localhost:52443/EncodeTest.aspx?name=北京,“name=北京”的编码方式随浏览器不同而不同,IE11编码方式为GBK,服务器用GB2312解码正确;Firefox34.0编码方式为utf-8,服务器GB2312解码乱码。URL中的编码依赖于浏览器,开发中不建议使用,一些地址链接含有中文时,建议在生成链接时,对中文指定编码方式编码。

4. JQuery中的AJax提交

JQuery是一款优秀的js框架,被广泛使用,但通过AJax提交数据时,却容易出现乱码。通过测试和分析JQuery源码,AJax请求时,推荐方式为:

1)POST请求:参数放到data中,无需对参数值编码,JQuery在构造HTTP请求时,会调用js的函数encodeURIComponent()对data中的键值对分别进行utf-8编码,服务器用utf-8解码。url中对应的就是url地址,不能含有参数。

即使服务器Globalization结点配置的GB2312解码,Request.Form["xxx"]也会用utf-8解码,因为AJax的post请求中在HTTP头添加了代码“Content-Type: text/html; charset=utf8”,告诉服务器用utf-8解码,达到编码和解码一致的目的。这点可能和我们平时想的不一样,整站配置为GB2312编码的站点,竟然AJax的post请求都是用的utf-8编码!

        // 拼装参数
        if ( s.data && s.processData && typeof s.data !== "string" ) {
            s.data = jQuery.param( s.data, s.traditional );
        }

        // 如果有post data的话,设置请求Header
        if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
            jqXHR.setRequestHeader( "Content-Type", s.contentType );
        }

// key/values into a query string
jQuery.param = function( a, traditional ) {
    var prefix,
        s = [],
        add = function( key, value ) {
            // If value is a function, invoke it and return its value
            value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );
            s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
        };

    // Set traditional to true for jQuery <= 1.3.2 behavior.
    if ( traditional === undefined ) {
        traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;
    }

    // If an array was passed in, assume that it is an array of form elements.
    if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
        // Serialize the form elements
        jQuery.each( a, function() {
            add( this.name, this.value );
        });

    } else {
        // If traditional, encode the "old" way (the way 1.3.2 or older
        // did it), otherwise encode params recursively.
        for ( prefix in a ) {
            buildParams( prefix, a[ prefix ], traditional, add );
        }
    }

    // Return the resulting serialization
    return s.join( "&" ).replace( r20, "+" );
};    

JQuery AJax核心代码

2)GET请求:参数放在Url中,并按照和服务器一致的编码方式编码,如服务器配置的Globalization结点为UTF-8,则将参数值用UTF-8编码,可以调用函数encodeURIComponent();如果服务器配置为GB2312,则将参数用GB2312编码,可以调用escape()。Get和Post请求的一大差别是,GET请求不会改变请求的Header,Request.QueyString["xxx"]解码用的是Globalization指定的编码。

如下面的代码,在配置为GB2312编码的站点运行正常,无乱码,其中post请求是utf-8解码,get请求是gb2312解码。

        function AjaxGet() {
            $.ajax({
                type: "GET",
                url: "EncodeTest.aspx?namequery=" + escape($("#name").val()),
                success: function (data) {
                    $("#divMessage").html(data);
                }
            });
        }
        function AjaxPost() {
            $.ajax({
                type: "POST",
                url: "EncodeTest.aspx",
                data: { name: $("#name").val(), action: "ajax", methodtype: "post" },
                success: function (data) {
                    $("#divMessage").text(data);
                }
            });
        }

参考:Asp.net中Response.Charset 与Response.ContentEncoding区别charset 和character encoding深入浅出URL编码

时间: 12-22

Request 接收参数乱码原理解析二:浏览器端编码原理的相关文章

Request 接收参数乱码原理解析一:服务器端解码原理

“Server.UrlDecode(Server.UrlEncode("北京")) == “北京””,先用UrlEncode编码然后用UrlDecode解码,这条语句永远为true吗?答案是否定的,结果可能与很多人预想的不大一样.本文主要分析这一问题出现的原理,研究下Server.UrlEncode(),Server.UrlDecode(),Request["xxx"]三个函数与编码方式的关系. 1. 问题出现的情景 网站采用了GB2312编码,在Web.confi

处理request接收参数的中文乱码的问题:

? POST的解决方案: * POST的参数在请求体中,直接到达后台的Servlet.数据封装到Servlet中的request中.request也有一个缓冲区.request的缓冲区也是ISO-8859-1编码. * 设置request的缓冲区的编码: * request.setCharacterEncoding("UTF-8");  --- 一定要在接收参数之前设置编码就OK. ? GET的解决方案: * 1.修改tomcat的字符集的编码.(不推荐) * 2.使用URLEncod

MyBatis框架中Mapper映射配置的使用及原理解析(二) 配置篇 SqlSessionFactoryBuilder,XMLConfigBuilder

在 <MyBatis框架中Mapper映射配置的使用及原理解析(一) 配置与使用> 的demo中看到了SessionFactory的创建过程: SqlSessionFactory sessionFactory = null; String resource = "mybatisConfig.xml"; try { sessionFactory = new SqlSessionFactoryBuilder().build(Resources .getResourceAsRea

tomcat原理解析(二):整体架构

一 整体结构 前面tomcat实现原理(一)里面描述了整个tomcat接受一个http请求的简单处理,这里面我们讲下整个tomcat的架构,以便对整体结构有宏观的了解.tomat里面由很多个容器结合在一起,主要有server,service,context,host,engine,wrapper,connector这7个容器来组装.当然了tomcat里面还有其它容器这里就不一一列举,因为我只看重点的.这7个容器存着父子关系,即可以通过当前容器找自己的父容器和自己的子容器.说到这我画了一个简单的结

js的url中传递中文参数乱码,如何获取url中参数问题

一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: <script type=”text/javascript”> function send(){ var url = "test01.html"; var userName = $("#userName").html(); window.open(encodeURI(url + "?userName="

MyBatis框架中Mapper映射配置的使用及原理解析(三) 配置篇 Configuration

从上文<MyBatis框架中Mapper映射配置的使用及原理解析(二) 配置篇 SqlSessionFactoryBuilder,XMLConfigBuilder> 我们知道XMLConfigBuilder调用parse()方法解析Mybatis配置文件,生成Configuration对象. Configuration类主要是用来存储对Mybatis的配置文件及mapper文件解析后的数据,Configuration对象会贯穿整个Mybatis的执行流程,为Mybatis的执行过程提供必要的配

jsp中request接收中文参数乱码问题解决办法

在利用表单提交数据时发现,获得的中文参数会发生乱码,解决方法如下: <body> <% String s=request.getParameter("uname"); s = new String(s.getBytes("ISO-8859-1"),"utf-8");//解决乱码问题 %> <%=s %> </body> s = new String(s.getBytes("ISO-8859

浏览器的工作原理解析

PART1 有关浏览器的内核 一.Trident内核,代表产品IE Trident内核又称为IE内核.是微软开发的一种排版引擎.1997年与IE4一起诞生.虽然它相对于其它浏览器核心还比较落后,但trident一直在被不断地更新和完善.而且除IE外,许多产品都在使用Trident核心,比如Windows的HELP程序.RealPlayer.Windows Media Player.Windows Live Messager.Outlook Express等. 使用此内核的其它浏览器有:IE.傲游

游戏外挂原理解析与制作 - [内存数值修改类 篇二]

本章旨在讲解如何利用高级语言根据变量数值寻找内存地址.涉及代码以C#为例. 我用C#写了一个WinForm形式的Demo,界面如下: 源代码: //血量初始值 private int value = 1000; public Form1() { InitializeComponent(); } /// <summary> /// 刷新界面:将最新的血量显示在界面 /// </summary> /// <param name="sender"><