我正在用纯 Javascript 进行 AJAX 调用的一些实验，没有 JQuery。我想知道是否可以像这样填充 DIV 标签:
<script type="text/javascript">
function call_test() {
document.getElementById("myId").innerHTML = ajax_call("example.php?id=1") ;
}
</script>
<body>
<input type="button" onClick="call_test()" value"Test">
<div id="myId">Result should be here</div>
问题是如何从ajax_call返回结果？我的代码如下，但不起作用:
function ajax_call(remote_file)
{
var $http,
$self = arguments.callee ;
if (window.XMLHttpRequest) {
$http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
$http = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
$http = new ActiveXObject('Microsoft.XMLHTTP');
}
}
if ($http) {
$http.onreadystatechange = function() {
if (/4|^complete$/.test($http.readyState)) {
return http.responseText ; // This only return undefined
}
};
$http.open('GET', remote_file , true);
$http.send(null);
}
}
远程文件:
<?php
echo "<h1>Jus an experiment</h1>";
?>
最佳答案
由于 AJAX 请求的异步特性，它不会起作用。 ajax_call 方法将在服务器响应 html 之前返回，这就是您得到 undefied 的原因。
这里的解决方案是使用回调来进行ajax响应的后处理，如下所示。
function ajax_call(remote_file, callback) {
var $http, $self = arguments.callee;
if (window.XMLHttpRequest) {
$http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
$http = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
$http = new ActiveXObject('Microsoft.XMLHTTP');
}
}
if ($http) {
$http.onreadystatechange = function() {
if (/4|^complete$/.test($http.readyState)) {
if (callback)
callback(http.responseText);
}
};
$http.open('GET', remote_file, true);
$http.send(null);
}
}
和
function call_test() {
ajax_call("example.php?id=1", function(html) {
document.getElementById("myId").innerHTML = html
});
}
关于javascript - 另一种ajax调用方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16229633/