为了账号安全,请及时绑定邮箱和手机立即绑定

一直解决不了跨域的问题,先不说跨域,我的这段代码错在哪里啊?????!

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>搜索框制作的练习</title>

<style type="text/css">

body{

background-color: #333;

}

.bg-div{

background-image: url(image/river.jpg);

background-repeat: no-repeat;

width:1290px;

height: 626px;

margin:0 auto;

}

.log{

background-image: url(image/logo.png);

background-repeat: no-repeat;

width:107px;

height: 53px;

float: left;

}

.search-box{

position:absolute;

top:200px;

left:300px;

}

form{

background-color: #FFF;

padding:5px;

margin:8px 0 0 20px;

float: left;

}

.search-input-text{

border:0;

outline: none;

width:350px;

height: 29px;

line-height: 25px;

float: left;

}

.search-input-button{

background-image: url(image/search-button.png);

background-repeat: no-repeat;

border: 0;

width:29px;

height: 29px;

float: left;

}

.suggest{

      display:none;

      width:388px;

      border:1px solid #e5e5ee;

      background-color: #FFF;


    }

    .suggest ul{

     list-style: none;

     margin:0;

     padding:0;

   }

   .suggest ul li{

     padding:3px;

     line-height: 25px;

     font-size: 14px;

     cursor: pointer;

   }

   .suggest ul li:hover{

     background-color: #e5e5e5;

     text-decoration: underline;

   }

 </style>

 <script type="text/javascript">

 //主体

   window.onload=function(){

     addEvent('search_input','keyup',function(){

      var searchText=getDOM('search_input').value;

      ajaxGet('http://api.bing.com/qsonhs.aspx?q='+searchText,function(d){

        var d=d.AS.Requests[0].Suggests;

        var html='';

        for(var i=0;i<d,length;i++){

          html+='<li>'+d[i].Txt+'</li>';

        }

        getDOM('search-result').innerHTML=html;

        getDOM('search-suggest').style.top=getElementTop(getDOM('search-form'))+38+'px';

        getDOM('search-suggest').style.left=getElementLeft(getDOM('search-form'))+'px';

        getDOM('search-suggest').style.position='absolute';

        getDOM('search-suggest').style.display='block';

      });

    });

     delegateEvent('li', 'click', function() {

      var keyword=this.innerHTML;

      location.href='http://cn.bing.com/search?q='+keyword;

    });

     

   };

   

   

   

   function getDOM(id){

    return document.getElementById(id);

  }

//事件代理

   function addEvent(id,event,fn){

      var el=getDOM(id)||document;

      if(el.addEventListener){

        el.addEventListener(event,fn,false);

      }else if(el.attachEvent){

        el.attachEvent('on'+event,fn);

      }

    }


    function getElementLeft(element){

      var actualLeft=element.offsetLeft;

      var current=element.offsetParent;

      while(current !==null){

       actualLeft+=current.offsetLeft;

           current=current.offsetParent;

         }

         return actualLeft;

       }

       function getElementTop(element){

        var actualTop=element.offsetTop;

        var current=element.offsetParent;

        while(current!==null){

          actualTop+=current.offsetTop;

          current=current.offsetParent;

        }

        return actualTop;

      }

      

      function ajaxGet(url,callback){

       var _xhr=null;

        if(window.XMLHttpRequest){

          _xhr=new window.XMLHttpRequest();

        }else if(window.ActiveXObject){

          _xhr=new ActiveXObject("Msxml2.XMLHTTP");

        } 

        

        function _xhronreadystatechange(){

          if(_xhr.readyState==4&&_xhr.status==200){

            alert(11);

            callback(JSON.parse(_xhr.responseText));

          }

          _xhr.open('get',url,true);

          _xhr.send(null);

        }

      }


      function delegateEvent(target,event,fn){

        addEvent(document,event,function(e){

          if(e.target.nodeName==target.toUpperCase()){

            fn.call(e.target);

          }

        });

      }

    </script> 

  </head>

  <body>

   <div>

    <div>

     <div></div>

     <form action="http://cn.bing.com/s" target="_blank" method="get" id="search-form">

      <input type="text" name="q" id="search_input" />

      <input type="submit" / value="">

    </form>

  </div>

</div>

<div id="search-suggest">

  <ul id="search-result">

   <li>搜索1</li>

   <li>搜索2</li>

   <li>搜索3</li>

 </ul>

</div>

</body>

</html>


正在回答

2 回答

楼上真有心思啊,这么一堆代码还给帮忙挑错

0 回复 有任何疑惑可以回复我~
function _xhronreadystatechange() {
            if (_xhr.readyState == 4 && _xhr.status == 200) {
                alert(11);
                callback(JSON.parse(_xhr.responseText));
            }
            _xhr.open('get', url, true);
            _xhr.send(null);
        }

以上代码改成:

_xhr.onreadystatechange=functioin(url,callback){
            if (_xhr.readyState == 4 && _xhr.status == 200) {
                callback(JSON.parse(_xhr.responseText));
            }
            _xhr.open('get', url, true);
            _xhr.send(null);
}

原理 :是给_xhr对象的onreadystatechange属性绑定一个事件监听,每当状态值改变的时候调用这个方法而不是创建一个方法!!!

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
搜索框制作
  • 参与学习       66041    人
  • 解答问题       431    个

本课程从简入深讲解搜索框的制作,学习JQ与JS实现Ajax技术的不同点

进入课程

一直解决不了跨域的问题,先不说跨域,我的这段代码错在哪里啊?????!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信