词条信息

admin
超级管理员
版本创建者 发短消息   
简易百科旧版 >> AJAX 查询请求实例 >> 历史版本

最新历史版本 :AJAX 查询请求实例 返回词条




AJAX - 查询请求实例 - 3个页面

clienthint.js  AJAX服务响应页面

//-----------------------------------------------------------------------

//服务器响应过程函数showHint(str) 

//------------------------------------------------------------------------



var xmlHttp;            

function showHint(str){  





 //判断表单输入内容--------------------------------------------- 

   if (str.length==0){   

   document.getElementById("txtHint").innerHTML="";  

   return;                                           

    }

 

 //打开浏览器判断函数----------------------------------------

  xmlHttp=GetXmlHttpObject();  

  if (xmlHttp==null){

    alert ("您的浏览器不支持AJAX!");

    return;

    }



 



//打开服务器响应过程函数--------------------------------------

xmlHttp.onreadystatechange=stateChanged; 



function stateChanged() {      

if (xmlHttp.readyState==4){    

document.getElementById("txtHint").innerHTML=xmlHttp.responseText; 

}

}



//象服务器请求响应---------------------

  var url="gethint.asp";  

  url=url+"?q="+encodeURIComponent(str);   

  xmlHttp.open("GET",url,true); 

  xmlHttp.send(null);           

} 



//-----------------------------------------------------------------------

//判断浏览器是否支持AJAX函数---通用函数

//------------------------------------------------------------------------

function GetXmlHttpObject()

{

  var xmlHttp=null;   



  try

    {    xmlHttp=new XMLHttpRequest();

    }

  catch (e)

    {

    try

      {

      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

      }

    catch (e)

      {

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      }

    }

return xmlHttp;

}

//-------------------------------------------------------------------------


 


index.asp 提交页面


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<script src="clienthint.js"></script> 

</head>



<body>



<form> 

查询姓名:<input type="text" id="txt1" onkeyup="showHint(this.value)" />

</form>



<p>你查的结果: <span id="txtHint"></span></p> 



</body>

</html>


 


gethint.asp ASP处理页面

<%

response.expires=-1  '不缓存

dim a(30)



'用名字为数组赋值

a(1)="Anna"

a(2)="Brittany"

a(3)="Cinderella"

a(4)="Diana"

a(5)="Eva"

a(6)="Fiona"

a(7)="Gunda"

a(8)="Hege"

a(9)="Inga"

a(10)="Johanna"

a(11)="Kitty"

a(12)="Linda"

a(13)="Nina"

a(14)="Ophelia"

a(15)="Petunia"

a(16)="Amanda"

a(17)="Raquel"

a(18)="Cindy"

a(19)="Doris"

a(20)="Eve"

a(21)="Evita"

a(22)="Sunniva"

a(23)="Tove"

a(24)="Unni"

a(25)="Violet"

a(26)="我me+%&"

a(27)="Elizabeth"

a(28)="我"

a(29)="Wenche"

a(30)="Wenche"


'从URL取得参数q----------------------------------------

q=ucase(request.querystring("q"))


'判断输入---------------------------------------------

'如果q的长度大于0,则查找所有的hint

if len(q)>0 then  

 hint=""        

  for i=1 to 30   

    if q=ucase(mid(a(i),1,len(q))) then  

       if hint="" then  

         hint=a(i)        

        else                 

        hint=hint & " , " & a(i)

      end if

    end if

  next

end if


'或者输出正确的值

if hint="" then                 

  response.write("找不到此用户")  

else                             

  response.write (hint)   

end if

%>



演示