Cross Domain HTTP Requests (Or, why it isn't working?)

What would you say if I http request your site content and present it on my blog? Easy work for me... isn't it?

I'm preaty sure you wouldn't allow me to do this, but hey, you don't need to wory about it, the browser is doing it for you!

All modern web browsers impose a security restriction on network connections, which includes calls to XMLHttpRequest. This restriction prevents a script or application from making a connection to any web server other than the one the web page originally came from.

The XMLHttpRequest object (also known as the XMLHTTP object in Internet Explorer) is at the core of today's most exciting AJAX web applications. But actually writing client web applications that use this object can be tricky given restrictions imposed by web browsers on network connections across domains.

So, as a client developer, how can you get information from another server/domain on the net?

The solution
Two things must happen: The web server must allow http requesting to its content & you need to use on of this methods:

1. JSON and dynamic <script>
tags instead of XML and XMLHttpRequest. You can get around the browser security problem altogether by making your web services request directly inside a <script> tag.

Example:

var url = "the url to the other web browser";
var myScript = document.createElement("script");
myScript.setAttribute("src", url);
myScript.setAttribute("type", "text/javascript");
document.documentElement.appendChild(myScript);


2. Use JSONP
AJAX make it simple to do things, thats a fact.. So don't be surprise if they "Wrap" your way to make cross domain http requests also.
(As a matter of fact, JSONP is using example #1 behind the sceen)

Lets see another example:

function MYResponse(data){
// do something with the data you get
}
var url = "the url to the other web browser";
$.ajax({
url: url,
dataType: "jsonp",
jsonpCallback: 'MYResponse'
});


Easy and clear.

Enjoy.