<H2>Introduction</H2>
The Problem:
The requirement was to access data exposed by web-methods/web-sites at client side using scripting. At start the problem statements seems to be very simple, all you have to do is access some webmethods at client side and display data
<H2>The Plot:</H2>
The first task on hand was to define the design of the whole system. What all objects will take place in the whole system? How will they interact with each other?
The first idea was to expose some methods by the hosting server which can be accessed by clients. In .Net technologies, there are two major ways to expose methods to be accessed by clients. One is either by exposing Web methods in a webservice or by using .Net Remoting. Both the methods have their own pros and cons and the developer needs to use both the methodologies according to the requirement on hand.
The second object was going to be the client side script, which will be used to access the web methods. There are many ways to do the same and you will find many scripts to do this task on the net. One of the famous solutions being the HTC file provided by Microsoft, however its no longer supported, due to its memory leakage problem.
<H2>The Solution:</H2>
After analyzing the problem, I decided to write a webservice which exposed some basic webmethods to return data. I provide one webmethod over here named GetHTML, which is also used in the script examples below. This method provides HTML to be emitted on the page depending on the input parameter.
[WebMethod]
public string GetHTML(string selectionValue)
{
//1. div generation according to the value selected
//2. binding data with div
StringBuilder response = new StringBuilder();
string[] links = GetVariousLinks(selectionValue).Split('&');
StringBuilder lnksData = new StringBuilder();
if((selectionValue == "fivelinks") ||(selectionValue == "fourlinks"))
{
response.Append("<div id='MainDiv'></div>&");
for(int i=0;i<links.Length; i++)
{
lnksData.Append("<a href=" + links[i] + ">" + links[i] + "</a><br>");
}
response.Append(lnksData);
}
else if(selectionValue == "halfbanner")
{
response.Append("<div id='MainDiv' style='width:234px; height:60px'></div>&");
lnksData.Append("<a href="+ links[0] + ">" + links[0] + "</a><br>" + links[1]);
response.Append(lnksData);
}
else if(selectionValue == "button")
{
response.Append("<div id='MainDiv' style='width:125px; height:125px'></div>&");
lnksData.Append("<a href=" + links[0] + ">" + links[0] + "</a><br>" + links[1]);
response.Append(lnksData);
}
return response.ToString();
}
The GetVariousLinks is a private method, which is used to get the Links to be displayed on the screen. As you can see, this method merely manipulates the response string depending on the input parameter. I have defined four types of inputs according to my requirements and am appending the required formatting to the response string.
However the major task of eliminating cross domain messaging was to be handled by the calling script of these methods. To resolve this issue, I hosted a HTML page on the same server where the service was hosted. The HTML page accesses the webmethods and displayed the results. The code to access the webmehtods is as follows –
For IE –
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var selectionValue = window.location.search.substring(1).split("=")[1];
xmlhttp.Open("GET","http://pointvitamin.com/Service.asmx/GetHTML?selectionValue="+ selectionValue, false);
xmlhttp.Send(null);
In the above code, an ActiveXObject for the HTTP response is created. A request is send by using this object. Check the Open method of the object; it specifies the Method of request – GET/POST, the URL of the webmethod. Here “GetHTML” is the webmethod, which accepts a parameter “selectionValue”. From the second line you must have guessed it that, this parameter is retrieved from the query string of the page. The third parameter in the Open method specified whether the call is asynchronous or not.
Once the send method is called, the object is populated with the response from the service. Then we can use the response in whichever way we want. Here, I assign it to a variable and further do manipulation,
links = xmlhttp.responseXML.text.split("&");
It should be noted here that the above given example will only work for IE, if you need to call webservices from any other browser, the calling principles will be different. Our requirement was to provide support for IE and Firefox. So this is how you will do it in FireFox.
FireFox –
var xmlRequest = new XMLHttpRequest();
var selectionValue = window.location.search.substring(1).split("=")[1];
xmlRequest.open("GET", "http://pointvitamin.com/Service.asmx/GetHTML?selectionValue="+ selectionValue, false);
xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlRequest.send(null);
Here, we create a HttpRequest object and open the request in almost similar fashion. However, we also need to set the Request Header to its required type.
Again, the parameters for the webmethod are accessed from the query string and on successfully sending the request, the object is loaded with the response, which can be used in anyways as requirements. Here again, I populate the variable as in case of IE,
links = xmlRequest.responseXML.firstChild.firstChild.nodeValue.split("&");
Notice the way the response is accessed in IE and in firefox. It is treated according to the way the response object gets populated.
Displaying Data:
You might think that this sounds pretty simple enough, so what’s the big deal in dedicating a whole article for this. Well, there lies our problem, as the title suggests “Cross-Domain”. This piece of code will NOT work if this particular file is moved from this server or you try copy-pasting it on a HTML file on your server. This is basically the cross-domain messaging problem. As the HTML file and the webservice both are placed in different domains, the script cannot access the methods and you end up getting blank pages and javascript errors.
The Hero: IFRAME
HTML consists of an element known as IFrame, which is basically used to load various pages in a single page. By using the “SRC” attribute, you can load a page in that particular IFrame. In context of our above problem, IFrame is the best solution. So to solve, the “cross-domain messaging” problem all you have to do is set the SRC attribute of the IFrame tag to the URL of the HTML page, which we have hosted on the server, where the service is present. Bingo!!! And the problem is solved. Just send the parameters in the query string of the URL and you can get your data the way you want to display (according to the requirements)
<iframe src="http://pointvitamin.com/pointdemo.htm?selectionValue=fivelinks" frameborder="0"></iframe>
<H2>Conclusion:</H2>
Thus I conclude this article by saying that cross-domain messaging is a real-time problem faced by many applications today. There have been floating many solutions for this problem, however not every solution matches individual requirements. In this article, I have given a simple but powerful solution to resolve cross domain messaging by using IFrames.
Hope you like the article and its useful to you in some ways or the other.
|
No responses found. Be the first to respond and make money from revenue sharing program.
|