AJAX无刷新搜索，即输即得（未完善…）

来源：互联网发布：招聘淘宝客服兼职编辑：程序博客网时间：2024/04/29 11:26

GOOGLE.HTM 代码（JAVASCRITP+XMLHTTP）--存在中文乱码问题：
====================================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>google.htm</title>
<link href="style.css" rel="stylesheet" type="text/css">

//主执行函数，请求
function func(startindex) //分页参数，0-1页 10-2页……
{
var p;
var url;
p=google.value;
url="http://www.google.com/custom?hl=zh-CN&inlang=zh-CN&ie=GB2312&oe=GB2312&newwindow=1&client=pub-8331935212574359&domains=www.vpart.net&q="+p+"&start="+startindex
req=false;
req=new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange=ajax; //设置获得响应后将触发的函数名
req.open("GET",url,true);
req.send();
other(1);
}

//获得响应触发的函数
function ajax()
{
if (req.readystate==4)
{
if (req.status==200)
{
var str;
str=req.responseText;
str=str.slice(str.indexOf("<div><p class=g>"),str.indexOf("<div class=n><table")) //截取字符串，只要查询结果
if (str=="")
{
str="<br>查询结果为空";
}
searchresult.innerHTML=str;
other(0);
}
else
{
alert('请求中出现问题.');
}
}
}

//伴随主函数同时响应的附加函数
function other(stat)
{
var msg;

if (stat==1)
{
msg="正在进行关键字<font color=red>"+google.value+"</font>的查询……";
}
if (stat==0)
{
msg="关键字<font color=red>"+google.value+"</font>的查询完成";
}
pagelayer.style.display="block";
msglayer.innerHTML=msg ;
}

//-->
//http://www.google.com/custom?hl=zh-CN&inlang=zh-CN&ie=GB2312&oe=GB2312&newwindow=1&client=pub-8331935212574359&domains=vvwv.vpart.net&q=a&start=20
</script>
</head>
<body leftmargin="100" topmargin="10">
<div id="msglayer"></div>
输入查询关键字：<input id="google" type="text" onKeyUp="func(0)">
<div id="pagelayer" style="display:none">
<a href="#" onClick="func(0)">1</a> 
<a href="#" onClick="func(10)">2</a> 
<a href="#" onClick="func(20)">3</a> 
<a href="#" onClick="func(30)">4</a> 
<a href="#" onClick="func(40)">5</a> 
<a href="#" onClick="func(50)">6</a> 
<a href="#" onClick="func(60)">7</a> 
<a href="#" onClick="func(70)">8</a> 
<a href="#" onClick="func(80)">9</a> 
<a href="#" onClick="func(90)">10</a> 
</div>
<div id="searchresult"></div>
</body>
</html>

=================================================================================

VBS+XMLHTTP --解决了中文乱码的问题，但又存在获得数据后不直接响应问题（J+X中不存在这个问题），即数据已经得到，但是没有立即在DIV中出现，而需要进行第2次相同关键字的搜索时才出现，初步估计是由于VBS中没有使用XMLHTTP的onreadystatechange属性导致的，直接像JS那样使用又会出错，再研究研究……：
=================================================================================

dim req

Function func(startindex)

dim p
dim url
p=google.value
url="http://www.google.com/custom?hl=zh-CN&inlang=zh-CN&ie=GB2312&oe=GB2312&newwindow=1&client=pub-8331935212574359&domains=www.vpart.net&q="&p&"&start="&startindex
req=false
set req = CreateObject("Microsoft.XMLHTTP")
//req.onreadystatechange=ajax
req.open "GET",url,true
req.send

other(1)
ajax()
other(0)

End Function

Function ajax()

if req.readystate=4 then
if req.status=200 then
dim str
dim s
dim e
str=bytes2BSTR(req.responseBody)
s=instr(1,str,"<div><p class=g>")
if s>0 then
e=instr(1,str,"<div class=n><table")
  if e-s>0 then
  str=mid(str,s,e-s)
  end if
else
str="<br>查询结果为空"
end if
searchresult.innerHTML=str
else
msgbox "请求中出现问题。"
End if
End if

End Function

Function other(stat)

dim msg

if stat=1 then

msg="正在进行关键字<font color=red>"+google.value+"</font>的查询……"
end if
if stat=0 then
msg="关键字<font color=red>"+google.value+"</font>的查询完成"
end if
pagelayer.style.display="block"
msglayer.innerHTML=msg

End Function

Function bytes2BSTR(vIn)
    strReturn = ""
    For i = 1 To LenB(vIn)
        ThisCharCode = AscB(MidB(vIn,i,1))
        If ThisCharCode < &H80 Then
            strReturn = strReturn & Chr(ThisCharCode)
        Else
            NextCharCode = AscB(MidB(vIn,i+1,1))
            strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
            i = i + 1
        End If
    Next
    bytes2BSTR = strReturn
End Function

</script>
</head>
<body leftmargin="100" topmargin="10">
<div id="msglayer"></div>
输入查询关键字：<input id="google" type="text" onKeyUp="func(0)">

<div id="pagelayer" style="display:none">
<a href="#" onClick="func(0)">1</a> 
<a href="#" onClick="func(10)">2</a> 
<a href="#" onClick="func(20)">3</a> 
<a href="#" onClick="func(30)">4</a> 
<a href="#" onClick="func(40)">5</a> 
<a href="#" onClick="func(50)">6</a> 
<a href="#" onClick="func(60)">7</a> 
<a href="#" onClick="func(70)">8</a> 
<a href="#" onClick="func(80)">9</a> 
<a href="#" onClick="func(90)">10</a> 
</div>
<div id="searchresult"></div>
</body>
</html>
==================================================================================