Js跨域问题如何解决，用原生JS代码解决的

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>bing search</title>  
    <style>  
        body{background: #333;}  
        #bg_div{  
            position: relative;  
            background-image: url("river.jpg");  
            width:1228px;height:690px;  
            margin:0 auto ;  
        }  
        #search_box{  
            position: absolute;  
            top:150px;  
            left: 200px;  
        }  
        #logo{  
            background-image: url("logo.png");  
            height:53px;width: 107px;  
            float: left;  
            margin: -4px 18px 0 0;  
        }  
        #search_form{  
            background-color: #fff;  
            float: left;  
            padding: 5px;  
        }  
        #search_input{  
            height:29px;  
            line-height: 29px;  
            width: 350px;  
            border: 0;  
            outline: none;  
            float: left;  
        }  
        #search_submit{  
            background-image: url(search-button.png);  
            width:29px;  
            height:29px;  
            border: 0;  
        }  
        #suggest{  
            display: none;  
            width:388px;  
            background-color:#fff;  
            position:absolute;  
            border-width:1px;  
            border-style:solid;  
            border-color: #999;  
            padding: 0;  
            margin: 0;  
        }  
        #suggest_result{  
            list-style: none;  
            padding: 0;  
            margin: 0;  
        }  
        #suggest_result li{  
            padding:3px;line-height:25px;font-size: 14px;color: #777;  
            cursor: pointer;  
        }  
        #suggest_result li:hover{  
            background-color:#e5e5e5;  
        }  
    </style>  
</head>  
<body>  
  
<div id="bg_div">  
    <div id="search_box">  
        <div id="logo"></div>  
        <form  id="search_form" action="https://cn.bing.com/search" target="_blank">  
            <input type="text" id="search_input" name="q">  
            <input type="submit" id="search_submit" value="">  
        </form>  
    </div>  
</div>  
<div id="suggest">  
    <ul id="suggest_result">  
    </ul>  
</div>  
<script>  
var getDOM=function(id){
    return document.getElementById(id);
}
var addEvent=function(id,event,fn){
    var el=getDOM(id)||document;
    if(el.addEventListener){
        el.addEventListener(event,fn,false);
    }else if(el.addEventListener){
        el.attachEvent('on'+event, fn);
    }
}

var ajaxGet=function(url,callback){
var _xhr=null;
if(window.XMLHttpRequest){
    _xhr=new window.XMLHttpRequest();
}else if(window.ActiveXObject){
    _xhr=new ActiveXObject("Msxml2.XMLHTTP");
}
_xhr.onreadystatechange=function(){
    if(_xhr.readyState==4&&_xhr.status==200){
        callback(JSON.parse(_xhr.responseTest));
    }
}
_xhr.open('get',url,false);
_xhr.send(null);
}

var delegateEvent=function(target,event,fn){
    addEvent(document,event,function(e){
        if(e.target.nodeName==target.toUpperCase()){
            fn.call(e.target);
        }
    });
}

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.Results[0].Suggests;
    var html="";
    for (var i = 0; i < d.length; i++) {  
                    html += '<li>' + d[i].Txt + '</li>';  
                }  
    var _dom= getDOM('suggest');
    getDOM('suggest_result').innerHTML=html;
    _dom.style.top=getElementTop(getDOM('search_form'))+38+'px';
    _dom.style.left=getElementLeft(getDOM('search_form'))+'px';
    _dom.style.position='absolute';
    _dom.style.display='block';
});});

delegateEvent('li','click',function(){
var keyword=this.innerHTML;
location.href='http://api.bing.com/qsonhs.aspx?q='+keyword;
});

</script>  
</body>  
</html>

pamki

浏览 3373回答 3

3回答

慕男婶

在除了IE8，9以外的浏览器下，可以使用options跨域，即浏览器发现要请求的资源跟当前域不在同一个域，会发送一个options请求询问服务器：我跟你不是一个域的，你是否让我请求这个资源？然后服务器在response headers 里设置3个消息头来回答浏览器的询问。这三个响应头分别是： Access-Control-Allow-Headers:Content-Type Access-Control-Allow-Methods:POST, GET, OPTIONS // 支持POST GET OPTIONS请求（也可以指定一个请求或多个请求方式） Access-Control-Allow-Origin:* // 告诉浏览器，所有的外域都可以跨域向我请求资源（不使用通配符， // 也可以显式地设置成一个域或多个域）所以，不存在浏览器兼容性的做法是使用jsonp，但是使用jsonp也需要服务器端支持。

echo_kinchao

我觉得用JSONP的方法可以很好的解决跨域传输的问题

随时随地看视频慕课网APP