javascript - 毫无疑问地询问用户详细信息

Question

我试图找出为用户（在Web应用程序内）填写“不引人注目的”表格的最佳方法。

目的：通过不要求填写不必要的表格来使用户留在网站上。仅在需要时才要求提供详细信息。

要求是：


用户仅在需要时才提供其他详细信息（通过电子邮件接收通知，需要登录帐户页面，在退房时保存信用卡详细信息）。
用户不应离开当前页面以提供其他详细信息。


如果所有请求都是AJAX请求，则实现将相当容易。分析响应（401左右）并显示适当的灯箱形式将很容易。

我看不到如何使用简单的a锚和form提交“正确的方式”完成操作，因为在两种情况下，用户实际上都离开了页面（通过链接或提交表单），并且没有办法在客户端分析响应。

将所有链接和表单转换为AJAX链接将很愚蠢。

我想要实现的最接近的模拟是大多数浏览器中的默认“基本身份验证”对话框。但显然这不符合我的要求。

对于非AJAX请求，有何创意建议？

问候，
Dmytrii。

Answer 1

在页面意义上，“页面”是指用户看到的内容，而不是URL是什么，我只能想到以下方法来关闭JavaScript（从而关闭Ajax）来更新页面中的独立部分：


镜框
iframe


使用保持打开的连接，还有两种更新页面的方法，但是这些方法并非在所有情况下都能可靠运行：


GIF动画
具有绝对定位的CSS DIV标签。


请注意，这需要您的服务器可以为每个查看该页面的人（可能成千上万）保持打开状态。如果这不起作用，则唯一可行的解​​决方法是使用FRAME和自动刷新，这有些笨拙。

因为我认为您不想使用框架并且不想渲染动画GIF，所以我解释一下CSS DIV方式：

加载页面时，您尚未完成加载。而是由Web服务器保持连接的打开状态，并且处理该连接的脚本等待其他信息到达。当有其他数据时，会将其封装到其他DIV标签中，从而将其覆盖页面的其他部分，从而将其发送到浏览器。

在DIV标签和CSS位置使用“样式”：绝对可以覆盖页面上的其他信息，例如新图层。但是，您需要position：absolute或必须将此数据添加到页面末尾。

表单如何运作？

表单通常具有已知大小，因此您可以将其放入IFRAME。这些IFRAME被提交到Web服务器。那里的脚本通知其他脚本必须输出新数据，因此等待脚本呈现响应并将其显示在页面中，而提交的脚本仅使用新值重新显示表单。

404和锚点如何工作？

我真的不知道，因为必须对此进行测试，但是这里暗示了我将如何尝试实现这一点：

我们这里有2期。

首先，URL不得指向其他页面，而必须再次指向服务器脚本，因此href受控制。然后，该脚本通知等待的脚本相应地更新页面，例如，通过检索页面并将其发送到浏览器。该脚本也可以检查404。

其次，您必须阻止浏览器在单击锚点时切换页面。这可能涉及一些使用CSS，目标和服务器端状态代码（例如“ gone”或重定向到当前页面，无论如何）的巧妙技巧，以防止浏览器切换页面。我不确定这是否可行，但是如果您还记得下载页面，这些显示的URL不会切换页面但会起作用（下载文件）。从这里开始尝试黑客不使用JavaScript而不离开当前页面的浏览器。

这里没有遵循的一个想法是不保持页面的连接打开，而是保持CSS文件的状态，并将新的CSS信息发送到浏览器，然后浏览器使用CSS方式“填充空的存根”。但是我怀疑这样做是否很好，大多数浏览器可能仅在加载完成后才能解析CSS，但也许我错了。

还要注意，保持连接打开永远不会完成页面加载，因此您会一直看到忙碌的徽标在旋转，这是使用此技术不可避免的。

说了这么多，我怀疑您是否了解JavaScript。

我在这里写的东西很难做，因此通常不使用，因为它伸缩性很差。比单独使用JavaScript困难得多（这就是我解释的原因）。

使用适当的AJAX，可以轻松实现目标。还要注意，您不需要太多更改页面源代码，只需添加一个脚本来增加页面内容，例如，表单突然使用AJAX而不是直接渲染页面的直接POST。因此，无法轻松检测到的事物需要标签中的一些提示，以便标签扫描器知道如何处理标签。这样做的好处是，关闭JavaScript后，您的页面仍然有效-但是它随后“离开了页面”。

普通HTML并非旨在像我们今天希望的那样创建类似应用程序的网页。所有这些都是使用JavaScript添加的。

关于弹出表单

用户在此对话框中输入内容后，Basic-Auth-Handler会重新加载页面，仅当单击“取消”时才显示当前页面。

但是，有两种方法可以使用JavaScript在页面中显示其他查询弹出窗口：

第一个是javascript“提示”，如以下示例所示：

http://de.selfhtml.org/javascript/objekte/anzeige/window_prompt_vor.htm
（单击“ Hier”）。

第二个是“ JavaScript表单”，类似于HTML页面中的弹出窗口。

但是，我认为弹出式窗口太过侵入性且设计不良。

Ajax和JavaScript是最简单的方法

不幸的是，使用JavaScript从来都不是一件容易的事，但是如果您认为JavaScript不正确或太难了，那么没有其他技术比这更容易了，这就是为什么在各处都使用J​​avaScript的原因。

例如，您的页面onload-Script可以循环浏览所有的Anchor-Tag，并对其进行修改，以便单击它们即可调用一个函数。然后，此功能必须执行一些巧妙的操作。

表单也是如此。然后可以修改的字段（例如用户的电子邮件地址）具有两个视图，其中一个是可见的，另一个是隐藏的。隐藏的是一种形式。单击电子邮件地址，然后切换视图（禁用第一个div并启用第二个div），以便突然出现一个包含电子邮件地址的文本表单字段，而不是电子邮件地址。如果单击“确定”按钮，则该按钮将外观变为微调框，直到提交数据为止，然后视图切换回普通视图。

这是使用JavaScript和Ajax的通常方法。直到运行良好，这涉及大量编程。

很抱歉没有缩短这篇文章，并且缺少代码段，我目前没有时间;）