javascript 实现jsonp

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30497527

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bestsamcn/p/5425861.html

本文介绍 JSONP 的工作原理及其在跨域请求中的应用。通过 HTML 和 JavaScript 示例展示了如何利用 JSONP 获取外部 API 数据并实时更新网页内容。

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>

转载于:https://www.cnblogs.com/bestsamcn/p/5425861.html