javascript 我需要相当于 .load() 到 JS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17901116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I need the equivalent of .load() to JS
提问by John
I'm developing a script but I mustn't use jQuery library so I need the equivalent of .load() in JS.
我正在开发一个脚本，但我不能使用 jQuery 库，所以我需要 .load() 在 JS 中的等价物。
I need to do this without jQuery:
我需要在没有 jQuery 的情况下执行此操作：
$(document).ready(function(){
$('#a').click(function(){
$('body').append('<div id="b"></div>')
$('#b').load('x.html')
});
});
Thanks!
谢谢！
采纳答案by John
The simple answer is you're doing things that are fairly complicated to get done correctly without a library like jQuery. Here's something that "works", but with no error checking or cross-browser perfection. You really probably don't want this... but here it is.
简单的答案是，如果没有像 jQuery 这样的库，您正在做的事情要正确完成是相当复杂的。这是“有效”的东西，但没有错误检查或跨浏览器完美。你可能真的不想要这个……但它就在这里。
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('a').addEventListener('click', function (e) {
e.preventDefault();
var div = document.createElement('div');
div.id = 'b';
document.body.appendChild(div);
var xhr = new XMLHttpRequest();
xhr.onload = function () {
div.innerHTML = this.response;
};
xhr.open('GET', 'x.html', true);
xhr.send();
}, false);
}, false);
</script>
</head>
<body>
<a id="a" href="#">load</a>
</body>
</html>
回答by John
function load(url, element)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
element.innerHTML = req.responseText;
}
usage
用法
load("x.html", document.getElementById("b"));
回答by K P
If you want to do it without JS, I think this will help you, add this inside #b
如果你想不用JS来做，我想这对你有帮助，把这个加在里面 #b
<iframe src="x.html"></iframe>
回答by wiz_Amit
Async XMLHttpRequest:
异步 XMLHttpRequest：
function load(url, element) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
element.innerHTML = req.responseText;
}
};
req.open("GET", url, true);
req.send(null);
}
Usage:
用法：
load("x.html", document.getElementById("b"));
This will load "x.html" and put it inside the element.
这将加载“x.html”并将其放入元素中。
回答by Dan Mihail Matei
I found that jquery load run scripts from loaded file, which setting innerHTML to something doesn't do the trick... don't test if you can call an init() function afterwards...
我发现 jquery 从加载的文件中加载运行脚本，将 innerHTML 设置为某些东西并不能解决问题......不要测试你之后是否可以调用 init() 函数......
回答by Dan Mihail Matei
<object type="text/html" data="my.html">
回答by Michael Benin
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
/* If you wanted post too */
// xmlhttp.open("POST", "/posturl", true);
// xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// xmlhttp.send("email=" + "value" + "&message=" + "value" + "&name=" + name"value");
xmlhttp.open("GET", "file_to_get.xml", true/* async, setting to false will block other scripts */);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
window.alert(xmlhttp.responseText);
}
}
