使用 AJAX 调用检索 HTML 页面与使用 window.location 或超链接转到该页面的优缺点是什么？

Question

我想了解在浏览器中切换页面时的方法差异。我的理解如下：

锚标记 <a href = "#">...</a> 可用于使用文本和图片（非按钮）重定向页面
按钮元素<button id = "go" onClick = "fx()">具有可以触发下一步操作的属性

以下两个按钮都应写入您的控制台日志：单击一个

function fx(){
     console.log("Thanks for taking the time to review my post!");
}

<button onClick="fx()">Click One</button>

点击两次

$("#go").on("click", function(e){
//this callback keeps the screen steady then calls an AJAX function
     e.preventDefault();

     fakeAJAX("/gone", function(resp){
     //$.get("/gone", function(resp){
     //this callback delivers the response from the AJAX.get method
          console.log(resp);

     });
});

function fakeAJAX(words, funct){
//this function is meant to simulate modules.export = fx(app){
//it should respond with the result of anything matching AJAX call

     if(words == "/gone"){
     //this would be app.get("/gone", function(req, res){
          
          console.log("Your input helps me become a better #dev!");
          //this would be res.send("...");
          
       }//closing out app.get

}//} closing out modules.export simulation

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Click Two</button>

在最近的练习中，我很难使用按钮切换页面...我希望能够使用 res.send(?) 格式（在 Click Two 示例中演示) 到 return 我想要的页面，但到目前为止还没有成功；我得到的最好结果是在浏览器控制台中以纯文本形式打印目标页面的整个 html...（我将向该问题添加 link）

其他开发者的建议是使用 hyperlinks 和 window.location 更改页面；我可以承认我使用这两个建议中的后者成功地更改了页面，但我想知道为什么我的首选方法被规避了。如果你们中的任何一个能回答其中任何一个，你们将帮助我了解如何使用这些换页方法

使用 AJAX 调用 return 目标页面的“成本”是多少？
工作#dev 社区与 hyperlinks 和 window.location 相比如何看待 AJAX 方法？
在哪些情况下这些方法比其他方法更有意义？它们什么时候做得太多或做得不够？

Answer 1

如果您只是想让浏览器 window 转到一个新的 URL 并且在涉及的网页中没有特殊的预处理，那么只允许用户单击hyperlink 并让浏览器处理这一切。这将适用于任何地方，即使 Javascript 被禁用。而且，Javascript 真的没有理由参与 - 这只是不必要的额外步骤，并且会创建更多的代码、测试和操作。

另一方面，如果在转到新页面之前涉及客户端的处理，例如您正在根据输入计算 URL 或者您正在检查是否所有内容都有已经完成了在进入下一步（客户端验证）之前需要完成的操作，然后您可以使用 Javascript 进行验证，然后将 window.location 设置为新的 URL when验证完成。

Ajax 最适合在您需要这样的内容时获取新内容：

您想停留在同一页面上 URL（在浏览器的 URL 栏中）。
当您想将新内容插入现有页面时，至少保留一些当前内容并在浏览器中保持原样 URL。
当您正在执行某些服务器端事务（例如从列表中删除项目）并希望在事务完成后留在同一页面上时。在这种情况下，您可以发出 Ajax 调用来删除项目，然后当 Ajax 调用 returns 成功时，您从当前页面的列表中删除该项目并离开用户然后在同一页面中选择另一个操作。
当您希望检索一些数据（不是 HTML）时，通常采用 JSON 格式，然后使用该数据修改当前页面。

如果您只是转到一个新页面，那么只需让用户单击 link，然后让浏览器将您的用户带到新页面。 Javascript实在没有理由参与这么简单的操作。

而且，none 我们正在讨论的这些功能会以一种或另一种方式影响服务器。如果新的 URL 是 /clicked，那么你可以为那个 URL 创建一个路由并使用 res.send()、res.render() 或 res.sendFile() 或类似的东西在 Express 中发送该路由处理程序的响应，并且无论如何请求 URL 都可以正常工作（通过在浏览器中单击 link，通过 Javascript 设置 window.location 或通过 Javascript 手动检索内容并将其插入页面。服务器不关心客户端如何发出请求。请求是获取网页内容，服务器愉快地携带出那个请求，不管客户如何使用它。

有一次服务器会关心客户端正在做什么是客户端是否只需要 JSON 数据而不是完整的 HTML 网页。在这种情况下，您将专门为 JSON 请求设计一个路由，您将生成 JSON 并将其发回而不是发回 HTML.

使用 AJAX 调用检索 HTML 页面与使用 window.location 或超链接转到该页面的优缺点是什么？

What are the pros|cons of using AJAX calls to retrieve an HTML page vs. using window.location or a hyperlink to go to the page?

ajax

jquery

response

button

express