通过Ajax将页面加载到Div Best Practice？
[英]Loading a page via Ajax into Div Best Practice?
问题描述
I'm using the method below to load a remote page into a div I have on the page. 
我正在使用下面的方法将远程页面加载到页面上的div中。
$('#result').load('www.myurl.com/results.html');
I'm curious, is it a bad practice to load an entirely formatted HTML page within another page? 我很好奇，在另一个页面中加载完全格式化的HTML页面是不好的做法？ My concern is more towards loading css or additional javascript includes that might overwrite other elements on the primary page. 我担心的是更多的是加载css或其他javascript包含可能会覆盖主页面上的其他元素。
I haven't experienced any issues during my initial tests, I'm just not sure if this is the best practice. 我在初次测试期间没有遇到任何问题，我只是不确定这是否是最好的做法。
To Clarify: If I have a primary page like so 澄清：如果我有这样的主页
<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>
And results.html code that looks like this: 和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>
Will the CSS and JS overwrite each other,or will the pages function as 2-separate entities? CSS和JS会相互覆盖，还是会将页面作为2个独立的实体运行？
3 个解决方案
解决方案1
9 已采纳 2013-03-26 21:12:17
This will work fine and the browser will handle it properly. 这将正常工作，浏览器将正确处理它。 From the jQuery docs : 来自jQuery文档 ：
... browsers often filter elements from the document such as
<html>,<title>, or<head>elements.<html>，<title>或<head>元素。 As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
However, it's probably better practice to specify the element in the returned HTML that you want to insert: 但是，在返回的HTML中指定要插入的元素可能是更好的做法：
$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');
解决方案2
0 2013-03-26 21:40:40
Ok, so maybe I should have just taken a look at DevTools before I asked the question. 好吧，也许我应该在我提出问题之前先看看DevTools。
After reviewing the Element Inspector, I now see that (at least in Chrome) that the browser strips out the HTML, HEAD, and Body tags. 在查看了Element Inspector之后，我现在看到（至少在Chrome中）浏览器剥离了HTML，HEAD和Body标签。 It also removes the additional jquery include. 它还删除了额外的jquery包含。 However it does leave the 然而它确实离开了
<script>my js functions here</script>
Although I understand that I can't trust that all browsers will be as efficient, at least now I have seen the light. 虽然我明白我不相信所有的浏览器都会有效率，但至少现在我已经看到了它。
解决方案3
0 2013-03-26 22:18:18
I agree that it 'should' work 'fine'. 我同意它应该“正常”工作。 But consider the extra overhead you are creating that could be eliminated by returning only the content that you need from the server. 但是考虑一下您正在创建的额外开销，可以通过仅返回服务器所需的内容来消除这些开销。 You might be hitting the database to retrieve data that is rendered in the parts of the page that you are discarding. 您可能正在访问数据库以检索在您要丢弃的页面部分中呈现的数据。 For example, you might have information about the user displayed at the top of every page. 例如，您可能在每个页面的顶部显示有关用户的信息。 Or you might be looking up other information that goes into your page meta tags in the head. 或者您可能正在查找进入页面元标记的其他信息。 You probably have some type of server side templating going on to create these excess parts of the page. 您可能正在使用某种类型的服务器端模板来创建页面的这些多余部分。 Then you are putting this excess content in a response, sending it over a wire, then asking the browser to parse it, create html elements out of it, then remove the parts that are not wanted for you. 然后，您将这些多余的内容放在响应中，通过电线发送，然后要求浏览器解析它，从中创建html元素，然后删除不需要的部分。
This may not be a big deal. 这可能不是什么大问题。 It depends on how much traffic you get, how much extra work the server is doing to render the full page, how much of a load the server is under, and how much time/money/man power you have versus how much it would take to be able to send a trimmed down response instead. 这取决于你获得了多少流量，服务器为渲染整个页面所做的额外工作量，服务器所承受的负载量，以及你需要多少时间/金钱/人力以及需要多少工作量能够发送修剪后的响应。 If it's a small project, with light traffic, it might not be worth changing. 如果这是一个小型项目，交通量很小，可能不值得改变。 But it's also probably an easy change to make. 但它也可能是一个容易改变。 And since the question is about a best practice, I would say no, loading a full page to render just a portion of the page not a best practice. 而且由于问题是关于最佳实践，我会说不，加载整页以仅呈现页面的一部分而不是最佳实践。 The best practice is to return just what you need from the server, and to use all of it to update the page. 最佳做法是从服务器返回您需要的内容，并使用它来更新页面。 This could be pre-rendered HTML or it could be JSON, but that is another discussion altogether. 这可以是预呈现的HTML，也可以是JSON，但这是另一个讨论。
A trivial solution in PHP could be as simple as the following, using ?format=ajax in your query string: PHP中的一个简单的解决方案可以简单如下，在查询字符串中使用？format = ajax：
<?php
$ajax = $_GET['format'] == 'ajax';
if (!$ajax) {
render_head_and_stuff();
}
render_results();
if (!$ajax) {
render_footer_and_stuff();
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.