LOADING EXTERNAL CONTENT WITH AJAX USING JQUERY AND YQL

References :

CHRISTIAN HEILMANN’s blog post http://christianheilmann.com/2010/01/10/loading-external-content-with-ajax-using-jquery-and-yql/ , and http://ajaxian.com/archives/using-yql-as-a-proxy-for-cross-domain-ajax

Derek Gathright’s blog post (good one) http://derek.io/blog/2010/how-to-secure-oauth-in-javascript/

The PHP solution : http://derek.io/blog/2010/how-to-secure-oauth-in-javascript/

The Jquery JSONP solution : http://learn.jquery.com/ajax/working-with-jsonp/

YQL

YQL is an expressive SQL-like language that lets you query, filter, and join data across web servers. You can use it to access any web-accessible API.

YQL can even scrape html page for you. For example, use this query: select * from html where url=’http://bbc.co.uk‘

Erik Eldridge’s YDN blog post https://developer.yahoo.com/blogs/ydnsixblog/yql-code-samples-yql-easy-7883.html

The YQL Guide https://developer.yahoo.com/yql/guide/

The YQL Console https://developer.yahoo.com/yql/console/

Cross-domain data request

Sometimes we face cross domain error like XMLHttpRequest cannot load [URL]. Origin [YOUR WEBSITE] is not allowed by Access-Control-Allow-Origin while fetching data from a different server other than the server our client-side javascript comes from.

Here the browser security prevents direct fetching of data from other domains unless the domain host includes the Access-Control-Allow-Origin header.

From Wiki: In computing, the same-origin policy is an important concept in the web application security model. The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number – to access each other’s DOM with no specific restrictions, but prevents access to DOM on different sites. The same-origin policy also applies to XMLHttpRequest and to WebSocket.

This mechanism bears a particular significance for modern web applications that extensively depend on HTTP cookies to maintain authenticated user sessions, as servers act based on the HTTP cookie information to reveal sensitive information or take state-changing actions. A strict separation between content provided by unrelated sites must be maintained on the client side to prevent the loss of data confidentiality or integrity.

JSONP

In this case you can use proxies hosted on other domains which provide JSONP responses.Examples: YQL, Google feed API.

If your server supports JSONP, it will wrap the data you requested inside a script src body. This is the trick, because script src is not limited by the “Same-Origin” policy.

PHP Proxy

Yahoo’s article: JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls https://developer.yahoo.com/javascript/howto-proxy.html

Here the solution replys on the fact, that client can’t talk to cross-origin server, but your server can talk to anybody.