您的位置：首页 > Web前端 > JavaScript

jsonp

2013-11-09 22:18 274 查看

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//其实说白了，就是利用src属性来加载动态拼接的js地址，而这段js代码会回调本地写好的其他js代码
//event
window.onload = function(){
var oTxt = document.getElementById('baiduTxt');
var oUl = document.getElementById('baiduUl');
var oScript = null;
//当输入完成，抬起按键的时候就重新加载这段script到dom中
oTxt.onkeyup = function(){
oUl.innerHTML = '';
if(oScript){
document.body.removeChild(oScript);
}
oScript = document.createElement('script');
//该url返回的是一个对json函数的调用： jsonp(json) ，加载的结果就是该文本格式的函数调用被执行
oScript.src = 'http://suggestion.baidu.com/su?wd='
+oTxt.value
+'&cb=jsonp';
document.body.appendChild(oScript);
}
}

//callback function,json with padding
function jsonp(json){
var oUl = document.getElementById('baiduUl');
for(var i=0;i<json['s'].length;i++){
var oLi = document.createElement('li');
oLi.innerHTML = json['s'][i]
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<h2>Baidu Suggestion</h2>
<input type="text" id="baiduTxt"/>
<ul id="baiduUl"></ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航