ASP.NET 利用AJAX實現(xiàn)搜索提示(上)

yan的圖書41 2013-12-25

展開全文

我平時的軟件開發(fā)中，信息的搜索是經(jīng)常碰到的，增加搜索關(guān)鍵字提示是提高用戶體驗的一種很好的辦法。今天就介紹下在ASP.NET如何利用AJAX來實現(xiàn)搜索的信息提示！

1.需要了解的一些知識點

（1）AJAX對象不同瀏覽器的創(chuàng)建

不同的瀏覽器對AJAX（XMLHttpRequest）對象的實現(xiàn)是不一樣的，例如IE瀏覽器是通過ActiveX控件來實現(xiàn)AJAX對象。而其他一些瀏覽器比如火狐，它將AJAX對象實現(xiàn)成了一個瀏覽器內(nèi)部的對象叫XMLHttpRequest，所以不同的瀏覽器創(chuàng)建AJAX對象的方式也就不同，那么我們來看看不同瀏覽器之間創(chuàng)建AJAX對象的方式：

在IE瀏覽器下面的創(chuàng)建：

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

在火狐瀏覽器下面的創(chuàng)建：

//火狐, Safari 等瀏覽器
httpRequest = new XMLHttpRequest();

多瀏覽器AJAX對象創(chuàng)建函數(shù):

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) { }
        }
    }
    //返回創(chuàng)建好的AJAX對象
    return httpRequest;
}

（2）文本框內(nèi)容改變的事件在不同瀏覽器下的使用

文本框內(nèi)容改變的事件目前來說還沒有一個標(biāo)準的版本。我們目前只關(guān)心IE與火狐好了，那么在IE和火狐下這兩個時間分別怎么表示呢？

IE： onpropertychange

FireFox： oninput

那么如何在頁面加載時，根據(jù)瀏覽器給文本框附加對應(yīng)的change事件呢？

1.JS如何判斷瀏覽器版本

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

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

2.根據(jù)瀏覽器版本給文本框附加對應(yīng)事件

3.根據(jù)瀏覽器版本給文本框清除對應(yīng)事件

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

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

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

2.客戶端的設(shè)計

（1）實現(xiàn)流程的分析

了解完以上知識點之后，我們來看一下實現(xiàn)搜索提示的一個整體流程：

（1）首先客戶端通過文本框輸入事件捕獲輸入的關(guān)鍵字

（2）在通過我們之前創(chuàng)建好的AJAX對象提交給服務(wù)器

（3）服務(wù)器接受提交的關(guān)鍵字，進行查詢將結(jié)果集返回給客戶端進行顯示

流程如下：