JS实现跨域请求数据--jsonp

 

 

* {
margin: 0;
padding: 0;
}

input {
width: 300px;
height: 30px;
border: 1px solid lightgray;
margin-top: 150px;
margin-left: 200px;
padding-left: 5px;
}

ul {
width: 307px;
list-style: none;
margin-left: 200px;
display: none;
}

li {
height: 30px;
border: 1px solid lightgray;
line-height: 30px;
padding-left: 5px;
}

　　

<input type="text" id="inputSearch">
<ul id="ulList">
<li>123</li>
</ul>

　　

<script>
function callbackD(response) {
　　console.log(response)
　　var oUl = document.getElementById('ulList');
　　var html = '';
　　if(response.s.length != 0) {
　　　　oUl.style.display = 'block';
　　　　for(var i = 0; i < response.s.length; i++) {
　　　　　　html += '<li>' + response.s[i] + '</li>'
　　　　}
　　}
　　oUl.innerHTML = html;
}
</script>
<script>
window.onload = function() {
　　//获取dom元素
　　var oData = document.getElementById('inputSearch');
　　var oUl = document.getElementById('ulList');

　　//键盘按下后抬起触发事件(onkeyup)
　　oData.onkeyup = function() {
　　　　if(oData.value != '') {
　　　　　　//创建标签(createElement)
　　　　　　var script = document.createElement("script");
　　　　　　//添加地址
　　　　　　script.src = 'http://unionsug.baidu.com/su?wd=' + this.value + '&p=3&cb=callbackD';
　　　　　　//添加给body的(成为body包涵的孩子)

　　　　　　document.body.appendChild(script);
　　　　} else {
　　　　　　oUl.style.display = 'none';
　　　　}

　　}

};
</script>