<pedrocorreia.net ⁄>

<Combine JSONP and jQuery to quickly build powerful mashups ⁄ >

clicks: 2866 2866 2009-03-04 2009-03-04 goto programacao myNews programacao  Bookmark This Bookmark This

Asynchronous JavaScript and XML (Ajax) is the key technology driving the new generation of Web sites, popularly termed as Web 2.0 sites. Ajax allows for data retrieval in the background without interfering with the display and behavior of the Web application. Data is retrieved using the XMLHttpRequest function, which is an API that lets client-side JavaScript make HTTP connections to remote servers. Ajax is also the driving force behind many mashups, which integrate content from multiple sources into a single Web application.

This approach, however, does not allow cross-domain communication because of restrictions imposed by the browser. If you try to request data from a different domain, you will get a security error. You can stop these security errors if you control the remote server where data resides and every request goes to the same domain, but what's the fun of a Web application if you are stuck on your own server? What if you need to collect data from multiple third-party servers?

Understanding the same-origin policy limitations

The same-origin policy prevents a script loaded from one domain from getting or manipulating properties of a document from another domain. That is, the domain of the requested URL must be the same as the domain of the current Web page. This basically means that the browser isolates content from different origins to guard them against manipulation. This browser policy is quite old and dates back to Netscape Navigator 2.0.

One relatively simple way to overcome this limitation is to have the Web page request data from the Web server it originates from, and to have the Web server behave as a proxy relaying the request to the actual third-party servers. Although widely used, this technique isn't scalable. Another way is to use frame elements to create new areas in the current Web page, and to fetch any third-party content using GET requests. After being fetched, however, the content in the frames would be subject to the same-origin policy limitations.

A more promising way to overcome this limitation is to insert a dynamic script element in the Web page, one whose source is pointing to the service URL in the other domain and gets the data in the script itself. When the script loads, it executes. It works because the same-origin policy doesn't prevent dynamic script insertions and treats the scripts as if they were loaded from the domain that provided the Web page. But if this script tries to load a document from yet another domain, it will fail. Fortunately, you can improve this technique by adding JavaScript Object Notation (JSON) to the mix.

este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:


Subscribe News RSS  Subscribe News Updates by E-mail

myNews <myNews show="rand" cat="programacao" ⁄>

RouterJs: easy routing for your ajax Web applications new ...

RouterJs is a simple router for your ajax web apps. It's build upon History.js which means that Rout (...)

clicks: 16338 16338 2012-05-14 2012-05-14 goto url (new window) haithembelhaj.g... goto myNews programacao

Backbone computed properties new ...

This gist shows one way to implement read- and write-enabled computed properties on a Backbone Model (...)

clicks: 16150 16150 2012-05-13 2012-05-13 goto url (new window) https://gist.gi... goto myNews programacao

HTML5 jQuery Paint Plugin new ...

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area (...)

clicks: 26936 26936 2012-05-12 2012-05-12 goto url (new window) websanova.com/t... goto myNews programacao

Create Instagram Filters With PHP new ...

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP (...)

clicks: 15854 15854 2012-05-12 2012-05-12 goto url (new window) net.tutsplus.co... goto myNews programacao

Android Query new ...

Android-Query (AQuery) is a light-weight library for doing asynchronous tasks and manipulating UI el (...)

clicks: 16385 16385 2012-05-12 2012-05-12 goto url (new window) code.google.com... goto myNews programacao

Sass vs. LESS vs. Stylus: Preprocessor Shootout new ...

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to (...)

clicks: 15556 15556 2012-05-11 2012-05-11 goto url (new window) net.tutsplus.co... goto myNews programacao

Real-time Applications With Node.js and Socket.IO new ...

Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for th (...)

clicks: 16226 16226 2012-05-11 2012-05-11 goto url (new window) codingcookies.c... goto myNews programacao

Gettings to know Backbone.ks new ...

In this series, we're going to learn how to build a fully functional contacts manager using Backbone (...)

clicks: 15145 15145 2012-05-10 2012-05-10 goto url (new window) net.tutsplus.co... goto myNews programacao