Using JSONP in ASP.NET MVC

Introduction

For security reasons browsers don't allow cross-domain communication. However,in some legitimate situations cross-domain communication becomes necessary. A common work-around for this restriction is to use JSON with Padding or JSONP. Using JSONP,you return data to a caller embedded in a script. In this article you will learn how JSONP can be used in an ASP.NET MVC application.

Understanding JSONP

Before you actually go into the code level details of using JSONP in ASP.NET MVC,let's see how JSONP works. Consider that you have two domains,website1.com and website2.com. A page from website1.com wants to retrieve some data from a resource belonging to website2.com. If the page and the resource would have been part of the same web site,you could have easily make an Ajax request using $.ajax() or jQuery or XMLHttpRequest object. However,since the page and the resource belong to two different web sites,the browser won't allow such communication due to possible security threats.

Though browsers are reluctant to make cross-domain requests,they happily allow certain HTML tags to point to cross-domain resources. The HTML tags such as <script>,<img> and <iframe> can point to resources outside their current domain using the src attribute. So,you can point a <script> tag to a remote resource that processes and returns some data to your page. However,merely using the <script> tag to point to the remote resource is not of much use because even though the remote resource returns data,the data is merely embedded in the page. You cannot access this returned data for some meaningful purpose.

In JSONP,the remote resource doesn't return plain data to the caller. It returns the data by wrapping it in a JavaScript function call. The JavaScript function name is usually supplied by the caller. The page making the request contains that function. Just to make this concept clear,consider the following example.

Let's say you wish to return data from a remote resource in this form:

 
 
  1. {"CustomerID" : "ALFKI", "Country" : "USA"}

The calling page from website1.com will initiate request to the remote resource like this:

 
 
  1. http://www.website2.com/dataprocessor?callback=MyCallbackFunction

The remote resource (dataprocessor) will process the request and will return the data as follows:

 
 
  1. MyCallbackFunction("{"CustomerID" : "ALFKI","Country" : "USA"}");

The calling page will have MyCallbackFunction() defined somewhere that will be invoked by the browser.

 
 
  1. function MyCallbackFunction(data)
  2. {
  3. //process data further
  4. }

As you can see from the above example,JSONP uses JSON data and pads it with some script to make it a function call.

Creating an ASP.NET MVC Application that Returns Data

Now,that you know what JSONP is and how it works,let's develop an ASP.NET MVC application that returns data to the caller. This application represents the remote resource and consists of a controller named Home. The Home controller contains an action method named GetData(). The GetData() method is shown below:

 
 
  1. [HttpGet]
  2. public JsonpResult GetData(string id)
  3. {
  4. NorthwindEntities db = new NorthwindEntities();
  5. var data = from item in db.Customers
  6. select new { CustomerID=item.CustomerID,Country=item.Country };
  7. JsonpResult result = new JsonpResult(data.SingleOrDefault());
  8. return result;
  9. }

The GetData() method accepts one string parameter - id - that represents a CustomerID. The return type,if GetData() method,is JsonpResult. The JsonpResult is a custom action result class derived from the inbuilt JsonResult class. You will develop the JsonpResult class shortly. Inside,the GetData() method retrieves a Customer from the Customers table of Northwind database. The Customers table contains many columns but the code returns only CustomerID and Country columns. The Customer data is converted into JSONP format using the JsonpResult class and then returned to the caller.

The JsonpResult class used in the above code is shown next.

 
 
  1. public class JsonpResult : JsonResult
  2. {
  3. object data = null;
  4. public JsonpResult()
  5. {
  6. }
  7. public JsonpResult(object data)
  8. {
  9. this.data = data;
  10. }
  11. public override void ExecuteResult(ControllerContext controllerContext)
  12. {
  13. if (controllerContext != null)
  14. {
  15. HttpResponseBase Response = controllerContext.HttpContext.Response;
  16. HttpRequestBase Request = controllerContext.HttpContext.Request;
  17. string callbackfunction = Request["callback"];
  18. if (string.IsNullOrEmpty(callbackfunction))
  19. {
  20. throw new Exception("Callback function name must be provided in the request!");
  21. }
  22. Response.ContentType = "application/x-javascript";
  23. if (data != null)
  24. {
  25. JavaScriptSerializer serializer = new JavaScriptSerializer();
  26. Response.Write(string.Format("{0}({1});", callbackfunction, serializer.Serialize(data)));
  27. }
  28. }
  29. }
  30. }

The JsonpResult class inherits from JsonResult. The JsonResult class is an inbuilt class provided by ASP.NET MVC and represents the data in JSON format. The parameterized constructor of the jsonpResult class accepts an object that represents the data to be wrapped in JSONP form. The ExecuteResult() method is where all the main logic goes. Notice the code marked in bold letters. The code first grabs a query string parameter named callback. This parameter will hold the name of the JavaScript function acting as a callback. Though you can use any name for the query string parameter,the commonly used parameter names are callback and jsoncallback.

