代码之家 › 专栏 › 技术社区 › E.J. Brennan

允许我的网站用户将动态数据纳入其网站的最佳技术

javascript

E.J. Brennan · 技术社区 · 16 年前

我要问的是,什么是最好的方式(即,对于新手网站开发人员来说最容易的方式)将我在自己的网站上提供的数据消费/集成到他们自己的网站上。

我有一个用ASP.NET/SQL Server后端编写的网站。

我的客户希望能够将所选数据(例如,一个数据表和一些长度不同且对每个用户都不同的图像)合并到他们的网站中,以便数据看起来像是属于他们的,并由他们标记(理想情况下,数据将以默认的CSS格式提供给他们,但他们可以d根据需要定制)。当我网站上的数据更改时,他们网站上的数据需要更改。

我希望我的数据用户能够访问我的网站,登录,然后能够从我的网站“复制”一个定制的脚本/代码,粘贴到他们的网站,然后让它工作,不管他们的网站是用什么写的(即纯HTML、PHP、ASP.NET或其他)。

我假设某种类型的javascript脚本是最好的方法,但是我对于如何使用户完全简单化以及脚本可能包含什么(javascript还不是我的强项)感到茫然。也就是说,我能在客户网站上获得一个javascript吗?在我的服务器上调用一个ASP.NET脚本,然后将HTML流回到他们的网站上。

我确信在其他地方一定有这样的例子,有人能给我指出正确的方向吗?

编辑:让我试着举一个更好的例子来说明我想做什么 .

我的应用程序不是房地产应用程序,但我们假设它是我们的(假设realtor.com是MLS数据库)。现在这个国家的每一个房地产经纪人都有自己的网站,而且他们是用各种语言写的,所以我不能对数据的消费者做任何假设,也不能假设他们有任何编程方面的专业知识。

如果我是realtor.com的所有者,我希望每个realtor都能够访问我的网站,复制一小段代码(如我所说,可能是一些javascript,但我不确定),回到他们的网站并将其粘贴到他们页面的源代码中,然后当他们的一个用户转到“joersrealty.com”并单击“显示所有待售的属性”脚本/c通过在我的网站(realtor.com)上执行一些操作,ode/page实际上会将html从我的网站上拉下来,并检索代理出售的所有属性的列表(比如一个附带图片的表)。

我知道我在一个大牌网站上看到了这一伟大的实现,但是我的生活不记得我在哪里看到了它,也从来没有费心去尝试看看他们使用了什么技术。

5 回复 | 直到 16 年前

ConroyP 16 年前

我的客户希望能够将所选数据(…)合并到他们的网站中,以便数据看起来像是属于他们的,并且由他们打上了烙印。

许多站点通过JavaScript代码片段提供此功能,例如 TechnicalJobs.ie .

用户将一些javascript代码粘贴到他们的页面中。此代码会回拨到您的网站以提取最新数据,然后将其显示在客户的网站上。

例子

我们可以发送一个新窗口小部件的无样式列表,并允许用户设置CSS样式以调整其网站上的显示。

在您的页面上,告诉用户将以下javascript复制到其页面:

<script src="http://www.yoursite.com/widgets.asp?action=getNewWidgets"
   type="text/javascript"></script>

<script type="text/javascript">
   showWidgets('widget-container', 'widget-list');
</script>

在你的网站上, widgets.asp 将负责从数据库中查找新窗口小部件的数据。它将把数据拉到一起,然后输出到 JSON-encoded 格式。逻辑都是用ASP或您选择的语言处理的,并以下面概述的格式输出。此页还将返回 showWidgets 方法,它处理将数据转换为显示在用户网站上。

小程序 的最终输出应该如下所示:

// Widget product data 
var widgets = [
     {
       "url":"http:\/\/www.yoursite.com\/widgets\/foo-widget",
       "title":"Brand new Foo Widget, available now!"
     },
     {
       // More widget details..
     }
];

// Function to display list of widgets on calling page    
function showWidgets(container_div, style)
{
    // Start building the html for the list
    var html = "<ul class='" + style + "'>";

    // Loop through all of the widgets we have, ading to list
    for (i = 0; i < widgets.length; i++)
    {
        html += "<li><a target='_blank' href='" + widgets[i].url + "'>";
        html += widgets[i].title;
        html += "</a></li>";
    }
    html += "</ul>";

    // We have the html, now write to the container     
    // If the user hasn't created this already, we'll make it      
    if (document.getElementById(container_div))
    {
        document.getElementById(container_div).innerHTML = html;    
    }
    else
    {
        // Target div wasn't made by user, create it inline
        document.write("<div id='" + container_div + "'>");
        document.write(html);
        document.write("</div>");
    }
}

一旦用户将您的JS代码嵌入到他们的页面上,将 小程序 将负责写出最近的数据。您可以指定样式等,或者由最终用户根据其网站的其余部分设置样式。

Andy Hume 16 年前

您的需求列表似乎相当广泛。

我打算建议构建一种RESTful Web服务,通过它,用户可以使用任何格式最合适的数据。这可能是XML或JSON,如果他们有能力解析它,或者如果他们只想在他们的页面中嵌入一个iframe,它可以返回纯HTML。

看看雅虎的一些网络服务,了解它们是如何运作的:

http://developer.yahoo.com/

cdonner 16 年前

任何类型的Web服务都需要在用户端进行编程,因此这不是您的选择。您要做的通常是使用JavaScript。看看亚马逊为合作网站、Technorati等提供了什么。还有很多其他的例子。

它的工作方式——您的客户机从您的站点中包含一个javascript文件,然后在浏览器中作为页面呈现的一部分执行,您可以将您的内容包含到生成的输出流中。重要的是要理解你必须为剧本服务。由于潜在的安全风险,浏览器会阻止跨站点脚本编写。例如,为了包含Amazon的搜索小部件,您只需要将以下代码放入页面(为了清晰起见,我删除了查询字符串参数):

<SCRIPT charset="utf-8" type="text/javascript" 
        src="http://ws.amazon.com/widgets/q?...">
</SCRIPT> 
<NOSCRIPT>
<A HREF="http://ws.amazon.com/widgets/q?...">
        Amazon.com Widgets</A>
</NOSCRIPT>

如果浏览器没有启用Java脚本,它只显示一个链接。您可以将DIV标记环绕在这周围,以控制小部件的大小。你唯一的选择是 <IFRAME> .

schooner 16 年前

您可以公开他们可以调用的Web服务。在ASP.NET中创建Web服务非常简单。

您可以为要公开的不同数据元素创建方法,客户可以使用方法中提供的任何参数调用服务,以便他们根据需要进一步筛选数据。

Svante Svenson 16 年前

创建一个可以基于参数或内容接受头以不同格式生成响应的URL;我建议使用HTML、XML和JSON。对于希望使用iframe或具有javascript的客户机,HTML为希望在输出数据之前处理数据的客户机执行document.write、xml和json操作,可以使用客户机端javascript或服务器端使用他们使用的任何语言。您可以为您的客户创建一个javascript,用于获取HTML并执行document.write以及包括一些默认的CSS。