Ajax 跨域访问

最新推荐文章于 2022-09-06 22:32:08 发布

转载最新推荐文章于 2022-09-06 22:32:08 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lvyi/blog/636763

为什么80%的码农都做不了架构师？>>>

HTML 文件

<!doctype html>
<head>
<meta charset="utf-8">

<title>test JS</title>

<script src="./util.js"></script>
</head>

<body>
<div id="test-response-text"></div>
	<button id="button" class="small" onclick=executeAjax()>点我
</body>
</html>

util.js 文件

function success(text) {
	var textpos = document.getElementById('test-response-text');
	// alert(text)
	textpos.innerHTML = text;
}

function fail(code) {
	var textpos = document.getElementById('test-response-text')
	textpos.innerHTML = 'Error Code: ' + code;
}


function executeAjax() {
	var request = new XMLHttpRequest();

	request.onreadystatechange = function() {
		if (request.readyState === 4) {
			if (request.status === 200) {
				return success(request.responseText)
			} else {
				return fail(request.status)
			}
		} else {
			//
		}
	}

	request.open('GET', 'https://api.github.com/legacy/repos/search/top-topic-zhihu');
	request.send();
	alert('request has been sent');
}

open 中的 URL 只要支持 CORS 即可跨域访问。CORS 是服务器端的策略，在服务器端设置。

Github 的 API 支持 CORS，AJAX 请求后得到如下页面。

输入图片说明