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

1. 浏览器解码

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

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

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

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

2. 提交表单时的编码

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EncodeTest.aspx.cs" Inherits="Com.Shizi.Time8.UI.Test.WebTest.EncodeTest" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7.     <title>页面编码测试</title>
  8.     <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
  9. </head>
  10. <body>
  11.     <form id="form1" action="EncodeTest.aspx" method="post">
  12.         <div>
  13.             <input type="text" name="name" id="name" value="北京" />
  14.         </div>
  15.         <div>
  16.             <input type="submit" name="btnSumbit" value="sumbmit" /></div>
  17.     </form>
  18.     <div>
  19.         <input type="button" name="btnAjaxPost" value="AJaxPost提交" onclick="AjaxPost()" />
  20.         <input type="button" name="btnAjaxGet" value="AJaxGet提交" onclick="AjaxGet()" /></div>
  21.     <div id="divMessage" style="color:red"></div>
  22.     <script type="text/javascript">
  23.         function AjaxGet() {
  24.             $.ajax({
  25.                 type: "GET",
  26.                 url: "EncodeTest.aspx?namequery=" + $("#name").val(),
  27.                 data: { name: $("#name").val(), action: "ajax", methodtype: "get" },
  28.                 success: function (data) {
  29.                     $("#divMessage").html(data);
  30.                 }
  31.             });
  32.         }
  33.         function AjaxPost() {
  34.             $.ajax({
  35.                 type: "POST",
  36.                 url: "EncodeTest.aspx?namequery=" + $("#name").val(),
  37.                 data: { name: $("#name").val(), action: "ajax", methodtype: "post" },
  38.                 success: function (data) {
  39.                     $("#divMessage").text(data);
  40.                 }
  41.             });
  42.         }
  43.  
  44.     </script>
  45. </body>
  46. </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编码！

  1.         // 拼装参数
  2.         if ( s.data && s.processData && typeof s.data !== "string" ) {
  3.             s.data = jQuery.param( s.data, s.traditional );
  4.         }
  5.  
  6.         // 如果有post data的话，设置请求Header
  7.         if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
  8.             jqXHR.setRequestHeader( "Content-Type", s.contentType );
  9.         }
  10.  
  11. // key/values into a query string
  12. jQuery.param = function( a, traditional ) {
  13.     var prefix,
  14.         s = [],
  15.         add = function( key, value ) {
  16.             // If value is a function, invoke it and return its value
  17.             value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );
  18.             s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
  19.         };
  20.  
  21.     // Set traditional to true for jQuery <= 1.3.2 behavior.
  22.     if ( traditional === undefined ) {
  23.         traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;
  24.     }
  25.  
  26.     // If an array was passed in, assume that it is an array of form elements.
  27.     if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
  28.         // Serialize the form elements
  29.         jQuery.each( a, function() {
  30.             add( this.name, this.value );
  31.         });
  32.  
  33.     } else {
  34.         // If traditional, encode the "old" way (the way 1.3.2 or older
  35.         // did it), otherwise encode params recursively.
  36.         for ( prefix in a ) {
  37.             buildParams( prefix, a[ prefix ], traditional, add );
  38.         }
  39.     }
  40.  
  41.     // Return the resulting serialization
  42.     return s.join( "&" ).replace( r20, "+" );
  43. };

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解码。

  1.         function AjaxGet() {
  2.             $.ajax({
  3.                 type: "GET",
  4.                 url: "EncodeTest.aspx?namequery=" + escape($("#name").val()),
  5.                 success: function (data) {
  6.                     $("#divMessage").html(data);
  7.                 }
  8.             });
  9.         }
  10.         function AjaxPost() {
  11.             $.ajax({
  12.                 type: "POST",
  13.                 url: "EncodeTest.aspx",
  14.                 data: { name: $("#name").val(), action: "ajax", methodtype: "post" },
  15.                 success: function (data) {
  16.                     $("#divMessage").text(data);
  17.                 }
  18.             });
  19.         }

