用于了解页面加载时的特定状态的常见 AJAX 约定是什么？

Question

自从我开始做严肃的 ajax 工作以来，这一直是我一直有的一个问题。让我举个例子。

假设您从服务器中提取了客户的常规 HTML 页面。 URL 可能如下所示：

/myapp/customer/54

呈现页面后，您希望提供作用于该客户的 ajax 功能。为此，您需要在每个请求中将 ID“54”发送回服务器。

哪种方法是最好/最常见的？我发现自己把它放在隐藏的形式中。我觉得很容易选择，但也感觉有点脆弱。如果文档更改并且脚本不起作用怎么办？如果 3 个月后该 id 因 css 目的而重复，并因此破坏页面，因为有 2 个同名 id，该怎么办？

我可以解析 url 来获取值“54”。这种方法更好吗？它可以重复地处理简单的情况。对于您可能想要传递多个 id 或 id 列表的复杂情况，它可能不太适用。

我只是想知道一个最佳实践 - 一些健壮、干净、优雅并且值得称赞的东西。

Answer 1

我认为最好的方法就是像没有 Ajax 一样思考。

假设您有一个使用 Ajax 提交的表单。您如何知道将其发送到哪个 URL？

src 属性。 只需让您的脚本发送表单本身即可。所有数据都已在表格中。

假设您有一个加载一些新数据的链接。你怎么知道URL和参数？

href 属性。 只需让脚本读取 URL。

因此基本上您总是会从所操作的元素中读取 URL/数据，类似于浏览器的操作。

由于您的服务器端代码在加载页面时知道 ID 等，因此您可以轻松地在那里生成这些 URL。客户端代码只需要读取属性。

这种方法不仅仅有一个好处：

• 它使 URL 和数据的存储位置变得更简单，因为它们准确地放置在您通常在 HTML 中找到的属性中。
• 如果您愿意的话，它可以让您的代码在没有 JavaScript 的情况下更容易工作，因为 URL 和所有内容都已经位于浏览器无需 JS 即可理解的位置。

如果您正在做比链接/表单更复杂的事情

在需要允许更复杂的交互的情况下，您可以将 ID 或其他相关数据存储在属性中。 HTML5 为此提供了 data-* 属性 - 我建议您甚至使用这些如果您不使用 HTML5：

<div data-article-id="5">...</div>

如果您的页面上有功能更齐全的应用程序，您也可以考虑简单地将您的 ID 存储在 JS 代码中。当您在 PHP 端生成标记时，只需在标记中包含一个片段，该片段将 ID 分配给变量或调用函数或您认为最好的任何内容。

Answer 2

理想情况下，您的表单应该在没有 JavaScript 的情况下工作，因此您可能有一个隐藏的表单输入或已经包含 id 值的内容。如果没有，你可能应该这样做。

从某种意义上说，这一切都是“脆弱的”，一个小小的变化就会影响一切，对此你无能为力，但你并不总是想通过读取 url 或查询字符串将其放在用户手中，这很容易由用户操纵。 （这当然适用于 url，但不适用于所有内容。适用于信任 $_GET 和查询字符串的相同规则也适用于此处）。

就我个人而言，我喜欢在现有的功能代码之上构建所有 AJAX，而且我从来没有遇到过“挂钩”已有代码的问题。

---

但并非一切都是形式。为了
例如，假设您单击“标题”
并且它变得可编辑。你编辑一下，
按回车键，然后就变成了
不可编辑并再次成为页面的一部分。
您需要发送 ID 作为
这。还有，搬东西怎么办
周围并且你想要这些职位
更新了吗？这是另一个案例
使用表格不起作用，因为它
不存在。

所有这些仍然是可能的，并且如果没有 javascript，并不完全困难，因此表单在任何一种情况下都可以工作，但我确实明白你在说什么。几乎在每种情况下，都有某种唯一的 id，无论是数据库 id 还是文件名，都可以用作表示它的 html 的“id”属性。 * 或 Jani Hartikainen 提到的 data- 属性。

例如，我有一个模板系统，允许拖/放内容块。每个方块都有一个 ID，每个可以掉落的区域也有一个 ID。我将在包含的 div id 上使用前缀，例如“template-area_35”或“content-block_264”。在这种情况下，我懒得回退而不使用 JavaScript，但它可以完成（例如下拉菜单->将其移动到区域）。无论如何，id 属性是一个很好的用途。

如果该 id 重复怎么办
CSS 的用途是从现在开始 3 个月，并且
因此会破坏页面，因为有 2
id 具有相同的名称吗？

如果发生这种情况（实际上不应该发生），则说明有人做错了事。如果代码无法运行，那是他们的错，他们要承担责任。根据定义，ID 应该是唯一。

Answer 3

恕我直言，将其放在请求参数（即？customerId=54）中会很好，因为即使您无法处理 AJAX（例如在某些旧的移动浏览器、命令行浏览器等中），您仍然可以引用关联。

Answer 4

显然，您有一个知道实体“Customer”的应用程序，您应该在 Javascript（或 PHP，但由于您正在执行 ajax，我会将其放入 Javascript）中反映这一点。

您可以将其包装到更多领域感知函数中，而不是手动进行每个 ajax 调用：

旧场景：

var customer_id = fetch_from_url();  // or whatever
ajax("dosomething", { "customer": customer_id }, function () {
    alert("did something!");
});
ajax("dosomethingelse", { "customer": customer_id }, function () {
    alert("did something else!");
});

新场景：

var create_customer = function (customer_id) {

    return {
        "dosomething" : function () {
            ajax("dosomething", { "customer": customer_id }, function () {
                alert("did something!");
            });
        },
        "dosomethingelse": function () {
            ajax("dosomethingelse", { "customer": customer_id }, function () {
                alert("did something else!");
            });
        }
    };
}

var customer_id = fetch_from_url();  // or whatever
var customer = create_customer(customer_id);
// now you have a reference to the customer, you are no longer working with ids
// but with actual entities (or classes or objects or whathaveyou)
customer.dosomething();
customer.dosomethingelse();

将其四舍五入。是的，您需要为每个请求发送客户 ID，但我会将其包装在 Javascript 中的适当对象中。