The next "if" condition checks if the callback function name is supplied. If it's not then an exception is thrown since callback function is necessary for JSONP to work. The code then sets the ContentType property of the Response object to application/x-javascript because it returns a JSONP string as explained earlier. An instance of the JavaScriptSerializer is then created. The Serialize() method of the JavaScriptSerializer class serializes the supplied data after converting it to JSON format. Notice how the string format is provided while sending the JSON data back. The string.Format() method uses two placeholders and the resultant string will be a function call.

Creating an ASP.NET MVC Application that Consumes the Data

Now,let's create another ASP.NET MVC application that calls the GetData() action method developed earlier. The following code shows the Index view of the second application.

 
 
  1. <script>
  2. function MyCallback(data) {
  3. alert(data.CustomerID + " - " + data.Country);
  4. }
  5. </script>
  6. <script src="http://localhost:1044/home/GetData?id=ALFKI&callback=MyCallback"></script>

The above code contains a <script> block that defines a function named MyCallback(). This function acts as a callback for the JSONP request. The MyCallback() function simply displays the CustomerID and Country of the returned Customer object. Then a <script> tag is used to point to the GetData() action method developed earlier. The src attribute of the <script> tag points to the GetData action and passes two query string parameters viz. id and callback. The id query string parameter is supplied to the GetData() method whereas the callback parameter is used by the JsonpResult class discussed earlier.

If you run the Index view of the client application you will get an alert box as shown below:

Using jQuery for Making JSONP Requests

Though the technique of invoking a JSONP request as illustrated in the preceding section worked as expected,it was a bit raw way of making JSONP requests. Luckily,jQuery offers an inbuilt way to use JSONP in your script. The $.ajax() and $.getJSON() method can be used to make JSONP requests on remote resources. The following code shows how they are used:

 
 
  1. $.ajax({
  2. url: "http://localhost:1044/home/GetData",
  3. data: { id: 'ALFKI' },
  4. type: "GET",
  5. dataType: "jsonp",
  6. jsonp:"callback",
  7. success: function (data) {
  8. alert(data.CustomerID + " - " + data.Country);
  9. }
  10. });
  11. $.getJSON("http://localhost:1044/home/GetData?id=ALFKI&callback=?", function (data) {
  12. alert(data.CustomerID + " - " + data.Country);
  13. });

The first piece of code shown above uses $.ajax() technique whereas the second piece of code uses $.getJSON() technique. While using the $.ajax() method,the dataType is specified as jsonp and the callback query string parameter is specified as callback using the jsonp option. While using the above mentioned jQuery techniques you need not specify a callback function name while making a JSONP request. This is because jQuery automatically creates a random function and sends along with the request. The returned data is processed by the success handler function of the respective calls. So,the code that you put inside MyCallback() function now resides inside the success handler functions of $.ajax() and $.getJSON() methods.

If you run the Index view after adding this markup,you will get the same results as in the previous run.

Summary

