主要HTML页面

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
       <!-- <script type="text/javascript" src="AjaxRequestCreatingElements.js"></script>-->
    </head>
    <body>
        <button id="ato">get all tables and ordered list's</button>
        <script type="text/javascript" src="AjaxRequestCreatingElements.js"></script>
    </body>
</html>

在havascript代码中由XMLHttpRequest请求的

html页面

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

    </head>
    <body>
        <div>
            <table>
            <tr>
            <th>sr. no</th><th>topic</th><th>comment</th></tr>
                <tr><td>1</td><td>blah blah blah from div</td><td>i dont know</td></tr>
            </table>
        </div>
        <div>
            <ol>
                <li>blah blah blah..from div</li>
                <li>other blah blah blah....</li>
                <li>and an another blah blah blah....</li>
            </ol>
        </div>
        <table>
            <tr>
            <th>sr. no</th><th>topic</th><th>comment</th></tr>
                <tr><td>1</td><td>blah blah blah</td><td>i dont know</td></tr>
            </table>
    </body>
</html>

javascript代码发出ajax请求

var request = new XMLHttpRequest();
request.open("GET", "HtmlCopyFrom.html", true);
request.send(null);
var count = 0;
request.onreadystatechange = function ()
{
    if (request.readyState === 4 && request.status === 200)
    {
        //alert("hi ");
        var newDoc = document.implementation.createHTMLDocument("example");
        newDoc.documentElement.innerHTML = request.responseText;
        var tableElements = newDoc.getElementsByTagName('Table');
        var olElements = newDoc.getElementsByTagName('ol');
        document.getElementById("ato").onclick = function ()
        {
            //document.getElementById("ato").onclick = function ()
            for (var i = 0; i < tableElements.length; i++)
            {
                document.body.appendChild(tableElements[i]);
            }
            for (var i = 0; i < olElements.length; i++)
            {
                document.body.appendChild(olElements[i]);
            }
        }
    }
}

** **问题

我需要点击2次才能获得此页面的所有表格和ol元素。我只想点击一次，然后获取所有的table和ol元素..

请帮忙。

提前感谢..

Answer 1

你的代码很奇怪。您从服务器请求数据（这是异步的），只需通过onclick事件解析它。是的，如果您的请求耗时太长，则必须单击2次。

尝试改变它：

document.getElementById("ato").onclick = function ()
{

    var request = new XMLHttpRequest(); 
    request.open("GET", "HtmlCopyFrom.html", true); 
    request.send(null); var count = 0;     
    request.onreadystatechange = function () {

        if (request.readyState === 4 && request.status === 200)
        {
            //alert("hi ");
            var newDoc = document.implementation.createHTMLDocument("example");
            newDoc.documentElement.innerHTML = request.responseText;
            var tableElements = newDoc.getElementsByTagName('Table');
            var olElements = newDoc.getElementsByTagName('ol');

            //document.getElementById("ato").onclick = function ()
            for (var i = 0; i < tableElements.length; i++)
            {
                document.body.appendChild(tableElements[i]);
            }
            for (var i = 0; i < olElements.length; i++)
            {
                document.body.appendChild(olElements[i]);
            }

        }
    } 
}

这应该有效。（没有测试你的代码）

按钮onclick按钮怪异地工作

主要HTML页面

javascript代码发出ajax请求

1 个答案: