1

下面是我对 Ajax 请求的一段代码。请求有效，但是当请求被处理时，页面显示没有任何 CSS 或 JS（即使我将所有内容都放在同一个目录中）。为了测试这一点，我将请求指向我网站上已经存在的页面。有什么帮助吗？提前致谢。

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajaxtest.html",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

ajaxtest.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://swip.codylindley.com/jquery.DOMWindow.js"></script>

<p><a href="#inlineContent" class="defaultDOMWindow">Open DOM Window</a></p> 
<script type="text/javascript"> 
$('.defaultDOMWindow').openDOMWindow({ 
eventType:'click', 
loader:1, 
loaderImagePath:'animationProcessing.gif', 
loaderHeight:16, 
loaderWidth:17 
}); 
</script> 
<div id="inlineContent" style=" display:none;"> 
<p>Inline Content</p> 
<p>Click overlay to close window</p> 
<p>Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi. Erat delenit laoreet quinta videntur id. Ii at qui eum ut usus. Quis etiam suscipit iusto elit dolor. Dolor congue eodem adipiscing cum placerat. </p> 
<p>Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem. </p> 
</div>
4

3 回答 3

1

这就是它应该如何工作的方式。

就行为而言，AJAX 调用不是浏览器窗口。它将获取 ajaxtest.html 并且仅获取此文件。它不会尝试获取 ajaxtest.html 引用的任何其他文件。

如果您想在文档中放置一些网页，请使用 iframe：

<iframe id="iframe_test" src="ajaxtest.htm"></iframe>

然后，您可以通过调用将一些文档加载到此 iframe：

document.getElementById('iframe_test').src = 'ajaxtest2.html';
于 2013-03-05T11:04:37.367 回答
0

更正如下。

document.getElementById('myDiv').innerHTML=xmlhttp.responseText;

不要使用双引号getElementById

并且窗口没有打开，因为您正在动态添加 DOM，因此事件没有绑定到动态加载的内容。

于 2013-03-05T11:52:56.677 回答
0

我终于找到了解决方案。

// 在 HTML 响应后触发 CSS 

function csstuff() 
{
    $('selector').css('var', 'val');
}

// 在 HTML 响应后触发 JavaScript 

function domWinInit(){ 
    //include the code from 
    (http://swip.codylindley.com/jquery.DOMWindow.js)
}

function domClick(){ 
    $('.defaultDOMWindow').openDOMWindow({ 
      eventType:'click', 
      loader:1, 
      loaderImagePath:'animationProcessing.gif', 
      loaderHeight:16, 
      loaderWidth:17 
    });  
}

成功案例是当 status==200 和 readyState==4 时，在插入 HTML 响应后触发你的 js & css 函数

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById('myDiv').innerHTML=xmlhttp.responseText;

        // CSS & JavaScript firing goes here
        csstuff();
        domWinInit();
        domClick();
    }
}

感谢您的重播。

于 2013-03-06T05:58:04.740 回答