jsonp

最新推荐文章于 2019-09-30 17:40:52 发布

montaellis

最新推荐文章于 2019-09-30 17:40:52 发布

阅读量508

点赞数

分类专栏： javascript miaov

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

miaov

13 篇文章 0 订阅

订阅专栏

1.ajax

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
	
	var oBtn = document.getElementById('btn');
	
	oBtn.onclick = function() {
		
		var xhr = new XMLHttpRequest();
		
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				if ( xhr.status == 200 ) {
					alert( xhr.responseText );
				}
			}
		}
		
		xhr.open('get', '1.txt', true);
		xhr.send();
		
		
	}
	
}
</script>
</head>

<body>
	<input type="button" value="按钮" id="btn" />
</body>
</html>

2.ajax

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
	
	//ajax跨域请求限制
	
	var oBtn = document.getElementById('btn');
	
	oBtn.onclick = function() {
		
		var xhr = new XMLHttpRequest();
		
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				if ( xhr.status == 200 ) {
					alert( xhr.responseText );
				}
			}
		}
		
		xhr.open('get', 'http://api.douban.com/book/subjects?q=javascript&alt=json&max-results=1', true);
		xhr.send();
		
		
	}
	
}
</script>
</head>

<body>
	<input type="button" value="按钮" id="btn" />
    XMLHttpRequest cannot load http://api.douban.com/book/subjects?q=javascript&alt=json&max-results=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. 
    <p>
    跨域：跨域名
    一个域名下的文件去请求了和他不一样的域名下的资源文件，那么就会产生跨域请求
    </p>
</body>
</html>

JSONP : JSON with Padding
1.script标签
2.用script标签加载资源是没有跨域问题的

在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情
然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进去

6.ajax

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
function fn(data) {
	var oUl1 = document.getElementById('ul1');
	var html = '';
	for (var i=0; i<data.length; i++) {
		html += '<li>'+data[i]+'</li>';
	}
	oUl1.innerHTML = html;
}
</script>
<script>
window.onload = function() {
	
	var oBtn1 = document.getElementById('btn1');
	
	oBtn1.onclick = function() {
		
		var oScript = document.createElement('script');
		oScript.src = 'getData.php';
		document.body.appendChild(oScript);
		
	}
	
}
</script>
</head>

<body>
	<input type="button" id="btn1" value="按钮" />
    <ul id="ul1"></ul>
</body>
</html>

7.ajax

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
function fn1(data) {
	var oUl1 = document.getElementById('ul1');
	var html = '';
	for (var i=0; i<data.length; i++) {
		html += '<li>'+data[i]+'</li>';
	}
	oUl1.innerHTML = html;
}
function fn2(data) {
	var oUl2 = document.getElementById('ul2');
	var html = '';
	for (var i=0; i<data.length; i++) {
		html += '<li>'+data[i]+'</li>';
	}
	oUl2.innerHTML = html;
}
function fn3(data) {
	var oUl3 = document.getElementById('ul3');
	var html = '';
	for (var i=0; i<data.length; i++) {
		html += '<li>'+data[i]+'</li>';
	}
	oUl3.innerHTML = html;
}
</script>
<script>
window.onload = function() {
	
	var oBtn1 = document.getElementById('btn1');
	
	var oBtn2 = document.getElementById('btn2');
	
	oBtn1.onclick = function() {
		
		var oScript = document.createElement('script');
		oScript.src = 'getData.php?callback=fn1';
		document.body.appendChild(oScript);
		
	}
	
	var oBtn2 = document.getElementById('btn2');
	
	oBtn2.onclick = function() {
		
		var oScript = document.createElement('script');
		oScript.src = 'getData.php?t=str&callback=fn2';
		document.body.appendChild(oScript);
		
	}
	
	var oBtn3 = document.getElementById('btn3');
	
	oBtn3.onclick = function() {
		
		var oScript = document.createElement('script');
		oScript.src = 'getData.php?callback=fn3';
		document.body.appendChild(oScript);
		
	}
	
}
</script>
</head>

<body>
	<input type="button" id="btn1" value="加载数字" />
    <ul id="ul1"></ul>
    <input type="button" id="btn2" value="加载字母" />
    <ul id="ul2"></ul>
    <input type="button" id="btn3" value="加载字母" />
    <ul id="ul3"></ul>
</body>
</html>

baidu

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
li a:hover{ background: #f90; color: white; }
</style>
<script>
function maiov(data) {
	
	var oUl = document.getElementById('ul1');
	var html = '';
	if (data.s.length) {
		oUl.style.display = 'block';
		for (var i=0; i<data.s.length; i++) {
			html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
		}
		oUl.innerHTML = html;
	} else {
		oUl.style.display = 'none';
	}
	
}
window.onload = function() {
	
	var oQ = document.getElementById('q');
	var oUl = document.getElementById('ul1');
	
	oQ.onkeyup = function() {
		
		if ( this.value != '' ) {
			var oScript = document.createElement('script');
			oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=maiov';
			document.body.appendChild(oScript);
		} else {
			oUl.style.display = 'none';
		}
		
	}
	
}
</script>
</head>

<body>
	<input type="text" id="q" />
	<ul id="ul1"></ul>
</body>
</html>

douban

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
dl {border-bottom: 1px dotted #000;}
dt {font-weight: bold;}
</style>
<script>
function fn1(data) {

	var oMsg = document.getElementById('msg');
	var oList = document.getElementById('list');
	
	console.log(data);
	
	oMsg.innerHTML = data.title.$t + ' : ' + data['opensearch:totalResults'].$t;
	
	var aEntry = data.entry;
	var html = '';
	for (var i=0; i<aEntry.length; i++) {
		
		html += '<dl><dt>'+ aEntry[i].title.$t +'</dt><dd><img src="'+ aEntry[i].link[2]['@href'] +'" /></dd></dl>';
		
	}
	
	oList.innerHTML = html;
	
}
window.onload = function() {
	
	var oQ = document.getElementById('q');
	var oBtn = document.getElementById('btn');
	var oMsg = document.getElementById('msg');
	var oList = document.getElementById('list');
	
	oBtn.onclick = function() {

		if ( oQ.value != '' ) {
			var oScript = document.createElement('script');
			oScript.src = 'http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1';
			document.body.appendChild(oScript);
		}
		
		//http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1&start-index=(当前页*每页显示的条数)&max-results=10(每页显示的条数)
		
	}
	
}
</script>
</head>

<body>
	http://www.douban.com/service/apidoc/reference/
	<input type="text" id="q" /><input type="button" id="btn" value="搜索" />
    <p id="msg"></p>
    <hr />
	<div id="list"></div>
</body>
</html>

montaellis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp

1.ajax无标题文档window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function
复制链接

扫一扫

专栏目录