Click here to Skip to main content
14,574,641 members

ASP.NET JSON Proxy, JSON Web Service, and JavaScript Client (Hosting and Consuming data as JSON - intra-domain and cross-domain)

Rate this:
4.67 (4 votes)
Please Sign up or sign in to vote.
4.67 (4 votes)
5 Sep 2012CPOL
This article contains an ASP.NET JSON proxy, a simple JSON Web Service, and JavaScript/jQuery clients to consume the JSON data intra-domain and cross domain (using dynamic script tags) scenarios.

1. Introduction

  • This tutorial is supposed to serve dual purpose:
    1. To demonstrate an ASP.NET JSON proxy which pulls data from a database (or XML file/web-service) and serves it as JSON and
    2. Perform cross domain requests using JavaScript (using dynamic script tags).
  • To make our article a bit more comprehensive, I have included a basic JSON web service in of this article (above). This gives us an idea of how a JSON web service can be consumed using jQuery/JavaScript AJAX. This is a better approach for intra domain JSON requests.
    1. Our JSON web service returns us the data as JSON/XML on the basis of the Content Type we request from it.
    2. We include a client "jsonServiceClient.htm" which consumes our web-service.

All the above scripts are independent and usable in different scenarios. Our JSON proxy page resides on the server and can be consumed locally using the jQuery.ajax or jQuery.getJSON methods.

This solution is a combination of various techniques brought together to present a single approach for "hosting" server side data as JSON and "consuming" it using jQuery/JavaScript.

For accessing the data on local domain, we can create an ASP.NET web-service, which is a better and easier approach. Then we can call our web-service using JavaScript AJAX or jQuery.ajax or SOAP. (Example attached with this article.)

However, for cross domain requirements, our JSON-Proxy can be used to host data as JSON. It can also be used to consume any third party XML (or any XML database like feeds) and return us the response as JSON instead of XML. (We can convert the XML to JSON by using XMLtoJson class provided.)

In this article, we try to learn how data can be "hosted" and "consumed" as JSON on cross domains.

2. Background

What Do I Mean by Json Proxy

Our JSON proxy here works in the same way as normal ASP.NET proxy pages which serves us data from any local or remote web-service. The only difference is, our JSON proxy returns the data as a JSON object, thus it becomes easier for us to call our proxy as a normal JavaScript using the "<script src='out json proxy' />" tag. This enables us to use our proxy for cross domain requests (because JavaScript can be called from any remote site as well).

The only twist we introduce here is - we are writing these script tags dynamically. The "<script src="our json proxy" />" tag is generated at run-time and attached to our web-page's DOM (using the script attached). This enables us to pass the parameters to our proxy page and get dynamic response on the basis of querystring.

What are Cross-Domain-Requests? 

