在类unix中,是\n (0x0A)。以为没有什么大的问题,没想到,这次开发一个小程序,却让我对这个问题大为头痛。
首先发现这个问题是这样的:
我的这个程序采用的是Extjs+php的方式,通过ajax进行通讯。其中有个页面,如图:
两个文本框,一个text,一个textarea,当textarea中含有回车换行的时候,会出现脚本错误。后面发现是因为如果服务器端返回的字符串换行了,会造成js解析出现错误,可见js在解析json数据时候的语法还是和在本地定义的字符串变量的语法一致的。一个字符串不能多行,有回车换行的时候需要转义符号:\n (\r\n)。
不过这个并不是我要说明的问题,我要说明的问题是,当我在解决这个问题的时候,抓包分析的时候,发现一个有趣的现象,就是发现浏览器发送到服务器对回车换行的编码不一致。
例如上图中的字符串在通过extjs中的
复制代码 代码如下:
Ext.Ajax.request({
url:'CatMan.php',
form:this.FORM_NAME,
scope:this,
callback:function(o,s,r){
var retObj=Ext.decode(r.responseText);
if(retObj.success){
alert('保存成功!');
}
}
});
进行保存时候,发现发送到服务器的编码是这样的:
catdesc=%E6%9E%97%0A%0A%E5%B0%910A%0A%0Aa%E5%8D%8E
注意其中的红色标记的%0A,这是\n的编码。\r的编码竟然不见了。
然后我如果采用form submit直接提交,却发现编码是:
%E6%9E%97%0D%0A%0D%0A%E5%B0%91%0D%0A%0D%0A%0D%0Aa%E5%8D%8E
发现\r(%0D)的编码是在的。
(以上为在IE9中测试结果。)
难道是ExtJs的问题?
如果分析Extjs的源代码,找到取form值得地方。如下:
复制代码 代码如下:
serializeForm : function(form) {
debugger
var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
hasSubmit = false,
encoder = encodeURIComponent,
name,
data = '',
type,
hasValue;
Ext.each(fElements, function(element){
name = element.name;
type = element.type;
if (!element.disabled && name) {
if (/select-(one|multiple)/i.test(type)) {
Ext.each(element.options, function(opt){
if (opt.selected) {
hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
data += String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
}
});
} else if (!(/file|undefined|reset|button/i.test(type))) {
if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {
data += encoder(name) + '=' + encoder(element.value) + '&';
hasSubmit = /submit/i.test(type);
}
}
}
});
return data.substr(0, data.length - 1);
},
可以发现extjs采用的是js中的encodeURIComponent函数进行值的编码。
难道是encodeURIComponent的问题?
搜索网络,发现一篇博文中提到这个问题,见http://www.yeahxj.com/2011/11/07/enter-code-for-all-browser/ (回车符 \r\n 在各个浏览器中无耻的表现)
于是我在ie6,ie8,ie9中分别进行了测试,发现果然存在这个问题。
总结:
这个问题虽然小,但是在某些场合却会让人和头痛,这也是搞计算机程序设计人员的悲哀,大量的不兼容,造成很多程序出现各种各样奇怪的问题。例如这个小问题可能造成一个结果,例如,我这个程序,需要在前台显示内容的时候保留回车换行。这种一般有两种处理方法,一种是采用<pre>标签,但是这个标签用起来很不方便的,尝试发现格式变化不太好控制。另外一种方法就是将回车换行变为<br />标记。我就是采用的这种方法,刚开始我写的正规表达式是/\r\n/,结果发现什么都没匹配到,后面我就改成/[\r\n]/但是这种造成的问题就是在ie6,7,8中将会多出一行来。最后为了统一处理,我改为先替换/\r\n/组合,然后再替换/\n/。问题得到解决。
** 本人原创文章,转摘请保留本段内容,万分感谢!
** microdreamsoft(Lin Shaohua):
** 由于本人水平有限,欢迎各位高手指正。
首先发现这个问题是这样的:
我的这个程序采用的是Extjs+php的方式,通过ajax进行通讯。其中有个页面,如图:
两个文本框,一个text,一个textarea,当textarea中含有回车换行的时候,会出现脚本错误。后面发现是因为如果服务器端返回的字符串换行了,会造成js解析出现错误,可见js在解析json数据时候的语法还是和在本地定义的字符串变量的语法一致的。一个字符串不能多行,有回车换行的时候需要转义符号:\n (\r\n)。
不过这个并不是我要说明的问题,我要说明的问题是,当我在解决这个问题的时候,抓包分析的时候,发现一个有趣的现象,就是发现浏览器发送到服务器对回车换行的编码不一致。
例如上图中的字符串在通过extjs中的
复制代码 代码如下:
Ext.Ajax.request({
url:'CatMan.php',
form:this.FORM_NAME,
scope:this,
callback:function(o,s,r){
var retObj=Ext.decode(r.responseText);
if(retObj.success){
alert('保存成功!');
}
}
});
进行保存时候,发现发送到服务器的编码是这样的:
catdesc=%E6%9E%97%0A%0A%E5%B0%910A%0A%0Aa%E5%8D%8E
注意其中的红色标记的%0A,这是\n的编码。\r的编码竟然不见了。
然后我如果采用form submit直接提交,却发现编码是:
%E6%9E%97%0D%0A%0D%0A%E5%B0%91%0D%0A%0D%0A%0D%0Aa%E5%8D%8E
发现\r(%0D)的编码是在的。
(以上为在IE9中测试结果。)
难道是ExtJs的问题?
如果分析Extjs的源代码,找到取form值得地方。如下:
复制代码 代码如下:
serializeForm : function(form) {
debugger
var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
hasSubmit = false,
encoder = encodeURIComponent,
name,
data = '',
type,
hasValue;
Ext.each(fElements, function(element){
name = element.name;
type = element.type;
if (!element.disabled && name) {
if (/select-(one|multiple)/i.test(type)) {
Ext.each(element.options, function(opt){
if (opt.selected) {
hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
data += String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
}
});
} else if (!(/file|undefined|reset|button/i.test(type))) {
if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {
data += encoder(name) + '=' + encoder(element.value) + '&';
hasSubmit = /submit/i.test(type);
}
}
}
});
return data.substr(0, data.length - 1);
},
可以发现extjs采用的是js中的encodeURIComponent函数进行值的编码。
难道是encodeURIComponent的问题?
搜索网络,发现一篇博文中提到这个问题,见http://www.yeahxj.com/2011/11/07/enter-code-for-all-browser/ (回车符 \r\n 在各个浏览器中无耻的表现)
于是我在ie6,ie8,ie9中分别进行了测试,发现果然存在这个问题。
总结:
这个问题虽然小,但是在某些场合却会让人和头痛,这也是搞计算机程序设计人员的悲哀,大量的不兼容,造成很多程序出现各种各样奇怪的问题。例如这个小问题可能造成一个结果,例如,我这个程序,需要在前台显示内容的时候保留回车换行。这种一般有两种处理方法,一种是采用<pre>标签,但是这个标签用起来很不方便的,尝试发现格式变化不太好控制。另外一种方法就是将回车换行变为<br />标记。我就是采用的这种方法,刚开始我写的正规表达式是/\r\n/,结果发现什么都没匹配到,后面我就改成/[\r\n]/但是这种造成的问题就是在ie6,7,8中将会多出一行来。最后为了统一处理,我改为先替换/\r\n/组合,然后再替换/\n/。问题得到解决。
** 本人原创文章,转摘请保留本段内容,万分感谢!
** microdreamsoft(Lin Shaohua):
** 由于本人水平有限,欢迎各位高手指正。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]