完全基于 JavaScript 实现的分栏搜索百度和 Google 的页面 (2)
这次主要说 baigoogledu_head.htm 这个页面，也就是搜索框架页中的头页面部分。功能很明确——显示我的首页链接，搜索页面链接，单独搜索百度、Google的链接，搜索表单和分页。搜索表单部分和首页一样，都是一个 get 方式的 form，单独的搜索链接和框架页中设置两个框架的 src 属性一样，分页只是增加一个上一页下一页和显示第几页，后来又增加了一个正负10页的下拉列表分页，这些都很简单，就不再赘述了，稍后看 javascript 代码就可以了。
这里遇到的一个大难题是怎样把以 utf-8 编码方式传递到本页的搜索关键词转换成中文或特殊符号等，因为 javascript 中的 decodeURI 函数兼容性较差，而 escape 和 unescape 支持的是 ucs + ascii 这种组合，因此需要把 utf-8 转换成 ucs。
首先说下 utf-8 和 ucs 之间的区别吧，ucs 是通用字符集 (Universal Character Set) 的缩写，它使用 31 位来编码一个字符，即从 0x00000000 到 0x7fffffff，长度为定长 4 字节，因此使用 escape 编码中文后得到是类似 %uXXXX 这样的形式，XXXX 即为 ucs 的 4 字节编码，而编码英文特殊符号则使用 ascii 的编码方式，即 %XX ，XX 即为 ascii 码 (事实上 utf-8 编码 ascii 字符也是这样，下面会详细说明)。而 utf-8，即 UCS Transformation Form - 8，是目前较为流行的 unicode 编码，这种编码实际上是变长的，因为在某些情况下，ucs 编码的 0x00 表示为 ascii 中的 nul，即 '\0'，而这在 C 语言中代表的是字符串的结束，因此需要对 C 语言做重要的改变才能使用，而 utf-8 编码则没有问题。
通常 unicode 字符用 u+xxxx 这种形式来表示，xxxx 为十六进制，代表这个字符的 unicode 码，首先看下下面这个表：
u+00000000 - u+0000007f = 0xxxxxxx
u+00000080 - u+000007ff = 110xxxxx 10xxxxxx
u+00000800 - u+0000ffff = 1110xxxx 10xxxxxx 10xxxxxx
u+00010000 - u+001fffff = 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
u+00200000 - u+03ffffff = 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
u+04000000 - u+7fffffff = 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
其中的 x 由字符编码数的二进制来填充，只用最短的那个足够表达一个字符编码数的多字节串，在多字节串中，第一个字节的开头 1 的数目就是整个串中字节的数目。就已编码字符数来看，目前仅仅使用了 16 位，故目前最长仅为 3 字节，实际上最长可以用 6 字节来编码 31 位，而且对于 0x00 到 0x7f 范围内的 ascii 字符，utf-8 编码和 ascii 编码实际上是一样的，因此在 ascii 系统里 utf-8 可以兼容 ascii。而对于大于 1 字节的情况，所有字节均为 1 开头，即 0x80 到 0xff 的范围，因此可以很方便的与 1 字节的情况区分开。
例如：符号 @ 的 ascii 码为 0x40，二进制码为 0100000，则 utf-8 的二进制码也为 01000000，即 0x40；“田嵩”的 ucs 码为 0x75 0x30 和 0x5d 0x69，二进制为 01110101 00110000 和 01011101 01101001，因为是 16 位，故需要 3 个字节来表示，utf-8 的二进制码为 11100111 10010100 10110000 和 11100101 10110101 10101001 ，即 0xe7 0x94 0xb0 和 0xe5 0xb5 0xa9，因此使用 utf-8 来编码 url 时即为 %E7%94%B0%E5%B5%A9。
现在我们关心的，是怎样将 url 传递来的 %E7%94%B0%E5%B5%A9+hust 这样的字符串转化为 %u7530%u5D69%20hust 进而用 unescape 转化为 田嵩 hust (中间有一个空格)。首先读取字符串，因为 % 永远是作为 url 编码的标识符存在 (单独的 % 被编码为 %25)，因此当检测到 % 后，继续检测其后面的 2 个字符，并转化为二进制码，如果首位为 0 则直接返回 % 加这 2 个字符，否则根据前面 1 的个数连续读取多组，然后转化为 ucs 编码并在前面加上 %u 返回。相关函数如下：
//为方便十六进制和十进制的转换而设
function b2h(b) {
//2 进制字符串转十六进制字符串
var r = '';
var t = 0;
for (var i = 0; i < b.length; i++) {
t = t * 2 + (b.charAt(i) == '0' ? 0 : 1);
//每次扫描后，将 t 乘以 2，然后加上本位，这样，对于 0110 在每次扫描后 t 的值分别为 0，0*2+1=1，1*2+1=3，3*2+0=6
if (i % 4 == 3) {
r += cc.charAt(t);
t = 0;
//读取完 4 个字节后将数字转化为十六进制字符加到结果的后面，并将 t 置 0
}
}
return r;
}
function h2b(h) {
//16 进制字符串转二进制字符串
h = h.toLowerCase();
var r = '';
for (var i = 0; i < h.length; i++) {
var t = cc.indexOf(h.charAt(i));
//将十六进制字符转化为数字
r += ((t & 8) == 0 ? '0' : '1') + ((t & 4) == 0 ? '0' : '1') + ((t & 2) == 0 ? '0' : '1') + ((t & 1) == 0 ? '0' : '1');
//根据按位“与”的结果得出 4 位二进制数的值，例如 6 的二进制为 0110，其与8、4、2、1 (1000、0100、0010、0001)的按位“与”结果为 0、4、2、0，因此根据是否为 0 得出 0110
}
return r;
}
function t(s) {
var r = '';
var si = 0;
while (si < s.length) {
//扫描字符串，si 为当前字符指针
if (s.charAt(si) == '%') {
//扫描到 % 符号
var utfh = s.charAt(si + 1) + s.charAt(si + 2);
si += 3;
var utfb = h2b(utfh);
//将接下来的 2 个字节读入并转化为二进制字符串，同时指针移动到这 2 个字节之后，即移动 3 个字节
var c = 0;
for (var j = 0; j < utfb.length; j++) {
if (utfb.charAt(j) == '0')
break;
c++;
}
//判断二进制字符串首 1 的个数
if (c == 0) {
r += '%' + utfh;
continue;
// 1 的个数为 0，说明是 ascii 字符，直接加到结果后面，并继续下一扫描
}
var ucsb = '';
for (var j = c + 1; j < 8; j++)
ucsb += utfb.charAt(j);
//滤掉前缀将二进制字符写入另一变量，如 1110，c = 3，则从第 4 位开始到第 7 位
for (var i = 1; i < c; i++) {
utfh = s.charAt(si + 1) + s.charAt(si + 2);
si += 3;
utfb = h2b(utfh);
for (var j = 2; j < 8; j++)
ucsb += utfb.charAt(j);
//根据 1 的个数继续读入后续分组，并用相同方法写入二进制字符，因后续分组均为 10xxxxxx，故从固定的第 2 位开始到第 7 位
}
r += '%u' + b2h(ucsb);
//转化为十六进制字符串并在前面加上 %u 后加到结果后面
continue;
}
r += s.charAt(si) == '+' ? '%20' : s.charAt(si);
//扫描到不是 %，判断如果是 + (空格的 url 编码形式) 则加上 %20 (空格的 escape 结果) 到结果后面，否则加上该字符本身到结果后面
si++;
}
return r;
}
调用的时候就很简单了，直接使用 wi.value = unescape(t(w))，其中 wi 为关键字文本框，w 为从 url 中获取的已编码搜索关键字。本页面所有脚本如下：
function b2h(b) {
var r = '';
var t = 0;
for (var i = 0; i < b.length; i++) {
t = t * 2 + (b.charAt(i) == '0' ? 0 : 1);
if (i % 4 == 3) {
r += cc.charAt(t);
t = 0;
}
}
return r;
}
function h2b(h) {
h = h.toLowerCase();
var r = '';
for (var i = 0; i < h.length; i++) {
var t = cc.indexOf(h.charAt(i));
r += ((t & 8) == 0 ? '0' : '1') + ((t & 4) == 0 ? '0' : '1') + ((t & 2) == 0 ? '0' : '1') + ((t & 1) == 0 ? '0' : '1');
}
return r;
}
function t(s) {
var r = '';
var si = 0;
while (si < s.length) {
if (s.charAt(si) == '%') {
var utfh = s.charAt(si + 1) + s.charAt(si + 2);
si += 3;
var utfb = h2b(utfh);
var c = 0;
for (var j = 0; j < utfb.length; j++) {
if (utfb.charAt(j) == '0')
break;
c++;
}
if (c == 0) {
r += '%' + utfh;
continue;
}
var ucsb = '';
for (var j = c + 1; j < 8; j++)
ucsb += utfb.charAt(j);
for (var i = 1; i < c; i++) {
utfh = s.charAt(si + 1) + s.charAt(si + 2);
si += 3;
utfb = h2b(utfh);
for (var j = 2; j < 8; j++)
ucsb += utfb.charAt(j);
}
r += '%u' + b2h(ucsb);
continue;
}
r += s.charAt(si) == '+' ? '%20' : s.charAt(si);
si++;
}
return r;
}
window.onload = function() {
var url = document.location.toString().split('?');
var w = '', p = 1;
if (url.length == 2) {
url = url[1].split('&');
w = url[0].substring(2);
if (url.length == 2)
p = parseInt(url[1].substring(2));
}
var baidu = document.getElementById('baidu');
var google = document.getElementById('google');
var wi = document.getElementById('w');
var pp = document.getElementById('pp');
var ps = document.getElementById('ps');
var np = document.getElementById('np');
var pl = document.getElementById('pl');
wi.value = unescape(t(w));
ps.innerHTML = '第' + p.toString() + '页';
if (p > 1) {
pp.style.display = '';
pp.href = 'baigoogledu_search.htm?w=' + w + '&p=' + (p - 1).toString();
}
np.href = 'baigoogledu_search.htm?w=' + w + '&p=' + (p + 1).toString();
var start = 1, end = p + 10;
if (p - 10 > start)
start = p - 10;
for (var i = start; i <= end; i++) {
var opt = document.createElement('option');
opt.label = i.toString();
opt.value = i.toString();
opt.selected = p == i;
pl.appendChild(opt);
}
p = (p - 1) * 10;
google.href = 'http://www.google.cn/search?q=' + w + '&start=' + p.toString();
baidu.href = 'http://www.baidu.com/s?ie=utf-8&wd=' + w + '&pn=' + p.toString();
}
至此算是把所有内容都说完了。其实还是最后的 ucs 和 utf-8 转换最为麻烦，耗费的时间也最多。
浙公网安备 33010602011771号