保存公共共享的价值状态(添加到URL)

时间:2014-07-31 01:55:24

标签: javascript php jquery

http://liveweave.com/xfOKga

我正在试图找出如何保存类似于Liveweave的代码。

基本上无论你编码什么,你单击保存按钮,它会在网址后生成一个哈希。当你转到这个网址时,你可以看到保存的代码。 (我一直试图了解这一点,我一直无法找到合适的来源。我的搜索结果最终得到的参考文献与我正在寻找的内容完全无关,example

我花了两天的时间研究这个问题而且我没有在哪里。

任何人都可以帮我指导一篇完整解释此类保存事件的教程或文章吗?

1 个答案:

答案 0 :(得分:2)

要了解功能,最好尝试识别正在发生的一切。根据通常用于每个可区分组件的技术来解析此功能。然后,剖析概述将更容易看到底层技术如何协同工作。我怀疑你可能缺乏经验或术语,一眼就能看到像liveweave这样的网站如何工作或如何搜索各个部分,所以我会为你分解它。由您来研究我将命名的各个组件。了解这一点,以下是您需要研究的关键:

请注意,如果不是真正的liveweave开发者,知道所有后端技术是不可能的,但智能猜测就足够了。这种做法都是一样的。这是一个粗略的细分。

1)带有HTML,CSS和JavaScript的标记页面。这是应用程序的面向用户的一部分,可以输入内容,以及用户如何与应用程序交互。

2) JavaScript to asynchronously(AJAX)将页面的表单提交给后端进行处理。

3)用于处理传入表单的后端编程/脚本语言。在liveweave的情况下,表单是POSTed。它也使用PHP来处理表单。

4)一个数据库表,其中包含每种语言的列(liveweave包含HTML,CSS和JavaScript)。此数据库将插入表单中提交的每个textarea的当前数据,并由PHP作为新行处理。每行将生成一个新哈希并将其与刚插入的数据一起存储。一个流行的数据库是MySQL。

5)当数据库插入完成后,脚本语言将再次接管,并将其响应发送回标记页面(1)。该页面正在等待后端的响应。 JavaScript处理响应。在liveweave的情况下,响应是URL中使用的最新哈希。

6)使用JavaScript会发生URL魔术。您希望查找JavaScript的最新历史记录API ,其中 pushState 等方法将用于更新浏览器中的网址,而无需实际刷新页面。

当导航具有给定散列的URL时,脚本语言处理请求,抓取散列,在数据库表中搜索散列,找到匹配的行,并使用以下内容填充页面的textareas。数据刚刚找到。

在所有这些中,应该进行检查以避免重复和大量漏洞利用。这也取决于你的研究。


应该注意的是,目前您的问题有两条评论。 Darren的链接确实允许更改URL,但它是重定向,而不是您想要的。 ksealey的回答没有错;这是一种做法,但它不是最强大或可扩展的,也不是推荐的解决方法。