默认情况下，JQuery的AJax方法通过post提交数据，编码都是用的utf-8，通过Header指定服务器解码方式也为utf-8，但某些特殊情况下可能想服务器用gb2312解码（现在想来应该不需要这种场景，因为本身就不大合理，当时可能在某些不大合理的前提下确实需要来着，还不停的百度），网上查找资料是说AJax时，添加属性“contentType: "application/x-www-form-urlencoded; charset=utf-8",”个人测试IE下生效了，服务器变成了GB2312解码，但火狐下未生效，原因未知，单步跟踪了代码都执行了，没啥问题。

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

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

  1. Request 接收参数乱码原理解析三：实例分析

    通过前面两篇<Request 接收参数乱码原理解析一:服务器端解码原理>和<Request 接收参数乱码原理解析二:浏览器端编码原理>,了解了服务器和浏览器编码解码的原理,接下 ...

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

    “Server.UrlDecode(Server.UrlEncode("北京")) == “北京””,先用UrlEncode编码然后用UrlDecode解码,这条语句永远为true ...

  3. Request 接收参数乱码原理解析

    起因: 今天早上被同事问了一个问题:说接收到的参数是乱码,让我帮着解决一下. 实际情景: 同事负责的平台是Ext.js框架搭建的,web.config配置文件里配置了全局为“GB2312”编码: &l ...

  4. 详细解析ASP.NET中Request接收参数乱码原理

    起因:今天早上被同事问了一个问题:说接收到的参数是乱码,让我帮着解决一下. 实际情景: 同事负责的平台是Ext.js框架搭建的,web.config配置文件里配置了全局为“GB2312”编码: < ...

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

    Ø POST的解决方案: * POST的参数在请求体中,直接到达后台的Servlet.数据封装到Servlet中的request中.request也有一个缓冲区.request的缓冲区也是ISO-88 ...

  6. laravel 请求request 接收参数

    获取请求输入 获取所有输入值 你可以使用 all 方法以数组格式获取所有输入值: $input = $request->all(); 获取单个输入值 使用一些简单的方法,就可以从 Illumin ...

  7. tomcat原理解析(二)：整体架构

    一 整体结构 前面tomcat实现原理(一)里面描述了整个tomcat接受一个http请求的简单处理,这里面我们讲下整个tomcat的架构,以便对整体结构有宏观的了解.tomat里面由很多个容器结合在 ...

  8. Java多线程系列 JUC线程池03 线程池原理解析(二)

    转载  http://www.cnblogs.com/skywang12345/p/3509954.html  http://www.cnblogs.com/skywang12345/p/351294 ...

  9. 对小程序的网络请求的封装 wx.request 接收参数修改

    wepy-mall/wxRequest.js at master · dyq086/wepy-mall https://github.com/dyq086/wepy-mall/blob/master/ ...

随机推荐

  1. MySQL数据导出

    1,打开命令行窗口“运行”-->输入CMD 2,进入自己MySQL Server安装目录的bin目录(我的安装目录如下) cd C:\Program Files\MySQL\MySQL Serv ...

  2. ubuntu使用经验整理

     ===================================================== 清理/boot分区 =================================== ...

  3. 【整理】--【字符设备】cdev_init()/cdev_alloc(),cdev_add(),cdev_del()

    (1) 内核中每个字符设备都对应一个 cdev结构的变量,下面是它的定义: linux-2.6.22/include/linux/cdev.h struct cdev { struct kobject ...

  4. SVN分支管理策略个人见解

    本篇目录 前言 SVN分支管理策略 VisualSVN Server TortoiseSVN客户端 Repository的创建 Check out trunk创建新项目MyProject trunk更 ...

  5. 使用C#设计Fluent Interface

    我们经常使用的一些框架例如:EF,Automaper,NHibernate等都提供了非常优秀的Fluent Interface, 这样的API充分利用了VS的智能提示,而且写出来的代码非常整洁.我们如 ...

  6. 新手的第一个phonegap Android应用

    对PhoneGap开发感兴趣的请加入群 PhoneGap App开发 348192525   手机成为现在软件应用必不可少的一种设备,然而手机平台的不统一造成我们需要为不同手机重写代码,这对一般应用来 ...

  7. 如何在 ASP.NET MVC 中集成 AngularJS（1）

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

  8. win7-VS2010-IIS网站的发布问题

    前提:IIS配置已经完成 问题描述:我们在机房实验里,大家的都可以访问同学A发布的IIS网站,但是,A却不能访问我们每个人的网站,而我们也不能互相访问(除了A). 问题解决:忙乎了半天,原来A同学的防 ...

  9. 记录自己在使用Bootstrap中的心得

    一.网格系统 在做CRM OP后台时,直接在前人的的一些页面上进行了修改和增加,发现一些东西增加字段后有问题,比如网格系统,怎么改样式都不对,最后自己没法发,做成了半响应式的了.今天重新看Bootst ...

  10. 黑马程序员_java08_多线程

    转载于:http://www.itxuexiwang.com/plus/view.php?aid=148 线程是程序中可以并行执行的任务. java运行系统总是选当前优先级最高的处于就绪状态的线程来执 ...