Browsers don't let you make cross-domain requests due for security reasons. JSON with Padding or JSONP provides a work-around that allows you to make cross-domain requests and return script rather than data. While making a JSONP request you supply a callback function name in the query string. The remote resource then returns a script equivalent to the function call and passes the data to the function as a parameter. Using JSONP you can achieve cross-domain communication in legitimate scenarios.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读2.4k次。最近要优化cesium里的热力图效果,浏览了网络上的各种方法,发现大多是贴在影像上的。这么做好是好,但是会被自生添加的模型或者其他数据给遮盖。其次是网上的方法大多数是截取成一个矩形。不能自定义的截取自己所需要的。经过尝试,决定修改下cesium heatmap,让他达到我们需要的要求。首先先下载 cesium heatmap包。其中我们可以看到也是通过叠加entity达到添加canvas的方法绘制到地图上。我们先把这一段代码注释} else {} };
文章浏览阅读1.2w次,点赞3次,收藏19次。在 Python中读取 json文件也可以使用 sort ()函数,在这里我介绍一个简单的示例程序: (4)如果我们想将字符串转换为列表形式,只需要添加一个变量来存储需要转换的字符串即可。在上面的代码中,我们创建了一个名为` read`的对象,然后在文件的开头使用`./`关键字来命名该对象,并在文件中定义了一个名为` json`的变量,并在其中定义了一个名为` json`的字段。比如,我们可以使用 read方法读取 json文件中的内容,然后使用 send方法将其发送到 json文件中。_python怎么读取json文件
文章浏览阅读1.4k次。首字母缩略词 API 代表应用程序编程接口,它是一种设备,例如用于使用编程代码发送和检索数据的服务器。最常见的是,该技术用于从源检索数据并将其显示给软件应用程序及其用户。当您访问网页时,API 的工作方式与浏览器相同,信息请求会发送到服务器,如何在 Windows PC 中手动创建系统还原点服务器会做出响应。唯一的区别是服务器响应的数据类型,对于 API,数据是 JSON 类型。JSON 代表 JavaScript Object Notation,它是大多数软件语言中 API 的标准数据表示法。_api是什么 python
文章浏览阅读802次,点赞10次,收藏10次。解决一个JSON反序列化问题-空字符串变为空集合_cannot coerce empty string ("") to element of `java.util.arraylist
文章浏览阅读882次。Unity Json和Xml的序列化和反序列化_unity json反序列化存储换行
文章浏览阅读796次。reader.readAsText(data.file)中data.file的数据格式为。使用FileReader对象读取文件内容,最后将文件内容进行处理使用。_a-upload 同时支持文件和文件夹
文章浏览阅读775次,点赞19次,收藏10次。fastjson是由国内的阿里推出的一种json处理器,由java语言编写,无依赖,不需要引用额外的jar包,能直接运行在jdk环境中,它的解析速度是非常之快的,目前超过了所有json库。提示:以下是引用fastjson的方法,数据未涉及到私密信息。_解析器用fastjson还是jackson
文章浏览阅读940次。【Qt之JSON文件】QJsonDocument、QJsonObject、QJsonArray等类介绍及使用_使用什么方法检查qjsondocument是否为空
文章浏览阅读957次,点赞34次,收藏22次。主要内容原生 ajax重点重点JSON熟悉章节目标掌握原生 ajax掌握jQuery ajax掌握JSON第一节 ajax1. 什么是ajaxAJAX 全称为,表示异步的Java脚本和Xml文件,是一种异步刷新技术。2. 为什么要使用ajaxServlet进行网页的变更往往是通过请求转发或者是重定向来完成,这样的操作更新的是整个网页,如果我们只需要更新网页的局部内容,就需要使用到AJAX来处理了。因为只是更新局部内容,因此,Servlet。
文章浏览阅读1.4k次,点赞45次,收藏13次。主要介绍了JsonFormat与@DateTimeFormat注解实例解析,文中通过示例代码介绍的非常详细,对大家的学习 或者工作具有一定的参考学习价值,需要的朋友可以参考下 这篇文章主要介绍了从数据库获取时间传到前端进行展示的时候,我们有时候可能无法得到一个满意的时间格式的时间日期,在数据库中显 示的是正确的时间格式,获取出来却变成了时间戳,@JsonFormat注解很好的解决了这个问题,我们通过使用 @JsonFormat可以很好的解决:后台到前台时间格式保持一致的问题,
文章浏览阅读1k次。JsonDeserialize:json反序列化注解,作用于setter()方法,将json数据反序列化为java对象。可以理解为用在处理接收的数据上。_jsondeserialize
文章浏览阅读2.7k次。labelme标注的json文件是在数据标注时产生,不能直接应用于模型训练。各大目标检测训练平台或项目框架均有自己的数据格式要求,通常为voc、coco或yolo格式。由于yolov8项目比较火热,故此本博文详细介绍将json格式标注转化为yolo格式的过程及其代码。_labelme json 转 yolo
文章浏览阅读790次,点赞26次,收藏6次。GROUP_CONCAT_UNORDERED(): 与GROUP_CONCAT类似,但不保证结果的顺序。COUNT_DISTINCT_AND_ORDERED(): 计算指定列的不同值的数量,并保持结果的顺序。COUNT_ALL_DISTINCT(): 计算指定列的所有不同值的数量(包括NULL)。AVG_RANGE(): 计算指定列的最大值和最小值之间的差异的平均值。JSON_OBJECT(): 将结果集中的行转换为JSON对象。COUNT_DISTINCT(): 计算指定列的不同值的数量。_mysql json 聚合
文章浏览阅读1.2k次。ajax同步与异步,json-serve的安装与使用,node.js的下载_json-serve 与node版本
文章浏览阅读1.7k次。`.net core`提供了Json处理模块,在命名空间`System.Text.Json`中,下面通过顶级语句,对C#的Json功能进行讲解。_c# json
文章浏览阅读2.8k次。主要介绍了python对于json文件的读写操作内容_python读取json文件
文章浏览阅读770次。然而,有时候在处理包含中文字符的Json数据时会出现乱码的情况。本文将介绍一种解决Json中文乱码问题的常见方法,并提供相应的源代码和描述。而某些情况下,中文字符可能会被错误地编码或解码,导致乱码的出现。通过适当地控制编码和解码过程,我们可以有效地处理包含中文字符的Json数据,避免乱码的发生。通过控制编码和解码过程,我们可以确保Json数据中的中文字符能够正确地传输和解析。为了解决这个问题,我们可以使用C#的System.Text.Encoding类提供的方法进行编码和解码的控制。_c# json 中文编码
文章浏览阅读997次。【代码】【工具】XML和JSON互相转换。_xml 转json
文章浏览阅读1.1k次。json path 提取数据_jsonpath数组取值
文章浏览阅读3w次,点赞35次,收藏36次。本文主要介绍了pandas read_json时ValueError: Expected object or value的解决方案,希望能对学习python的同学们有所帮助。文章目录1. 问题描述2. 解决方案_valueerror: expected object or value