65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 ASP.NET 进行跨域脚本

Ron Laughton
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.60/5 (6投票s)

2009年10月23日

CPOL

3分钟阅读

viewsIcon

30518

学习如何通过跨域脚本和 ASP.NET 共享数据

简介 - 跨域查询的挑战

SOA（面向搜索的架构）的承诺是共享。中间层 SOA 需要额外的编码并导致额外的数据跳转。客户端浏览器基于 SOA 的请求受到限制，因为 JavaScript XMLHttpRequest (XHR) 目前不支持跨域查询。

Flash 和 Silverlight API 选项可用，但有三个缺点

  1. 必须安装它们才能使查询工作。
  2. 它们需要时间加载，从而延迟查询。
  3. 代码可能需要一段时间来编写、测试，并在每个版本、浏览器等上重新测试。

在 2009 年，跨域查询最常见的解决方案是主要的广告网络使用的：动态 JavaScript 生成。这有时被错误地称为跨域 JSON、跨域 XML 和其他一些东西。格式不是重点。连接性在于您可以跨域加载 JavaScript 库，并且 ASP.NET 可以为每个 JavaScript 库调用动态生成自定义内容。

编写代码的代码 - 客户端和服务器

一般来说，编写代码来编写代码是不好的形式。因此，如果您想要教科书式的架构完美，请停止阅读。如果您想要一个务实的、广泛实施的解决方案，请继续阅读。

下面是一个示例客户端 JavaScript 代码，用于调用 ASPX 来生成特定于传递值的脚本库

<!-- BEGIN Spreety.com Service Call -->
<!-- Replace the value="..." with your name. -->
<input id="SpreetySearchTextHidden" value="Scooby-Doo" type="hidden" />
<script type="text/javascript"><!--//<![CDATA[
try {
    var spreetySearch = document.getElementById('SpreetySearchTextHidden').value;
    if (spreetySearch != "") {
        document.write(String.fromCharCode(60, 83, 67, 82, 73, 80, 84)); 
        document.write(' src="http://ws.spreety.com/
		Scripts2009/TheCodeProjectExampleByName.aspx?query=' + 
        spreetySearch + '" type="text/javascript">');
        document.write(String.fromCharCode(60, 47, 83, 67, 82, 73, 80, 84, 62));
    } else { 
        document.write("<p>Error: Please update the SpreetySearchTextHidden 
		field with a value.</p>"); }
} catch (err) { document.write("<p>Error: Unable to query Spreety.</p>"); }
//]]>--></script>

<!-- END Spreety.com Service Call -->

将以上代码放置在 HTML 文档的 <BODY> 标签之间将呈现如下

Result from ASP.NET: Scooby-Doo

客户端代码调用一个 .ASPX 页面，该页面如下所示（简化版...生产版本具有广泛的错误检查并利用通用代码库）

<%@ Page Language="C#" AutoEventWireup="true" %>

<%      
    try
    {
        string query = Request.QueryString.Get("query");
        string result = "<p style='color:Blue'>Result from ASP.NET: <b>" + 
            query.Replace("\"", "\\\"") + "</b></p>";

        Response.ContentType = "text/javascript";
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.AddHeader("type", "text/javascript");
        Response.Write("document.write(\"" + result + "\");");
    }
    catch (Exception ex)
    {
        Console.Write(ex.ToString());
    }
%>

客户端 JavaScript 代码调用 ASPX 代码，该代码返回 JavaScript 代码以在客户端上执行以写入结果。

客户端代码 - 逐行

在客户端 JavaScript 代码中，有

一个值为“Scooby-Doo”的隐藏字段。 随意更改该值。

<input id="SpreetySearchTextHidden" value="Scooby-Doo" type="hidden" />

编写脚本的脚本的开始。注释是为了避免在 JavaScript 未启用时显示代码。 CDATA 告诉解析器仅解释为字符数据。

<script type="text/javascript"><!--//<![CDATA[

//]]>--></script>

启动错误捕获。

try {

将隐藏字段的值捕获到 JavaScript 变量中。

var spreetySearch = document.getElementById('SpreetySearchTextHidden').value;

仅在搜索某些内容时才进行远程调用。

if (spreetySearch != "") {

这里是一个脚本编写一个脚本的地方。 (60, 83, 67, 82, 73, 80, 84) = <script> 和 (60, 47, 83, 67, 82, 73, 80, 84, 62) = ></script>。 src 等于传递了查询参数的 ASPX 页面。

document.write(String.fromCharCode(60, 83, 67, 82, 73, 80, 84));
document.write(' src="http://ws.spreety.com/Scripts2009/
	TheCodeProjectExampleByName.aspx?query=' +
spreetySearch + '" type="text/javascript">'); 
document.write(String.fromCharCode(60, 47, 83, 67, 82, 73, 80, 84, 62));

其余的 JavaScript 行是信息性的或错误处理。

ASPX 代码 - 逐行

在服务器端 ASPX C# 代码中，有

定义页面标题语言并连接。

<%@ Page Language="C#" AutoEventWireup="true" %>

获取传入的查询参数。

string query = Request.QueryString.Get("query");

处理结果。 为了避免换行和回车，请使用 HTML 标记。 此外，双引号需要替换为 \“。

string result = "<p style='color:Blue'>Result from ASP.NET: <b>" + 
     query.Replace("\"", "\\\"") + "</b></p>";

将结果作为 JavaScript 返回以执行。

Response.ContentType = "text/javascript";
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.AddHeader("type", "text/javascript");

在 C# 中编写一行代码来编写一行 JavaScript 代码来写入结果。

Response.Write("document.write(\"" + result + "\");");

小心使用

跨域 JavaScript 库的主要缺点是不道德的人可能会操纵事情。 奇怪的是，阻止跨域 XMLHttpRequest (XHR) 的安全敏感理由导致程序员利用跨域脚本库面临更大的安全风险。 第二个缺点是缺少返回的错误值。 如果您的架构师担心 JavaScript 选项，请切换到 Web 服务，也可以通过其主页上的“Open APIs for Spreety”对其进行测试。

摘要

SOA 的承诺仍然被实施障碍所掩盖。 跨域脚本选项是一种常见的、有效的方法。 虽然在架构上并不完美，但该技术快速、稳定，并且为当今价值数十亿美元的广告行业提供支持。

历史

  • 2009 年 10 月 23 日：首次发布
© . All rights reserved.