Ajax 跨域访问

发布时间：2020-12-15 21:34:42 所属栏目：百科来源：网络整理

导读：HTML 文件 !doctype htmlheadmeta charset="utf-8"titletest JS/titlescript src="./util.js"/script/headbodydiv id="test-response-text"/divbutton id="button" class="small" onclick=executeAjax()点我/body/html util.js 文件 function success(text)

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 请求后得到如下页面。

参考

http://www.adobe.com/cn/devnet/html5/articles/understanding-cross-origin-resource-sharing-cors.html

http://html5online.com.cn/articles/2012080907.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!