javascript - 如何从 ajax 调用中检索元素

Question

我想从 ajax 调用中检索所有元素，然后将它们插入到另一个元素中，而不需要：

使用 jquery（我只想使用纯 JavaScript）
创建一个新元素来包含 ajax 响应

这是我尝试过的：

索引.php

<!DOCTYPE HTML>    
    <head>
        <script type="text/javascript">

            function loadPage() {
                var ajax = new XMLHttpRequest();
                ajax.open('GET', 'test.php', true);
                ajax.onreadystatechange = function (){
                    if(ajax.readyState === 4 && ajax.status === 200){
                        document.getElementById('output').appendChild( ajax.responseText ) ; 
                    }  
                };
                ajax.send();
                }

                loadPage();
        </script>
    </head>
    <body>
        <div id="output">
            <h1>Default</h1>
        </div>
    </body>
    </html>

测试.php

<h1>
     its work
</h1>

<div>
    <h2>
        its work2
    </h2>
</div>

我已经用谷歌搜索过了，但答案总是使用 jQuery。

score 1 · Accepted Answer

Node.appendChild需要一个Node对象作为参数。你从 test.php 得到的是一个字符串。尝试innerHTML改用

document.getElementById('output').innerHTML = ajax.responseText;

从 XHR 级别 2 开始，您可以简单地附加一个onload处理程序，XHR而不是检查readyStateandstatus属性。

ajax.onload = function() {
    document.getElementById('output').innerHTML += this.responseText;
}

score 0 · Accepted Answer

你看过这个吗

http://w3schools.com/ajax/ajax_examples.asp

http://w3schools.com/ajax/tryit.asp?filename=tryajax_first

I think the most of the examples that you find use jquery because jquery makes it cross browser

score 0 · Accepted Answer

try this one

   function loadPage(){ 
var strURL="test.php";

var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) { 
document.getElementById('output').value=req.responseText; 
    } else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
} 
} 
req.open("POST", strURL, true);
req.send(null);
} 

}



 function getXMLHTTP() { //function to return the xml http object
    var xmlhttp = false;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e1) {
                xmlhttp = false;
            }
        }
    }

javascript - 如何从 ajax 调用中检索元素

3 回答 3

Related

Reference