Problem Statement :
We generally encounter a scenario where we have to access services which are not hosted locally (i.e., Other domain). This normally can't be achieved straight forwardly in html. We need to understand few points here which I will be explaining in this post.
I would go with the assumption that one must know how to call a web service from html. If not the above reference would help in achieving this.
Note : A clear information that this is not possible in latest versions of chrome (I have tested only with browsers chrome and IE). This post is not meant for the applications which is using latest versions of chrome (http://bugs.jquery.com/ticket/4690 post would help you understand why).
Lets say you are using the same html file which is being explained in this post. Only difference being the gatewayURL which is the end point url being different.
How to solve it in IE :
Be it XMLHttpRequest or ajax request you can access services of cross domain using a browser property (this again depends on every client and also not secure). The property is as shown below in the image,
After enabling this option one can access cross domain services in IE.
How to Enable in Chrome lower versions (I have chrome 16):
Although new versions of chrome doesn't support cross domain services at all but this can be achieved for lower versions of chrome using concept called "CORS". CORS stand for Cross Origin Resource Sharing.
In Simple terms "Server has to authorize the client for cross domain accessing in case of chrome". This is not happening in IE as this is enabled at client side using settings of IE.
Possible errors from Chrome 16 are shown below :
Add below two properties to the website that you are using :
"Access-Control-Allow-Headers" with value "Content-Type"
"Access-Control-Allow-Origin" with value "*" (* generally represents allow any domain you have to google on how to give multiple domains, in general one domain is http://dhl-hyd1024)