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

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

成都创新互联是一家专业提供苏尼特右企业网站建设,专注与网站设计制作、做网站、H5高端网站建设、小程序制作等业务。10年已为苏尼特右众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

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实现搜索提示(上)