首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

没办法了,ajax的有关问题纠结了一天了,来了

2012-12-21 
没办法了,ajax的问题纠结了一天了,来求助了本帖最后由 showbo 于 2012-10-23 20:35:12 编辑我要做一个搜索

没办法了,ajax的问题纠结了一天了,来求助了
本帖最后由 showbo 于 2012-10-23 20:35:12 编辑 我要做一个搜索提示框,在网上找了很多资料,很多人提供了源码,是的源码没问题,但是我在vs里调试是没问题,但是一到我做的项目里的iis里运行,就没效果了
我把代码贴出来,实在是找不出怎么解决这个问题,
(注:vs中调试没问题,在iis中运行就不出效果了,牛人帮帮忙)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<style type="text/css">
    .item_normal
    {
        border-left: #666 1px solid;
        border-right: #666 1px solid;
        width: 150px;
        background-color: #ffffff;
        overflow: hidden;
    }
    .itemBg
    {
        border-left: #666 1px solid;
        border-right: #666 1px solid;
        cursor: default;
        background-color: #ffffff;
        width: 150px;
    }
    .item_high
    {
        background-color: #326BC5;
        cursor: default;
        width: 150px;
        color: white;
    }
    .item_button
    {
        border-left: #666 1px solid;
        border-right: #666 1px solid;
        border-bottom: #666 1px solid;
        text-align: right;
        background-color: #ffffff;
        width: 150px;
        cursor: hand;
    }
    .suggest_hidden
    {
        display: none;
    }
</style>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="KProvince" style="width: 150px;" autocomplete="off" onkeyup="beKeyUp();" />
        <p>
            <div id="search_suggest" style="position: absolute; z-index: 1;">
            </div>
        </p>
    </div>
    </form>
