前几天的问题仍然在思索，这些网上搜索下来的文章，都将成为我的资料库中的参考资料。
原文：http://www.v-sky.com/blog/?p=215
为什么页面出现乱码？为什么数据库里出现乱码？为什么这些乱码的出现几率飘忽不定了？诸如此类的乱码问题困扰了很多WEB开发人员。假如不将这 背后的细节扫扫清楚，那么我们的确不知道什么时候乱码又出现了，如果你确实没有时间关心这些细节，那么你可以直接看文章最后的总结。
我们所遇到的乱码多数情况是发生在有中文字符的时候，这是由于计算机各种编码的标准不同而造成的，首先我们有必要了解一下计算机编码的发展 史，ASCII码、GB2312、GBK、GB18030、UNICODE、UTF-8、UTF-16、ISO-8859-1…，简而言之它们都是为了满 足不同时期，不同对象的需求，以自己的一套标准尽可能多地表示所需要的符号信息，如果你需要了解得更深入，可以google一下相关资料。（PS:计算机 领域的很多技术发展都是很有意思的）正是因为有这么多不同标准的编码存在，稍不留神我们就走入了编码“陷阱”，如何避免这些“陷阱”了？
一、注意文件编码和字符编码
用记事本建立一个新的文件，默认是ASCII码，我们另存为其他编码类型，例如unicode，如果用UtraEdit或者Emeditor编 辑，你会发现编码类型的选择范围更大。试想一下如果在编码A类型的文件中存在了编码B的字符会有什么现象了？多数情况下会出现乱码。例如我们在一个文件编 码为GB2312的网页文件中写入了UTF-8的字符，那么这个网页浏览的时候就出现了乱码，而我们在浏览器中再自己设定一下编码为UTF-8，页面就恢 复正常了。当然也有例外情况，如果这两种编码是扩展关系，其中的部分字符编码是相同的，这个时候当然不会出现乱码了，例如GBK就兼容了BG2312的所 有字符。（PS：这里有个有趣的现象，新建一个记事本，然后输入“联通”两个字，保存再打开，你会发现它变成了乱码。具体原因你可以google一下，简 单说来是记事本错误地识别了字符编码。）
第一条原则：保持文件编码和字符编码的一致性。（PS：尤其是在客户端使用编辑器更改文件的编码类型时更要注意，有些编辑器只改变了文件编码，而没有将内部的字符编码同样做转换。）
二、 指定网页编码
目前，主流浏览器都遵循RFC标准，他们会优先考虑服务端对Header中的content-type属性的设置，无论你是在server层做的全局设置，还是你的服务端脚本临时设置，你都需要清楚地知道网页否指定了你预定的编码。
如果服务端对Header没有做处理，那么浏览器会识别Meta信息中的content-type，例如，这个网页的编码就指定了是UTF-8，如果其中存在GB的字符，那么乱码就出现了。
第二条原则：清楚地为网页指定我们预定的编码，最便捷的方式是在服务端指定。
三、 留意Form这个数据入口
Form的数据提交看起来是一个很简单的过程，事实上在这个背后浏览器给我们做了很多工作：（详细可参考W3C网站上的TR文档）
1． 检测这个Form是否标准，包括name属性是否存在，disabled是否可用等等一系列信息，同时获取到各种表单的当前值
2． 对于一个检测通过的Form，要把它内部的表单元素的值按照他们在文档中的出现顺序，以name/value的形式记录为一组数据集。
3． 根据Form的enctype属性指定的content-type对获取到的一组数据集做URL编码
4． 最后根据action 和method属性来向服务端发送这组数据集
这里我们需要特别留意的是第三步，这里做URL编码的数据集本身是什么字符编码了？通常情况下它会遵照网页 本身的编码，这就是为何我在第二原则里建议你要明确指定你选定的网页编码。假如你的网页是GBK编码，那么表单提交到服务端的数据就是GBK的编码，如果 网页是UTF-8，那么提交过去的就是UTF-8的。这里就有一个问题，如果客户端提交的是UTF-8，而我们服务端（包括数据库）都统一使用的是GBK 的编码，那会出现什么问题了？答案是：那会很棘手，服务端不得不对这个UTF-8的数据做编码转换，转换为了GBK才能入库，否则你的数据库里存入的就是 UTF-8的编码，乱码又出现了。
事实上这里还有个例外的情况，在W3C的标准中Form是有一个ACCEPT-CHARSET属性的，目的单独指定FORM中的编码，这个比文档的编 码设置优先级要高。我个人认为开发中用到的可能性不大，一个指定了编码A的文档，为何要发送编码B的字符呢？如果有真有这个需要，那么在服务端做转换就可 以了，没有必要在客户端弄出两种不同的编码，更何况IE这个强硬的家伙又是背离标准的。
A character encoding is a method of converting a sequence of bytes into a sequence of characters.
If ACCEPT-CHARSET is not specified, the form will be submitted in the character encoding specified for the document. If the form includes characters that fall outside the character set specified for the document, Microsoft Internet Explorer will attempt to determine an appropriate character set. If an appropriate character set cannot be determined, then the characters will be encoded as HTML numeric character references. For more information on character sets and numerical character references, see HTML Character Sets. （参考：MSNDhttp://msdn2.microsoft.com/en-us/library/ms533061.aspx）
因此，我们还是“忘记”这个属性吧，没有它，我们的FORM一样可以运转得很好。（也正是因为浏览器默认会给FORM做很多不错的工作，所以我们看到的很多富文本编辑器在提交编辑内容时，都会先把这个内容写入到一个表单的value中，让浏览器自动给它编码。）
第三个原则：清楚地认识Form中的数据的编码是依照网页本身编码的，在提交到服务端之前，这组数据是做了格式化处理，然后做了URL编码。目前服务端不会智能到自动识别FORM发送过来的编码类型，更不会智能到给你自动转换为服务端统一使用的编码。
四、 特别留意AJAX这个数据入口
AJAX的流行让XMLHTTPRequest这个“数据入口”使用更频繁了，但遗憾的是XMLHTTPRequest对象本身没有像浏览器对 Form的处理那么勤劳，同时它的无刷新特性让我们可以动态将服务端返回给我们的数据显示在当前已经被渲染过的页面内，相对于FORM这个数据入 口，XMLHTTPRequest还存在一个“数据出口”的问题，因此这里的乱码现象更加频繁。
1、“数据入口”
一般情况下，XMLHTTPRequest发送的数据来源有两种：页面源码和XMLHTTPRequest所在的Javascript的文件源码。为何会将它们分开了？这里我们来假设几种不同情况：
• JS获取用户在表单元素中的输入数据，然后设置XMLHTTPRequest
在上文中已经提到了Form表单中数据的编码问题，用户输入的字符编码是和网页编码一致的，因此这里JS获取的数据编码和网页编码是一致的。
• JS源码中预设的数据
某些情况下，我们会将一些预定参数在程序中写死（这里就不要讨论程序扩展性了），那么这种情况的编码就得取决于文件编辑时编辑器输出字符 的编码了。这就是我们的一个准则中建议的，你需要保持文件编码和字符编码的统一。JS本身是基于UNICODE编码的，所以这是我推荐文件用UTF-8编 码的理由之一。
现在我们已经知道了XMLHTTPRequest发送的数据的编码，接着我们来看发送数据会出现什么问题。
XMLHTTPRequest不同于表单数据的发送，它不会给我们的数据做序列化，不会自动给我们做URL编码，也不能在客户端指定发送的编码类 型。（PS:虽然setRequestHeader方法可以设置发送请求Header中的charset，不过我经过测试和对Header信息的监视，发 现这个设置从Header中看是有效的，但服务端接收到的数据始终是UTF-8的，查了些资料没有找到原因在哪儿，暂且认为XMLHTTPRequest 只能以UTF-8格式发送数据吧。但值得“庆幸”的是无论客户端的网页是什么编码，这里发送的UTF-8编码的数据都是正确转换过的，否则让我们自己在客 户端写转换功能那就相当棘手了）为了保证数据send到服务端不出问题，我们只有自己动手做XMLHTTPRequest没有给我们完成的工作了。
• 指定请求Header中的content-type
XMLHTTPRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
• 将序列化的数据进行URL编码
这里可以使用encodeURI和encodeURIComponent
这样以来，那么服务端就可以正确接收到我们POST过去的数据集了，这里需要注意，服务端得到的数据集是UTF-8格式的，是否做编码转换，那就是视你具体情况而定了。
2、“数据出口”
无论XMLHTTPRequest GET的是一个静态页面，还是一个动态页面，XMLHTTPRequest都不关心，它只关心 responseText得到数据的编码，默认的编码是UTF-8，而这个编码是可以通过服务端直接设置的，这个在上文的指定网页编码中已经提到了。
因此当你需要在页面显示responseText的内容时，你需要很清楚地知道页面的编码和responseText的编码，如果他们不统一，那乱码的麻烦就有出来了，不过现在你知道问题在哪儿了。
第四个原则：在使用AJAX时，尤其要注意数据流动中造成的编码类型改变。AJAX发送的是UTF-8编码，接收的编码默认是UTF-8，但允许服务端重新指定。
总结：避免乱码的最简洁方法就是系统中所有文本文件都统一使用最通用的编码，（目前在WEB应用上当然是 UTF-8了）并在页面中指定charset，同时在服务端设置header中的charset，防止客户端浏览器的设置造成编码不一致。但如果你目前的 系统已经存在了编码不统一情况，那么你就需要根据具体情况找到做编码转换代价最小的地方，或许上面的分析能帮你解决问题。
以上分析我的测试环境是IE6 、IE7、Firefox，有兴趣的话也可以动手测测，欢迎交流，如果有什么不当之处希望指出。
CB纯粹是一堆程序员发泄的地方，因此，在上面不可避免的会出现一些好的东西，比如这个：9 个基于JavaScript 和 CSS 的 Web 图表框架
图表，我个人还是觉得用FLASH来做比较好，比较有动感，而且现在所有浏览器都支持FLASH。它还是比较有前途的。FLASH和JS在运行的时候占用CPU应该是JS相对较高吧？FLASH图表还是有一些很不错的。比如open flash chart，就是一个开源的FLASH图片控件。
不过，标题是JS的，我当然还是把CB原文贴过来喽：http://www.cnbeta.com/articles/79418.htm
原文如下：
新闻来源:woork.blogspot.com
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能，包括绘制 Web 图表，使用这些框架以及相应插件，我们可以非常轻松地实现曲线图，圆饼图，柱状图等 Web 图表的绘制，而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能，包括绘制 Web 图表，使用这些框架以及相应插件，我们可以非常轻松地实现曲线图，圆饼图，柱状图等 Web 图表的绘制，而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。
1. Flot
Flot 是一个纯粹的 jQuery JavaScript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象，目前所有主流浏览器都支持该对象，除了 IE, 因此在 IE中使用 JavaScript 进行模拟。这里有一些实例。
2. JS Charts
JS Charts 是一个免费的基于 JavaScript 的图表生成器，表格绘制非常简单，几乎不需要编码，也不需要插件和服务器模块，使用XML 或 JavaScript 数组缓存数据。
3. TableToChart
TableToChart 是一个 MooTools 脚本，可以将 HTML Table 对象中存储的数据绘制成图表。你可以使用 table 标签生成图表，柱状图，曲线图，圆饼图等。
4. PlotKit
PlotKit 是一个 JavaScript 绘图库，支持 HTML Canvas 标签，也支持 SVG。
5. Yahoo UI Charts Control
YUI Charts Control 可以在网页上将表格数据转换为图表，支持柱状图，曲线图以及圆饼图。支持 DataSource 工具，可设置的轴，鼠标盘旋提示，图表组合，以及皮肤等功能。
6. ProtoChart
ProtoChart 是一个基于 Prototype 和 Canvas 标签的开源库，这个库深受 Flot, Flotr, Plotkit 等启发，支持曲线图，柱状图，圆饼图等，可以在同一个图表上显示多套数据，支持可定制的图例，网格，边界以及背景图。支持 IE6/7, Firefox 2/3 以及 Safari，甚至支持 iPhone.
7. EJSChart
EJSChart 支持鼠标追踪，鼠标事件，按键追踪与事件，缩放，滚动，交互等功能，将用户体验上升到一个新高度。支持曲线图，面积图，离散图，圆饼图，柱状图等形式，拥有完备文档的属性和方法可以帮助实现很好的定制。
8. fgCharting
fgCharting 是一个很出色的 jQuery 插件，支持多种图形。
9. Pure Css Data Chart
以往的数据展示往往通过 flash 实现，现在，我们可以通过纯粹的 CSS 实现类似的功能。CSSGlobe 有一个非常实用的教程帮你实现基于 CSS 的绘图，甚至不需要 JavaScript。
本文国际来源：http://woork.blogspot.com/2009/03/useful-scripts-to-plot-charts-in-web.html
中文翻译来源：COMSHARP CMS 官方网站
本文很长，来自于博客园，并不是说文章内容很有深意，但是因为作者在介绍的时候的step by step，也能让人体会到了代码复用并非全部是用在服务端的OO，对于客户端其实也能够做到OO。
原文网址：http://www.cnblogs.com/KenBlove/archive/2009/03/16/1413746.html
内容摘抄：（太多了，仅摘抄部份原话）
大家都知道，客户端检测不单可以让用户获得更好的体验，而且可以通过校验数据大大减少客户端和服务器端的往返次数，减少服务器负担。在这里，小弟打算回顾一下自己在客户端检测方面的学习历程和采用方法，如果大家有什么更好的方法或者建议，欢迎提出来共享！共同进步！
第一阶段是：续项强写
每个人都基本会经过这个阶段，就是对检测内容每个都手工校验。
第二阶段：集中消灭
相信不少初学者现在还是处于这个阶段，这阶段的同学们已经被第一阶段折磨怕了。很快就想出了集中消灭相同类型检测的方法。就是写检测函数
第三阶段：链式的威力
看着一大堆if else总是心里觉得不舒服，对吧？一串串的又不是羊肉串，虽然不能吃，也要消灭它们！这时候，是Javascript的prototype出场的时候了。通过扩展prototype，可以获得简洁优雅的代码
第四阶段：自定义属性
第五阶段：可配置
作者最后还附上了源码，建议全文查看
本例子来自博客园，其实关于Autocompleted的例子，用jquery的话，是很多很多，但那都是国外的，难得有国内的例子，看到了就复制回来一份，呵呵
原文：http://www.cnblogs.com/cntlis/archive/2009/03/14/1412144.html
数据采用JSON，格式为{keylist:[{'keyname':关键字1,'keyextend':扩展文字(譬如说结果数目)},{'keyname':关键字2,'keyextend':扩展文字(譬如说结果数目)}]}
JS代码（当成JS代码插入的时候，高亮会超时，所以，用HTML格式了一下）
- /**//*
- * jQuery AutoComplete
- *
- * Author: cntlis
- * http://blog.csdn.net/cntlis
- *
- * Licensed like jQuery, see http://docs.jquery.com/License
- *
- * 作者：cntlis
- * QQ：8112857
- */
- $.fn.AutoComplete = function(url,option){
- var me= this;
- var strKey= $(me).val();
- var strKeyBak= "";
- var isShow = false;
- var doption={
- iwidth: '0px', //下拉框的宽度
- iLengthLower: 1, //当表单的长度大于iLengthLower小于iLengthUpper时才开始执行搜索
- iLengthUpper: 50,
- strPara: "Keyword", //变量名称
- zIndex: 1, //提示框的Z-INDEX值
- hasscroll: 0, //是否出现滚动条0无1有
- hasclose: 1, //是否拥有关闭窗口
- desfun:function(){}
- };
-
- $.extend(doption,option);
- var iLengthLower= doption.iLengthLower;
- var iLengthUpper= doption.iLengthUpper;
- var strPara= doption.strPara;
- if ($("#autocomplete").length<1){$("body").append("<div id='autocomplete' class='autocompletefloor'></div>");}
- $("#autocomplete").hide();
-
- $(me).keyup(function(e){keysearch(e.keyCode);});
- $(me).keydown(function(e){LineSelect(e.keyCode);});
- $(me).bind("blur",function(){
- strKeyBak= $("#autocomplete ul .selected .keyname").text(); //为click事件增加处理
- if (strKeyBak.length>0 && strKeyBak!=$(me).val()){
- $(me).val(strKeyBak);
- doption.desfun();
- };
- floorHide();
- });
-
- var encode=function(v){//如果包含中文就escape,避免重复escape)
- return escape(v).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
- }
-
- function floorHide(){
- $("#autocomplete").hide().html("");
- strKey= "";
- isShow = false;
- }
-
- function floorShow(){
- var p= $(me).offset();
- var w= (doption.iwidth == "0px") ? $(me).width()+2 : doption.iwidth;
- $("#autocomplete").css({
- 'z-index:':doption.zIndex,
- width:w,
- top:parseInt(p.top+$(me).outerHeight())+"px",
- left:parseInt(p.left)+"px"
- }).show();
- strKey= "";
- isShow = true;
- }
-
- function keysearch(code){
- var strKeyNow=$(me).val();
- if(code == 38 || code == 40 || code == 13 || code == 27 || code == 9) return; //TAB/回车、ESC、向上、向下
- if((strKey == "" || strKeyNow != strKey) && strKeyNow.length >= iLengthLower && strKeyNow.length <= iLengthUpper){
- $.ajax({
- type: "Get",
- dataType: "json",
- url: url,
- data: strPara != "" ? strPara + "=" + encode(strKeyNow) : "",
- success: function(json){
- jsonjson=json.keylist;
- if (json.length>0){
- //获取搜索数据
- var strContent= "<ul>";
- $.each(json, function(i, n){
- if(n.keyname.length>0){ //如果
- //alert(n.keyname);
- strContent+= '<li class="keyinfo"><span class="keyname">'+n.keyname+'</span>';
- try{
- if (n.keyextend.length>0){strContent+='<span class="keyextend">'+n.keyextend+'</span>';}
- }catch(E){};
- strContent+= '</li>';
- };
- });
- if (doption.hasclose==1){
- strContent+= '<li class="close"><span>关闭</span></li>';
- }
- strContent+='</ul>';
- $("#autocomplete").html(strContent);
- $("#autocomplete .keyinfo").mouseover(function(){$("#autocomplete .selected").removeClass("selected");$(this).removeClass("unselected").addClass("selected");}).mouseout(function(){$(this).removeClass("selected").addClass("unselected");}).click(function(){if(strKeyBak.length()>0){$(me).val(strKeyBak);}});
- floorShow();
- }else{
- //没有搜索数据
- floorHide();
- return;
- }
- }
- });
- strKey=$(me).val();
- }
- if(strKey.length == 0 || strKey.length <= iLengthLower || strKey.length >= iLengthUpper) floorHide();
- }
-
- function LineSelect(code){
- if(code == 27){floorHide();};//回车键、ESC键
- if(code == 13){floorHide();doption.desfun();};
- if(!isShow) return;
- ObjSelected=$("#autocomplete ul .selected");
- if (ObjSelected.length>0){ //如果已经有选定
- //alert('dasfdas');
- if(code == 38){ //向上键
- if(ObjSelected.prev().text() != ""){ //如果不是第一个数据
- ObjSelected.removeClass("selected").addClass("unselected").prev().removeClass("unselected").addClass("selected");
- $(me).val($("#autocomplete ul .selected .keyname").text());
- }else{
- ObjSelected.removeClass("selected").addClass("unselected");
- $("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
- $(me).val($("#autocomplete ul .selected .keyname").text());
- }
- }else if (code == 40){ //向下键
- if(ObjSelected.next().text() != ""){ //如果不是第一个数据
- ObjSelected.removeClass("selected").addClass("unselected").next().removeClass("unselected").addClass("selected");
- $(me).val($("#autocomplete ul .selected .keyname").text());
- }else{
- ObjSelected.removeClass("selected").addClass("unselected");
- $("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
- $(me).val($("#autocomplete ul .selected .keyname").text());
- }
- }
- }else if(code == 38){
- $("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
- $(me).val($("#autocomplete .keyinfo:last .keyname").text());
- }else if(code == 40){
- $("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
- $(me).val($("#autocomplete .keyinfo:first .keyname").text());
- }
- }
- }
CSS代码
- #autocomplete{}{ border: 1px solid #000; position: absolute; }
- /**//*每行的格式*/
- #autocomplete li{}{ display: block; text-align: left; height: 20px; line-height: 20px; background-color: #fff; cursor: default; padding: 0 5px; clear: both; }
- /**//*鼠标选中时的格式*/
- #autocomplete .selected{}{ background-color: #565da9; color: #fff; overflow: hidden; }
- /**//*鼠标离开时代格式*/
- #autocomplete .unselected{}{ background-color: #fff; color: #666; }
- /**//*关键字信息*/
- #autocomplete .keyname{}{ display: block; float: left; }
- /**//*关键字扩展信息*/
- #autocomplete .keyextend{}{ display: block; float: right; color: green; }
- #autocomplete .unselected .keyextend{}{ color: green; }
- #autocomplete .selected .keyextend{}{ color: #fff; }
- /**//*关闭*/
- #autocomplete .close{}{ text-align: right; }
- #autocomplete .close span{}{ color: blue; cursor: pointer; text-decoration: underline; }
调用范例
$("#Keyword").AutoComplete("search.asp");
是不是很简单的？只是search.asp返回的数据要是上面所提供的格式，对于PHP来说就太方便了，只要生成相应的数组，然后json_encode一下就全出来了，呵呵
继jQuery 1.3.1发布之后，UI包一直没跟上，3月6日，兼容jQuery 1.3.1的UI包终于发布了。大家可以来这里下载jquery-ui-1.7.custom.zip，svn方式：http://jquery-ui.googlecode.com/svn/tags/1.7/
这次改动主要如下：
－－－－－－－－－－－－－－－－－
- 出处：http://kaima.cnblogs.com
- 作者：kai.ma
