ASP.NET 利用AJAX实现搜索提示(上)

2025-02-03 技术教程

我平时的软件开发中，信息的搜索是经常碰到的，增加搜索关键字提示是提高用户体验的一种很好的办法。今天就介绍下在ASP.NET如何利用AJAX来实现搜索的信息提示！

1.需要了解的一些知识点

（1）AJAX对象不同浏览器的创建

不同的浏览器对AJAX（XMLHttpRequest）对象的实现是不一样的，例如IE浏览器是通过ActiveX控件来实现AJAX对象。而其他一些浏览器比如火狐，它将AJAX对象实现成了一个浏览器内部的对象叫XMLHttpRequest，所以不同的浏览器创建AJAX对象的方式也就不同，那么我们来看看不同浏览器之间创建AJAX对象的方式：

在IE浏览器下面的创建：

//IE浏览器
try{
//IE5.0
httpRequest=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5.5以上版本
httpRequest=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){}

在火狐浏览器下面的创建：

//火狐,Safari等浏览器
httpRequest=newXMLHttpRequest();

多浏览器AJAX对象创建函数:

functioncreateAjaxObj(){
varhttpRequest=false;

//判断是否包含XMLHttpRequest对象PS:将来IE高也有可能继承次对象
if(window.XMLHttpRequest){
//火狐,Safari等浏览器
httpRequest=newXMLHttpRequest();
if(httpRequest.overrideMimeType)
httpRequest.overrideMimeType('text/xml');

}//判断是否支持Active控件对象
elseif(window.ActiveXObject){
//IE浏览器
try{
//IE5.0
httpRequest=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5.5以上
httpRequest=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
//返回创建好的AJAX对象
returnhttpRequest;
}

（2）文本框内容改变的事件在不同浏览器下的使用

文本框内容改变的事件目前来说还没有一个标准的版本。我们目前只关心IE与火狐好了，那么在IE和火狐下这两个时间分别怎么表示呢？

IE： onpropertychange

FireFox： oninput

那么如何在页面加载时，根据浏览器给文本框附加对应的change事件呢？

1.JS如何判断浏览器版本

//IE浏览器
if(navigator.userAgent.indexOf("MSIE")>0)
{}

//火狐浏览器
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)
{}

2.根据浏览器版本给文本框附加对应事件

functiongetOs(){
//判断浏览器类型
if(navigator.userAgent.indexOf("MSIE")>0){
//此时假设文本框id为'txtSearch'
//为文本框附加IE所支持的事件
document.getElementById('txtSearch').attachEvent("onpropertychange",search);
OsTyep="MSIE";
}elseif(navigator.userAgent.indexOf("Firefox")>0){
//此时假设文本框id为'txtSearch'
//为文本框附加火狐所支持的事件
document.getElementById('txtSearch').addEventListener("input",search,false);
OsTyep="Firefox";
}
}

3.根据浏览器版本给文本框清除对应事件

functionClearOS(){
if(navigator.userAgent.indexOf("MSIE")>0){//此时假设文本框id为'txtSearch'
//为文本框清除IE所支持的事件
document.getElementById('txtSearch').detachEvent("onpropertychange",search);
OsTyep="MSIE";
}elseif(navigator.userAgent.indexOf("Firefox")>0){ //此时假设文本框id为'txtSearch'
//为文本框清除火狐所支持的事件
document.getElementById('txtSearch').removeEventListener("input",search,false);
OsTyep="Firefox";
}
}

2.客户端的设计

（1）实现流程的分析

了解完以上知识点之后，我们来看一下实现搜索提示的一个整体流程：

（1）首先客户端通过文本框输入事件捕获输入的关键字

（2）在通过我们之前创建好的AJAX对象提交给服务器

（3）服务器接受提交的关键字，进行查询将结果集返回给客户端进行显示

流程如下：

（2）样式的编写

那么接下来我们来看一下样式，其中包括当文本框鼠标移动上去给边框加颜色与搜索结果行选中的样式等，这里就不细说了，列举出来供参考：

<styletype="text/css"media="screen">
body
{
font:11pxarial;
}
/*设置提示提示列表上的样式表*/
.search_link
{
background-color:#FFFFFF;
cursor:pointer;
line-height:24px;
text-indent:6px;
}
/*设置当鼠标移动到提示列表上的样式表*/
.search_link_over
{
background-color:#E8F2FE;
cursor:pointer;
line-height:24px;
text-indent:6px;

}

/*设置显示搜索提示div的样式表*/
#search_div
{
position:absolute;
background-color:#FFFFFF;
text-align:left;
border:1pxsolid#000000;
border-top:0px;
display:none;
min-width:553px;
width:553px;
}

/*文本框样式*/
.mainInput{
line-height:26px;
height:28px;
width:550px;
font-size:16px;
font-family:"微软雅黑","宋体",Candara;
font-weight:normal;
color:#666;
margin:auto;
border:none;
text-indent:8px;
}

/*鼠标放上文本框样式*/
.mainInputOver{
width:552px;
height:30px;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-color:#b7b7b7;
border-right-color:#d0d0d0;
border-bottom-color:#d0d0d0;
border-left-color:#d0d0d0;
}
/*鼠标离开文本框样式*/
.mainInputFocus{
width:552px;
height:30px;
border:1pxsolid#41b5f2;
}

/*点击文本框样式*/
.myBorder
{
width:552px;
height:30px;
border-top:1pxsolid#CCCCCC;
border-bottom:1pxsolid#DDDDDD;
border-left:1pxsolid#DDDDDD;
border-right:1pxsolid#DDDDDD;
}
</style>