Wednesday, May 26th, 2010

COR Blimey! Cross domain Ajax is really here

Category: Ajax, Standards

<>blockquote>

There is a lot of solid support for cross-domain Ajax in modern web browsers, yet most developers are still unaware of this powerful capability. Usage requires just a little bit of extra JavaScript work and a little extra server-side work to ensure that the correct headers are being sent. IE8’s implementation lags a bit behind the others in terms of allowing advanced requests and credentialed requests, but hopefully support for CORS will continue to improve.

Nicholas C. Zakas concludes the above in his post on cross domain with cross origin resource sharing (and XDR for IE).

He shares some simple code:

javascript
< view plain text >
  1. function createCORSRequest(method, url){
  2.     var xhr = new XMLHttpRequest();
  3.     if ("withCredentials" in xhr){
  4.         xhr.open(method, url, true);
  5.     } else if (typeof XDomainRequest != "undefined"){
  6.         xhr = new XDomainRequest();
  7.         xhr.open(method, url);
  8.     } else {
  9.         xhr = null;
  10.     }
  11.     return xhr;
  12. }
  13.  
  14. var request = createCORSRequest("get", "http://www.nczonline.net/");
  15. if (request){
  16.     request.onload = function(){
  17.         //do something with request.responseText
  18.     };
  19.     request.send();
  20. }

to do the work of cross domain.

Read the detail for the various headers and tweaks, and then check out the CORS demo page by Arun of Mozilla.

Related Content:

Posted by Dion Almaer at 6:09 am
10 Comments

++++-
4 rating from 41 votes

10 Comments »

Comments feed TrackBack URI

Hmmm…”posting” XML is one thing, but being able to post files is even better. There should be a simple way to “pre-authenticate” from one domain to another and then actually send/get the data without hassle.

jQuery sort of has this with JSONp.

Comment by doughboy — May 26, 2010

I like this “news” of lost technology, feels like when we found “Ajax” back in the days.

@doughboy: JSONp … not only in jQ but in nearly every JavaScript framework … or even possible in 3 lines native JavaScript. And what is the relation of posting “file” and JSONP? Maybe check out binary XHR, supported by “good” browsers.

Comment by digitarald — May 26, 2010

So, only browsers that support COR will do this, correct?

Comment by Baryn — May 26, 2010

A cross-browser alternative, that also supports older browser like IE6 is the XHR functionality provided by easyXDM.

easyXDM is a generic solution for cross-domain messaging, but it can also be used for XHR provided that the hosting server provides a simple endpoint for easyXDM.

Try it out here http:///consumer.easyxdm.net/current/example/xhr.html

I’m not saying that it is the optimal solution (after all CORS is a standard), but if you are controlling both domains than its a pretty easy solution.

For an example of more regular RPC check this out!
http://consumer.easyxdm.net/current/example/methods.html

Comment by oyvindkinsey — May 26, 2010

Right,

Those browsers are IE8+, FF3.5+, Saf4, and Chrome. No Opera yet.

Comment by PaulIrish — May 26, 2010

It’s funny to me how cross-domain Ajax crops up for some attention about once every 9-12 months and then fades into obscurity, only to return later.
.
I’ve dabbled in cross-domain Ajax stuff in the past, including flXHR and jXHR… both of them cross-domain Ajax capable tools that implement the native XHR compliant API so they’re easier to drop in as fallbacks for browsers (like Opera) that don’t support native x-domain.
.
Some sites don’t have to care about IE6/7, FF3, Saf3, or Opera (even though combined that’s still a huge chunk of the visitor population), and for them, using only the native stuff is great. For everyone else, you’ll need some sort of fallback. If you want to avoid server-side proxies, perhaps these client-side hacks are something to consider.
.
Of course, even if you do decide to use the native stuff as Nicholas mentions, you’ll have to implement some custom logic on your server to handle those header pre-flight requests properly… accepting a request and responding with the right headers, etc. Hopefully someone will come up with a simple package you can deploy in various servers to help make that process easier as I think everyone having to that custom themselves is going to get pretty messy and inconsistent.

Comment by getify — May 26, 2010

“Cross domain Ajax is really here.” Really? Last time I checked (an hour ago) IE6 and 7 are still used by close to 30% of web users.

Comment by blago — May 26, 2010

@blago: 70% of people having the ability to use a feature sounds like a good basis to start using it, in cases where a reasonable fallback is available, and given that the percentage is only going to increase.

Comment by greim — May 27, 2010

All the hype about cross site Ajax, when all you need is Javascript and a little php, if anyone wants to know the method let me know.

Comment by kiwi2 — July 4, 2010

I have tested CORS in Firefox 3.6, Chrome 5 and Safari 5and found that only Chrome can handle requests to servers with authentication properly. I tested cross-domain PROPFIND request with Basic, Digest and NTLM and found that Firefox supports only Digest authentication (for PROPFIND it does not support Basic even with SSL for some reason) while Safari does not support any authentication for PROPFIND requests at all.

It is a great disappointment as PROPFIND and other WebDAV verbs are critical for our product, hope they will fix it.

We have published the results here: http://www.webdavsystem.com/ajaxfilebrowser/programming/cross_domain. See Cross-Domain Requests with Authentication section at the bottom of the page.

Comment by ITHit — July 29, 2010

Leave a comment

You must be logged in to post a comment.