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

发布时间：2020-06-17 22:10:34 来源：网络阅读：921 作者：wangboyang 栏目：编程语言

我平时的软件开发中，信息的搜索是经常碰到的，增加搜索关键字提示是提高用户体验的一种很好的办法。今天就介绍下在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）服务器接受提交的关键字，进行查询将结果集返回给客户端进行显示

流程如下： ASP.NET 利用AJAX实现搜索提示(上)

（2）样式的编写

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

向AI问一下细节

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

猜你喜欢

最新资讯

相关推荐

相关标签