通过Ajax将页面载入Div最佳实践？

我正在使用下面的方法将远程页面加载到页面上的div中。通过Ajax将页面载入Div最佳实践？

$('#result').load('www.myurl.com/results.html');

我很好奇，它是一个不好的做法，另一个页面内加载一个完全格式化的HTML页面？我的担心更多的是加载CSS或额外的JavaScript包括可能会覆盖主页上的其他元素。

我在最初的测试中没有遇到任何问题，我只是不确定这是否是最佳做法。

澄清：如果我有一个主网页像这样

<html> 
    <head> 
     <script src="jquery.js"></script> 
     <link href="mycss.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div id="remoteContainer"></div> 
     <script> 
      $('#remoteContainer').load('www.myurl.com/results.html'); 
     </script> 
    </body>

而且results.html代码看起来像这样：

<html> 
    <head> 
     <script src="jquery.js"></script> 
     <link href="myResults.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <header>   
      <h1>My Results Page</h1> 
     </header> 
     ... 
    </body>

请问CSS和JS互相覆盖，或将这些页面作为两个独立的实体吗？

来源

2013-03-26 TheJason

我将认为'.html'你'负载（）'成'div'类似于仅包含部分HTML的“partialView”，并且所有相关的CSS和JavaScript已经存在于主要的'.html'文件中。或者如[** jivings **]（http://stackoverflow.com/users/334274/jivings）中所述，回答您只能定位页面的一部分。如果您决定加载包含''的完整HTML页面，是否会导致HTML无效？ – Nope 2013-03-26 21:11:53

它们将互相覆盖，results.html将成为您的原始页面的一部分，它不会是它自己的页面。 html/head/body标签将被删除，留下他们的孩子。 – 2013-03-26 21:13:01

@KevinB：+1尼斯。至少无效的HTML将被照顾。很高兴知道相关标签被删除。 – Nope 2013-03-26 21:14:55

这将工作正常，浏览器将正确处理它。从jQuery docs：

...浏览器往往是从文件过滤元件如<html>，<title>，或<head>元素。因此，由.load（）检索的元素可能不完全相同，就好像文档由浏览器直接检索。

但是，它可能是更好的做法，指定要插入在返回的HTML元素：

$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');

来源

2013-03-26 21:12:17 Jivings

+1，该建议具体。像这样的句子：“浏览器经常过滤元素......”似乎并不能确保浏览器100％会这样做。 – Nope 2013-03-26 21:16:30

@FrançoisWahl确切地说，要确保你插入你想要的东西要好得多。 – Jivings 2013-03-26 21:18:16

+1，但如果海报可以修改他正在服务器端加载的页面，那么这可能是更好的方法。看到我的答案。 – undefined 2013-03-26 22:30:38

好了，也许我应该只采取一看DevTools之前，我问题。

在回顾了元素检查器之后，我现在看到（至少在Chrome中）浏览器去掉了HTML，HEAD和Body标签。它还删除了额外的jquery include。但是它确实离开

<script>my js functions here</script>

虽然我明白，我不能相信，所有的浏览器将被视为有效，至少我现在已经看到了曙光。

来源

2013-03-26 21:40:40 TheJason

我同意它'应该''很好'。但是考虑一下你正在创建的额外开销，可以通过从服务器返回你需要的内容来消除。您可能正在触碰数据库以检索在您丢弃的页面部分中呈现的数据。例如，您可能会在每个页面的顶部显示有关用户的信息。或者你可能正在查找其他信息进入你的页面元标记头。你可能有一些类型的服务器端模板来创建这些页面的多余部分。然后，您将这些多余的内容放入响应中，通过电报发送，然后让浏览器解析它，创建html元素，然后删除不需要的部分。

这可能不是什么大不了的事。这取决于你获得了多少流量，服务器做了多少额外的工作来渲染整个页面，服务器负载的多少，以及你有多少时间/金钱/人力，而不是多少以便能够发送修剪下来的响应。如果这是一个小型项目，交通流量很小，这可能不值得改变。但这也可能是一个简单的改变。由于这个问题是关于最佳实践的，我会说不，加载整页来渲染页面的一部分并不是最佳实践。最佳做法是从服务器返回所需的内容，并使用它来更新页面。这可以是预先呈现的HTML，也可以是JSON，但这完全是另一个讨论。

PHP中的平凡解可以像下面一样简单，使用format = AJAX在您的查询字符串：？

<?php 
$ajax = $_GET['format'] == 'ajax'; 

if (!$ajax) { 
    render_head_and_stuff(); 
} 

render_results(); 

if (!$ajax) { 
    render_footer_and_stuff(); 
}

来源

2013-03-26 22:18:18 undefined

通过Ajax将页面载入Div最佳实践？

回答

相关问题