Ajax请求有效，但没有CSS和JavaScript

Question

Below is a snippet of code I have for an Ajax request. 以下是我为Ajax请求提供的代码段。 The request works, but when the request is processed the page appears without any of the CSS or JS (even though I have everything in the same directory). 该请求有效，但是在处理该请求时，该页面显示为没有CSS或JS的任何内容（即使我在同一目录中也拥有所有内容）。 To test this I made the request point to a page on my site that already existed. 为了对此进行测试，我将请求指向了我网站上已经存在的页面。 Any help? 有什么帮助吗？ Thanks in advance. 提前致谢。

<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 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>

Answer 1

This is how it's supposed to work. 这就是它应该如何工作的。

AJAX call is not, in terms of behaviour, a browser window. 就行为而言，AJAX调用不是浏览器窗口。 It will fetch ajaxtest.html and only this file. 它将获取ajaxtest.html和仅此文件。 It will not attempt to fetch any other files referenced by ajaxtest.html. 它不会尝试获取ajaxtest.html引用的任何其他文件。

If you want to put some webpage inside your document, use iframe: 如果要在文档中放入一些网页，请使用iframe：

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

You can then load some document to this iframe by calling: 然后，您可以通过调用以下命令将一些文档加载到该iframe：

document.getElementById('iframe_test').src = 'ajaxtest2.html';

Answer 2

Correction is as below. 校正如下。

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

Do not use double quote for getElementById 不要对getElementById使用双引号

and window is not opening because you are dynamically adding DOM so events are not binding for dynamically loaded content. 并且窗口没有打开，因为您正在动态添加DOM，因此事件不会绑定到动态加载的内容。

Answer 3

I finally found the solution. 我终于找到了解决方案。

// for firing CSS after HTML response //用于在HTML响应后触发CSS

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

// for firing JavaScript after HTML response //用于在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 
    });  
}

The success case is when status==200 and readyState==4, fire your js & css functions after inserted the HTML response 成功的情况是当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();
    }
}

Thanks for your replays. 感谢您的重播。

Ajax请求有效，但没有CSS和JavaScript

问题描述

3 个解决方案

解决方案1
1 2013-03-05 11:04:37

解决方案2
0 2013-03-05 11:52:56

解决方案3
0 已采纳 2013-03-06 05:58:04

Ajax请求有效，但没有CSS和JavaScript

问题描述

3 个解决方案

解决方案1 1 2013-03-05 11:04:37

解决方案2 0 2013-03-05 11:52:56

解决方案3 0 已采纳 2013-03-06 05:58:04

解决方案1
1 2013-03-05 11:04:37

解决方案2
0 2013-03-05 11:52:56

解决方案3
0 已采纳 2013-03-06 05:58:04