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

最新推荐文章于 2021-08-06 22:36:40 发布

weixin_33966095

最新推荐文章于 2021-08-06 22:36:40 发布

阅读量74

点赞数

原文链接：http://blog.51cto.com/wangboyang/748240

版权

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

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

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

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

在IE浏览器下面的创建：

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

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

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

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

function createAjaxObj() {
    var httpRequest = false ;

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

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

（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.根据浏览器版本给文本框附加对应事件

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

function ClearOS() {
if (navigator.userAgent.indexOf( " MSIE " ) > 0 ) {

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

        //此时假设文本框id为'txtSearch'
        //为文本框清除火狐所支持的事件
        document.getElementById( ' txtSearch ' ).removeEventListener( " input " , search, false );
        OsTyep = " Firefox " ;
    }
}

2.客户端的设计

（1）实现流程的分析

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

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

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

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

流程如下：