jsonp原理其实也简单，虽然ajax不能跨域，但是通过src这个属性我们可以实现跨域，其实和我们引入第三方jquery调用它的方法一样的。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jsonp</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script>
function jsonp(data){
var oUl = document.getElementsByTagName(‘ul‘)[0];
var aLi = oUl.getElementsByTagName(‘li‘);
if(data.s.length){
var htmlText = ‘‘;
oUl.style.display = ‘block‘;
for(var i = 0 ; i < data.s.length; i++){
htmlText += ‘<li><a target="_blank" href="http://www.baidu.com/s?wd=‘+data.s[i]+‘">‘+data.s[i]+‘</a></li>‘;
}
oUl.innerHTML = htmlText
}else{
oUl.style.display=‘none‘
}
}
document.onclick = function(e){
console.log(e.target.nodeName)
if(e.target.nodeName.toLowerCase() != ‘input‘){
document.getElementsByTagName(‘ul‘)[0].style.display = ‘none‘
}
}
window.onload = function(){
var oInput = document.getElementById(‘search‘);
oInput.oninput = function(){
var that= this;
var scriptTag = document.getElementsByTagName(‘script‘);
var tempScript =[];
var reg = /http:\/\/suggestion\.baidu\.com\/su\?wd=(.*)&cb=jsonp/;
if(scriptTag.length>1){
for(var i=0 ;i<scriptTag.length;i++){
if(scriptTag[i].src && reg.test(scriptTag[i].src)){
document.body.removeChild(scriptTag[i]);
var oScript = document.createElement(‘script‘);
oScript.src = ‘http://suggestion.baidu.com/su?wd=‘+this.value+‘&cb=jsonp‘;
document.body.appendChild(oScript);
}
}
}else{
var oScript = document.createElement(‘script‘);
oScript.src = ‘http://suggestion.baidu.com/su?wd=‘+this.value+‘&cb=jsonp‘;
document.body.appendChild(oScript);
}
}
}
</script>
<style>
input{
width:200px;
height:40px;
line-height: 40px;
text-indent: 5px;
outline:none;
border:1px solid #333;
}
ul{
list-style: none;
padding:0px;
margin:0px;
width:200px;
border:1px solid #333;
display: none;
}
ul li{
padding: none;
margin:0px;
}
ul li:hover{
background:#f1f1f1;
}
ul li a{
text-decoration: none;
color:#333;
height:40px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100%;
line-height: 40px;
}
</style>
</head>
<body>
<input type="text" id="search">
<ul>
</ul>
</body>
</html>
js:
<script>
function jsonp(data){
var oUl = document.getElementsByTagName(‘ul‘)[0];
var aLi = oUl.getElementsByTagName(‘li‘);
if(data.s.length){
var htmlText = ‘‘;
oUl.style.display = ‘block‘;
for(var i = 0 ; i < data.s.length; i++){
htmlText += ‘<li><a target="_blank" href="http://www.baidu.com/s?wd=‘+data.s[i]+‘">‘+data.s[i]+‘</a></li>‘;
}
oUl.innerHTML = htmlText
}else{
oUl.style.display=‘none‘
}
}
document.onclick = function(e){
console.log(e.target.nodeName)
if(e.target.nodeName.toLowerCase() != ‘input‘){
document.getElementsByTagName(‘ul‘)[0].style.display = ‘none‘
}
}
window.onload = function(){
var oInput = document.getElementById(‘search‘);
oInput.oninput = function(){
var that= this;
var scriptTag = document.getElementsByTagName(‘script‘);
var tempScript =[];
var reg = /http:\/\/suggestion\.baidu\.com\/su\?wd=(.*)&cb=jsonp/;
if(scriptTag.length>1){
for(var i=0 ;i<scriptTag.length;i++){
if(scriptTag[i].src && reg.test(scriptTag[i].src)){
document.body.removeChild(scriptTag[i]);
var oScript = document.createElement(‘script‘);
oScript.src = ‘http://suggestion.baidu.com/su?wd=‘+this.value+‘&cb=jsonp‘;
document.body.appendChild(oScript);
}
}
}else{
var oScript = document.createElement(‘script‘);
oScript.src = ‘http://suggestion.baidu.com/su?wd=‘+this.value+‘&cb=jsonp‘;
document.body.appendChild(oScript);
}
}
}
</script>
时间： 2024-08-02 06:52:52