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

  • 相关阅读:
    选项菜单-OptionMenu
    Android Studio教程
    android 使用layer-list
    JavaScript OOP 学习总结
    Android应用中网络请求库Volley的使用
    Android应用中网络请求库Volley的介绍
    Android UI: LinearLayout中layout_weight 属性的使用规则
    Robot Framework 培训
    Begin :SWIFT 基本语法
    树莓派raspberrypi系统安装docker以及编译nginx和php镜像
  • 原文地址:https://www.cnblogs.com/ZetaChow/p/2237470.html
Copyright © 2011-2022 走看看