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

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

成都創(chuàng)新互聯(lián)是一家專業(yè)提供蘇尼特右企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為蘇尼特右眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

1.需要了解的一些知識(shí)點(diǎn)

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

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

在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對(duì)象創(chuàng)建函數(shù):

function createAjaxObj() {
    var httpRequest = false;

    //判斷是否包含XMLHttpRequest對(duì)象 PS:將來IE高也有可能繼承次對(duì)象
    if (window.XMLHttpRequest) {
        //火狐 , Safari 等瀏覽器
        httpRequest = new XMLHttpRequest();
        if (httpRequest.overrideMimeType)
            httpRequest.overrideMimeType('text/xml');

    }//判斷是否支持Active控件對(duì)象
    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對(duì)象
    return httpRequest;
}

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

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

IE： onpropertychange

FireFox： oninput

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

流程如下： ASP.NET 利用AJAX實(shí)現(xiàn)搜索提示(上)

（2）樣式的編寫

那么接下來我們來看一下樣式，其中包括當(dāng)文本框鼠標(biāo)移動(dòng)上去給邊框加顏色與搜索結(jié)果行選中的樣式等，這里就不細(xì)說了，列舉出來供參考：

文章名稱：ASP.NET利用AJAX實(shí)現(xiàn)搜索提示(上)
網(wǎng)站路徑：http://muchs.cn/article24/pidije.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、做網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容