zoukankan      html  css  js  c++  java
  • AJAX无刷新搜索,即输即得(未完善…)

    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">

    <script language="JavaScript" type="text/JavaScript">
    <!--
    var req=false; //定义全局变量(将被作为XMLHTTP)

    //主执行函数,请求
    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>&nbsp;
    <a href="#" onClick="func(10)">2</a>&nbsp;
    <a href="#" onClick="func(20)">3</a>&nbsp;
    <a href="#" onClick="func(30)">4</a>&nbsp;
    <a href="#" onClick="func(40)">5</a>&nbsp;
    <a href="#" onClick="func(50)">6</a>&nbsp;
    <a href="#" onClick="func(60)">7</a>&nbsp;
    <a href="#" onClick="func(70)">8</a>&nbsp;
    <a href="#" onClick="func(80)">9</a>&nbsp;
    <a href="#" onClick="func(90)">10</a>&nbsp;
    </div>
    <div id="searchresult"></div>
    </body>
    </html>

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

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

    <!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">

    <script language=VBScript>

    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>&nbsp;
    <a href="#" onClick="func(10)">2</a>&nbsp;
    <a href="#" onClick="func(20)">3</a>&nbsp;
    <a href="#" onClick="func(30)">4</a>&nbsp;
    <a href="#" onClick="func(40)">5</a>&nbsp;
    <a href="#" onClick="func(50)">6</a>&nbsp;
    <a href="#" onClick="func(60)">7</a>&nbsp;
    <a href="#" onClick="func(70)">8</a>&nbsp;
    <a href="#" onClick="func(80)">9</a>&nbsp;
    <a href="#" onClick="func(90)">10</a>&nbsp;
    </div>
    <div id="searchresult"></div>
    </body>
    </html>
    ==================================================================================

  • 相关阅读:
    最大子数组求和并进行条件组合覆盖测试
    Ubuntu 16.04 c++ Google框架单元测试
    The directory '/home/stone/.cache/pip/http' or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If execu
    Problem executing scripts APT::Update::Post-Invoke-Success 'if /usr/bin/test -w /var/cache/app-info -a -e /usr/bin/appstreamcli; then appstreamcli refresh > /dev/null; fi'
    个人博客作业三:微软小娜APP的案例分析
    补交 作业一
    补交 作业二:个人博客作业内容:需求分析
    嵌入式软件设计第12次实验报告
    嵌入式软件设计第11次实验报告
    嵌入式软件设计第10次实验报告
  • 原文地址:https://www.cnblogs.com/ZetaChow/p/2237470.html
Copyright © 2011-2022 走看看