</body>
<script type="text/javascript">
    var array = new Array(); //定义一个全局变量数组,用来存放拆分字符串的值,后面具体介绍。
    var zz = -1; //此为指针,后面用到


    function xmlHttpInitializtions() {
        try {
            xmlhttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                xmlhttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e2) {
                xmlhttpRequest = false;
            }
        }
        if (!xmlhttpRequest && typeof XMLHttpRequest != 'undefined') {
            xmlhttpRequest = new XMLHttpRequest();
        }
    }
    function beKeyUp() {
        var key = document.getElementById("KProvince").value;
        if (key.length > 0)//有值才POST,这里最好加个Trim()方法,但是JAVASCRIPT没有现成的方法,自己定义。
        {
            xmlHttpInitializtions();
            xmlhttpRequest.Open("POST", "Test_Ajax.aspx?key=" + key, true); //POST
            xmlhttpRequest.onreadystatechange = stateChange; //返回状态调用方法stateChange
            xmlhttpRequest.Send();
        }
    }
    function stateChange() {
        if (xmlhttpRequest.readystate == 4) {
            if (xmlhttpRequest.status == 200) {
                var responseStr = xmlhttpRequest.responseText; //获取返回值
                if (responseStr.length > 0)//返回值不为空才执行下面的代码
                {
                    array = responseStr.split('|'); //根据‘|’拆分,根据自己任意特殊字符,初始化数组
                    positionDiv(); //调用方法,定位DIV显示,具体见方法解释
                    document.getElementById("search_suggest").innerHTML = ""; //每次清空DIV内容
                    for (var i = 0; i < array.length; i++) {
                        if (array[i] != "")//项值不为空,组合DIV,每个DIV有onmouseover、onmouseout、onclick对应事件


                        {
                            document.getElementById("search_suggest").innerHTML += "<div id='item" + i + "' class='itemBg' onmouseover='beMouseOver(" + i + ")' onmouseout='beMouseOut(" + i + ")' onclick='beClick(" + i + ")'>" + array[i] + "</div>";
                        }
                    }
                    //最后一个DIV显示 关闭 效果 onclick方法
                    document.getElementById("search_suggest").innerHTML += "<div class='item_button' onclick='hiddenDiv();'><font color='#999999'>关闭</font></div>";
                    document.getElementById("search_suggest").style.display = "inline";
                }
                else {
                    document.getElementById("search_suggest").style.display = "none";
                }
            }
        }
    }
    //定位DIV显示
    function positionDiv() {
        var DivRef = document.getElementById("search_suggest");
        DivRef.style.position = "absolute";
        var t = document.getElementById("KProvince");
        DivRef.style.top = getAbsolutePos(t).y; //相对文本框的TOP高度,方法见下面
        DivRef.style.left = getAbsolutePos(t).x; //相对文本框的LEFT宽度
        DivRef.style.height = array.length * 20; //DIV的高度等于每行20个象素乘行数(也就是数组的长度,体现全局数组的作用,不然要传入数组长度的参数)
    }
    //实现最后一个DIV 关闭 onclick方法
    function hiddenDiv() {
        document.getElementById("search_suggest").style.display = "none";
    }
    //定位方法,不做解释
    function getAbsolutePos(el) {
        var SL = 0, ST = 0;
        var is_div = /^div$/i.test(el.tagName);
        if (is_div && el.scrollLeft) SL = el.scrollLeft;
        if (is_div && el.scrollTop) ST = el.scrollTop;


        var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
        if (el.offsetParent) {
            var tmp = this.getAbsolutePos(el.offsetParent);
            r.x += tmp.x;
            r.y += tmp.y;
        }
        return r;
    }

    //函数鼠标经过效果       
    function beMouseOverEFF(i) {
        if ((i >= 0) & (i <= array.length - 1)) {
            document.getElementById("item" + i).className = "item_high";
        }
    }

    //函数鼠标移开效果
    function beMouseOutEFF(i) {
        if ((i >= 0) & (i <= array.length - 1)) {
            document.getElementById("item" + i).className = "item_normal";
        }
    }

    //函数鼠标经过
    function beMouseOver(i) {
        document.getElementById("KProvince").focus();
        beMouseOutEFF(zz);
        zz = i;
        beMouseOverEFF(zz);
    }

    //函数鼠标移开
    function beMouseOut(i) {
        beMouseOutEFF(i);
    }
    //函数单击
    function beClick(i) {
        document.getElementById("KProvince").value = array[i];
        document.getElementById("search_suggest").style.display = "none";
        document.getElementById("KProvince").focus();
    }
</script>
</html>



请求的ajax页面
  protected void Page_Load(object sender, EventArgs e)
           {
            if (Request.QueryString["key"] != null)
            {
                Response.Write("这|下|你|就|满|足|了|吧");
            }
        }

[解决办法]
注意要区分大小写,要不使用XMLHttpRequest创建的ajax对象大小写不区分会出错
    function beKeyUp() {
        var key = document.getElementById("KProvince").value;


        if (key.length > 0)//有值才POST,这里最好加个Trim()方法,但是JAVASCRIPT没有现成的方法,自己定义。
        {
            xmlHttpInitializtions();
            //xmlhttpRequest.Open("POST", "Test_Ajax.aspx?key=" + key, true); //POST
              xmlhttpRequest.open("POST", "Test_Ajax.aspx?key=" +escape(key), true); //POST////////////////编码下要发送的内容
            xmlhttpRequest.onreadystatechange = stateChange; //返回状态调用方法stateChange
            //xmlhttpRequest.Send();
              xmlhttpRequest.send();//////////////////
        }
    }
    function stateChange() {
        //if (xmlhttpRequest.readystate == 4) {
          if (xmlhttpRequest.readyState == 4) {
            if (xmlhttpRequest.status == 200) {
                var responseStr = xmlhttpRequest.responseText; //获取返回值
                if (responseStr.length > 0)//返回值不为空才执行下面的代码
                {
                    array = responseStr.split('
[解决办法]
'); //根据‘

热点排行