//使用封裝方法的人只關心提供http的請求方法，url地址，數據，成功和失敗的回調方法//類的構造定義，主要職責就是新建出XMLHttpRequest對象var MyXMLHttpRequest = function() {    var xmlhttprequest;    if (window.XMLHttpRequest) {        xmlhttprequest = new XMLHttpRequest();        if (xmlhttprequest.overrideMimeType) {            xmlhttprequest.overrideMimeType("text/xml");        }    } else if (window.ActiveXObject) {        var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];        for (var i = 0 ; i < activeName.length; i++) {            try{                xmlhttprequest = new ActiveXObject(activeName[i]);                break;            } catch(e) {            }        }    }    if (xmlhttprequest == undefined || xmlhttprequest == null) {        alert("XMLHtttpRequest對象創(chuàng)建失敗！！");    } else {        this.xmlhttp = xmlhttprequest;    }}//用戶發(fā)送請求的方法MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback) {    if (this.xmlhttp != undefined && this.xmlhttp != null) {        method = method.toUpperCase();        if (method != "GET" && method != "POST") {            alert("HTTP的請求方法必須是GET或POST！！");            return;        }        if (url == null || url == undefined) {            alert("HTTP的請求地址必須設置！");            return;        }        var tempxmlhttp = this.xmlhttp;        this.xmlhttp.onreadystatechange = function() {            if (tempxmlhttp.readyState == 4) {                if (tempxmlhttp.status == 200) {                    var responseText = tempxmlhttp.responseText;                    var reponseXML = tempxmlhttp.responseXML;                    if (callback == undefined || callback == null) {                        alert("沒有設置處理數據正確返回的方法！");                        alert("返回的數據：" + responseText);                    } else {                        callback(responseText,reponseXML);                    }                } else {                    if (failback == undefined || failback == null) {                        alert("沒有設置處理數據返回失敗的處理方法！");                        alert("HTTP的響應碼：" + tempxmlhttp.status + ",響應碼的文本信息：" + tempxmlhttp.statusText);                    } else {                        failback(tempxmlhttp.status,tempxmlhttp.statusText);                    }                }            }        }        //解決緩存的轉換        if (url.indexOf("?") >= 0) {            url = url + "&t=" + (new Date()).valueOf();        } else {            url = url + "?t=" + (new Date()).valueOf();        }        //解決跨域的問題        if (url.indexOf("http://") >= 0) {            url.replace("?","&");            url = "Proxy?url=" + url;        }        this.xmlhttp.open(method,url,true);        //如果是POST方式，需要設置請求頭        if (method == "POST") {            this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        }        this.xmlhttp.send(data);    } else {        alert("XMLHtttpRequest對象創(chuàng)建失敗，無法發(fā)送數據！");    }}MyXMLHttpRequest.prototype.abort = function() {    this.xmlhttp.abort();}/*//加入需要使用我的封裝，可以使用如下代碼var xmlhttp = new MyXMLHttpRequest();xmlhttp.send("GET","AJAXServer?name=123",null,callback,faliback); */var textNode;var popupNode;//保存文本框中本次事件之前的內容var lastTextValue;//記錄當前高亮節(jié)點的索引值var highLightIndex = -1;//延時操作的idvar timeoutId window.onload=init;//頁面初始化執(zhí)行的方法function init() {    //找到頁面中的兩個反復使用的元素節(jié)點    textNode = document.getElementById("autotext");    popupNode = document.getElementById("popup");                //控制彈出框的位置    //先找到文本框的位置    var left = textNode.offsetLeft;    var top = textNode.offsetTop;    var parent = textNode.offsetParent;    while(parent) {        left += parent.offsetLeft;        top += parent.offsetTop;        parent = parent.offsetparent;    }    //控制彈出框的顯示位置和寬度    popupNode.style.left = left + "px";    popupNode.style.top = top + textNode.offsetHeight + "px";    popupNode.style.width = textNode.offsetWidth + "px";    //這里沒有控制彈出框的高度,復雜例子的話，一種方式可以控制服務器端回傳的數據量，另一種方式就是直接控制彈出框的高，并且讓它可以顯示滾動條            }//處理鍵盤按下再彈起時的事件function completeText(event) {    //為了判斷鍵盤當前是那個鍵按下后彈起，我們需要確定當前鍵盤按鍵的內容    //針對不同的瀏覽器，來獲取event對象         var myevent = window.event || event;    var textValue = textNode.value;    //獲取當前彈起的鍵盤按鍵所對應的鍵碼    var keyCode = myevent.keyCode;    if (keyCode >= 48 && keyCode <= 90 || keyCode == 8 || keyCode == 46 || textValue!=""|| textValue!=null ) {        //字母，數字，退格鍵，刪除按下的時候，需要將當前文本框中的內容送到服務器端，獲得可以補全用的單詞        //需要獲取當前文本框中的內容        textValue = textNode.value;             if (textValue == ""){            //不需要和服務器進行交互            //需要清除彈出框的內容            clearPopup();        } else if (textValue != lastTextValue){            //先把上一次的延時操作清除            clearTimeout(timeoutId);            //利用setTimeout,它可以延時執(zhí)行我的一個方法            timeoutId = setTimeout(function(){                var xmlhttp = new MyXMLHttpRequest();                textValue=  encodeURI(encodeURI(textValue));                              xmlhttp.send("POST", "AutoComplete.aspx", "word=" +textValue,callback, failback);            },500);        }        lastTextValue = textValue;        //alert("字母，數字，退格或刪除被按下");       }    if(keyCode==38||keyCode==40){           //按上下鍵選擇被補全出來的內容           moveHighLight(keyCode);    }    if( keyCode == 13 ){           //如果按下回車鍵，彈出框中有內容被選中時，則把彈出框中的內容補全文本框，如果沒有被選中，就給出一個提示信息表式需要提交數據           if (highLightIndex != -1) {              //表式彈出框有內容被選中              var word = popupNode.childNodes[highLightIndex].firstChild.nodeValue;              textNode.value = word;              lastTextValue = word;              clearPopup();              highLightIndex = -1;           } else {            //彈出框沒有內容被選中              alert("文本框中的內容：" + textNode.value + "被提交");                            clearPopup();           }             }        }        //處理鍵盤上下鍵事件的方法function moveHighLight(keyCode) {    var divNodes = popupNode.childNodes;    var length = divNodes.length;    if (length > 0) {        //只要在彈出框中有內容，并且顯示出來的時候才進行處理        if (keyCode == 38) {            //向上鍵按下            if (highLightIndex != -1) {                //表式當前已經有節(jié)點被高亮                divNodes[highLightIndex].style.backgroundColor = "white";                            }            highLightIndex--;            if (highLightIndex < 0) {                highLightIndex = length - 1;            }            divNodes[highLightIndex].style.backgroundColor = "#3366CC";                            } else if (keyCode == 40) {            //向下鍵按下            if (highLightIndex != -1) {                //表式當前已經有節(jié)點被高亮                divNodes[highLightIndex].style.backgroundColor = "white";            }            highLightIndex++;            if (highLightIndex > length - 1) {                highLightIndex = 0;            }            divNodes[highLightIndex].style.backgroundColor = "#3366CC";        }    }}        //處理服務器端數據返回的方法function callback(reponseText, responseXML) {    var rootElement;    if (responseXML != null && (rootElement = responseXML.documentElement) != null        && rootElement.nodeName == "words") {        //保證響應的XML存在，并且解析正確        //首先要獲取所有的單詞        var words = rootElement.getElementsByTagName("word");        var length = words.length;        if (length > 0) {            //先清除之前的內容            popupNode.innerHTML = "";            //重新初始化高亮的索引值            highLightIndex = -1;            for (var i = 0; i < length; i++) {                //取到單詞的內容                var wordValue = words[i].firstChild.nodeValue;                var divNode = document.createElement("div");                //定義div節(jié)點的id屬性為當前的索引值                divNode.id = i;                divNode.innerHTML = wordValue;                //給div節(jié)點增加鼠標進入，鼠標離開，鼠標點擊的事件                divNode.onmouseover = function() {                    if (highLightIndex != -1) {                        popupNode.childNodes[highLightIndex].style.backgroundColor = "white";                    }                    //this表式的就是divNode，當前節(jié)點變成高亮                    this.style.backgroundColor = "#3366CC";                    highLightIndex = this.id;                }                divNode.onmouseout = function() {                    popupNode.childNodes[highLightIndex].style.backgroundColor = "white";                    highLightIndex = -1;                }                divNode.onclick = function() {                    //高亮節(jié)點的文本內容添加到文本框中                    textNode.value = this.firstChild.nodeValue;                    lastTextValue = textNode.value;                    highLightIndex = -1;                    clearPopup();                    //讓文本框重新獲得焦點                    textNode.focus();                }                popupNode.appendChild(divNode);            }            //讓彈出框顯示出來            popupNode.style.display = "block";        } else {            //沒有單詞返回，清除彈出框            clearPopup();        }        //alert(rootElement.nodeName);    } else {        //沒有單詞返回，清除彈出框        clearPopup();    }}//處理與服務器交互失敗的方法function failback(status, statusText) {    //清除彈出框的內容    clearPopup();}        //用于清除彈出框的內容function clearPopup(){    popupNode.innerHTML = "";    popupNode.style.display = "none";}