Anmelden

Beni

As Behnam Taraghi in my ID card, student, colleague, good friend in university & at my office :-)

Cross-Domain Ajax Call

  • Öffentlich
Von Beni vor 1239 Tagen

Actually the browsers does not allow you to perform Ajax requests to the third party web sites because of security restrictions. But there are some techniques to work around these restrictions. I try to describe the ones I've come across to. If you know some other ways to do that don't be shy to let me know.

JSONP

JSON with Padding is may be the most popular method which is used to fulfill a cross-domain Ajax request. The data format used in the response is JSON and the request is performed through the <script/> tag. The only thing you need to do is to call the server side JSON API as the src value of the script tag just as you would embed a javascript file into your html document. You need to define a callback function as a parameter in your JSON API URI to be able to parse the JSON data. There are some JavaScript frameworks that have implemented that for you such as getJson function of jQuery. An example: jQuery and Json example with twitter API and RSS Feed 

YQL Proxy

If you don't know what Yahoo! Query Language YQL is, you should read about it first. This technique is somehow the same as JSONP. The difference is that you use the Yahoo API as a proxy to fetch data from different web services. Advantages: Yahoo API has a cache mechanism for your data, it seems to be very fast and you can use the SQL-like language that lets you query, filter, and join data across Web services. Disadvantage: you are dependent on Yahoo API. The jQuery plugin cross-domain-ajax extends the Get Methods of jQuery and processes the request over YQL proxy in the background for you. You can use jQuery's Ajax methods as you usually would. For the ones who need to send POST requests to other web services, I found a post which describes how to use YQL to read HTML from a document that requires POST data. Here is a tutorial how you can use it with jQuery frame work

CSSHttpRequest

CSSHttpRequest is cross-domain AJAX using CSS. It functions similar to JSONP. The difference is that the data is encoded on the server into URI-encoded 2KB chunks and serialized into CSS rules with a modified data: URI scheme.

Flash Proxy

Cross-Domain requests can be processed with Flash as a client side proxy. CrossXhr and fIXHR are the tools you can check out. Cross-Domain requests with Flash must be permitted by the domain you are about to send requests to. This is done by a file called crossdomain.xml which must exist on the domain. The service provider can limit access to its services and allow only some specific domains to call its services by defining the domain names in the XML file. So if the third party websites forbid the request or don't have a crossdomain.xml file at all this technique is useless. On the other hand this requires flash to be supported in the browser. A 1-pixel transparent flash is embedded in the top-left corner of the page.You can use CrossXhr with Prototype library.There is also a jQuery plugin for fIXHR.

Iframes

Iframes can be used to fetch data from remote servers. Imagine a client from domain A wants to fetch some data from a service on the domain B. In this case the client calls (opens) the remote service in an iframe (iB). The iframe content which is actually loaded from the remote domain B must contain an iframe (iA) referencing to a push service on the domain A. The service sets the response data as the GET parameter in the src of the iframe iA. Now the push service on domain A, which is called through the iframe iA receives the data by GET and pushes that to the client. The push action can be realized through cookies in a simple form. iframe iA sets a cookie with the serialized data. the client must wait until the cookie is set. then the clients reads the data from the cookie and destroys it an the end.

HTTP access controls

Cross-site access control is a way for web servers to enable secure cross-site data transfers. The Web Applications Working Group within the W3C has proposed the new Cross-Origin Resource Sharing (CORS) recommendation to meet this goal. On the client, the browser handles the components of cross-origin sharing, including headers and policy enforcement.  This new capability means that the servers have to handle new headers, and send resources back with new headers.Similar to CrossXhr capabilities in crossdomain.xml file, the server can restrict access to specific domains. This, however, is done in the response headers. Currently Firefox 3.5+, Safari 4 and Google Chrome 2 have implemented the CORS using XMLHttpRequest. IE 8 implements parts of the CORS specification, using XDomainRequest. Here you can find a simple request example which works in Firefox 3.5+, IE 8, Safari 4 and Google Chrome 2. A complete treatment of CORS and XMLHttpRequest can be found on the Mozilla Developer Wiki.

Server Side Proxy

Last but not least there is always the possibility to use your own proxy on your domain. On the client you send Ajax requests to your proxy on the same domain. The proxy handles the request and sends the response back to the client. However I don't know if you can still call it a "cross-domain Ajax call"! :-)