使用JSON的跨域请求

时间:2012-11-12 12:35:20

标签: javascript ajax html5 asp.net-web-api jsonp

  

可能重复:
  Ajax cross domain call

我的应用程序使用 ASP .Net Web API 4.5 RTM ,与其他域上的 HTML5和AJAX 进行交互。

此应用程序是否需要使用 JSONP 而不是 JSON 进行序列化/反序列化?

1 个答案:

答案 0 :(得分:3)

JSONP或JSON with padding是对基本JSON数据格式的补充。它提供了一种从不同域中的服务器请求数据的方法,这是由于相同的原始策略而被典型Web浏览器禁止的。

在相同的原始政策下,server1.example.com提供的网页通常无法连接到server1.example.com以外的服务器或与之通信。

HTML元素是一个例外。利用元素的开放策略,一些页面使用它们来检索JavaScript代码,这些代码对来自其他来源的动态生成的JSON格式数据进行操作。此使用模式称为JSONP。

JSONP的请求不是JSON,而是任意JavaScript代码。它们由JavaScript解释器评估,而不是由JSON解析器解析。

要了解此模式的工作原理,请首先考虑返回JSON数据的URL请求。例如,JavaScript程序可能会通过XMLHttpRequest请求此网址。假设Foo的UserId是1234.请求URLhttp://server2.example.com/Users/1234,传递Id of Foo的浏览器会收到如下内容:

{"Name": "Foo", "Id": 1234, "Rank": 7}

根据URL中传递的查询参数,可以动态生成此JSON数据。 这里,HTML元素为其src属性指定了一个返回JSON的URL:

<script type="text/javascript"
    src="http://server2.example.com/Users/1234">
</script>

浏览器将按顺序下载脚本文件,评估其内容,将原始JSON数据解释为块,并抛出语法错误。即使数据被解释为JavaScript对象文字,浏览器中运行的JavaScript也无法访问它,因为没有变量赋值对象文字是不可访问的。

在JSONP使用模式中,src属性指向的URL请求返回JSON数据,并且函数调用包围它。通过这种方式,已在JavaScript环境中定义的函数可以操作JSON数据。 JSONP有效负载可能如下所示:

functionCall({"Name": "Foo", "Id": 1234, "Rank": 7});

函数调用是JSONP的“P” - 纯JSON周围的“填充”,或者根据某些[1]“前缀”。按照惯例,浏览器在其对服务器的请求中提供回调函数的名称作为命名查询参数,通常使用名称JSONP或回调,例如,

<script type="text/javascript"
     src="http://server2.example.com/Users/1234?jsonp=parseResponse">
</script>

在此示例中,收到的有效负载为:

parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});