A cross domain request is a browser issue. It occurs when a web-page (coming from a website tries to access content from another website ( The browser treats it as a violation of "Same origin policy" and forces you to use the content from the original website ( only because your webpage comes from this site.


There are various workarounds suggested for Cross-Domain-Requests. The easiest one is to create a local proxy on website "" which fetches the required data from ( and returns it to us as it is. Thus our web-pages located at ( can use our local proxy page without violating "same origin policy" and still getting data from the other website (


The problem occurs when we cannot create a proxy on (like in the case if it is a static server). In such a case, we might have to extend our data portal located at ( to return us data as a JSON object. As JavaScript can be embedded from any location, our JSON proxy - though it resides at server ( and still returns us the appropriate data to be used on our webpage at (


3. Description

The Server Side

As discussed earlier, our server side web page (JSON proxy) is an ASP.NET proxy to our data which we want to showcase. Only difference is - our JSON proxy returns us JSON objects instead of XML as a web-service returns. We can also write a JSON web-service if we are using the same domain. For cross domain, it becomes somewhat difficult to pass the parameters and invoke a web service.  We are using dynamic script tags to handle cross domain requests.

Our JSON proxy resides at server. It fills data for us, either by loading from the database or by consuming any XML webservice or XML file database:

System.Collections.Generic.List<publication> returnList = 
		new System.Collections.Generic.List<publication>();

//This is our data access method. Supposed to fill our 
//publication list from database
//We fill it using the below for loop for simplicity.
for (int tmp1 = 1; tmp1 <= 10; tmp1++)
    //Some customized data - according to query string.
    if ((strSearch.ToUpper() == "ODD") && (tmp1 % 2 == 0))
    else if ((strSearch.ToUpper() == "EVEN") && (tmp1 % 2 != 0))

    returnList.Add(new publication(tmp1, "Author" + tmp1.ToString(), 
"Title" + tmp1.ToString(), "Remarks" + tmp1.ToString(), "Category" + 
tmp1.ToString(), "Link" + tmp1.ToString()));

Here is how we can use the above code to load an XML and return it as JSON.

//For Example
XmlDocument docXml = new XmlDocument();
returnStr = XmlToJson.XmlToJSON(docXml);

We use JavaScriptSerializer to serialize our Business Objects list:

System.Web.Script.Serialization.JavaScriptSerializer ser = 
	new System.Web.Script.Serialization.JavaScriptSerializer();
        returnStr = ser.Serialize(returnList);

The Client Side

Our client side HTML page has JavaScript code to create dynamic tags:

// Create the script tag
this.scriptObj = document.createElement("script");

// Add script object attributes
this.scriptObj.setAttribute("type", "text/javascript");
this.scriptObj.setAttribute("charset", "utf-8");
this.scriptObj.setAttribute("src", this.fullUrl + this.noCacheIE);
this.scriptObj.setAttribute("id", this.scriptId);

Script tag created above is added to the head section of the page's DOM following function:

JSONscriptRequest.prototype.addScriptTag = function () {

Then we attach our JSON handler function "parseData" to the onload event of our script. (Please note that this code is different for Internet Explorer and other browsers. Appropriate scripts are collected from different blogs.)

 //Here I am adding the script to onload event:-
this.scriptObj.onload= function() {parseData(jsonData);}
var scriptTag = document.getElementById(this.scriptId);
scriptTag.onreadystatechange  =  function () {
        if ( scriptTag.readyState === "complete" ) {
          		  // Avoid memory leaks 
			  //(and duplicate call to callback) in IE
		  }//end if
}//end function;

4. Points of Interest

  • This article uses:
    • JSON and dynamic script tags from here
    • Detects if the above script is loaded from here
    • XmlToJson class comes from here
    • jQuery traversal of JSON data from here
  • Note:
    • There is one alert("loading...") in the Internet Explorer code. Strange is the fact that once I insert the alert, the JavaScript gets the time to load and display the JSON data correctly but removing the alert causes the JSON result to come as blank. Other than this, the code works fine.

5. History

I will try to update the code without having to use the "loading..." alert for Internet Explorer. I tried moving the scripts to the head but it didn't help.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
Singapore Singapore
I love programming, reading, and meditation. I like to explore management and productivity.

Comments and Discussions

GeneralMy vote of 5 Pin
Assil1-Sep-15 8:00
professionalAssil1-Sep-15 8:00 
GeneralRe: My vote of 5 Pin
amitthk3-Sep-15 0:02
professionalamitthk3-Sep-15 0:02 
Generalthanks for sharing Pin
Pranay Rana21-Feb-11 2:50
professionalPranay Rana21-Feb-11 2:50 
GeneralRe: thanks for sharing Pin
amitthk3-Sep-15 0:04
professionalamitthk3-Sep-15 0:04 
QuestionHave you tried JSONP before? Pin
Yingbiao20-Feb-11 12:47
MemberYingbiao20-Feb-11 12:47 
AnswerRe: Have you tried JSONP before? [modified] Pin
amitthk20-Feb-11 21:28
professionalamitthk20-Feb-11 21:28 
AnswerRe: Have you tried JSONP before? Pin
Member 34237008-Apr-11 10:53
MemberMember 34237008-Apr-11 10:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 17 Feb 2011


43 bookmarked