As your chart illustrates, XHR and iFrame are vastly different beasts. It's akin to asking when to use a car or a horse. Where does one start? There are a few things both do well - request a URL - but the similarity stops shortly thereafter.

iframe: use it when you really want a browser-within-a-browser experience. Or when you need a resource to be pinged (like, for tracking purposed) but Javascript is disabled.
iframe is also a very effective placenta around content you don't want a parent page to manipulate, especially when the content is on a different domain.

XHR: use it when you're doing AJAX in any of its various modern flavours. Also good for Lazy Loading, Predictive Fetch, and other techniques.

This is just scratching the surface of a huge topic

I got it, but still i would like to know who do u think is the horse and who is the car?

XHR is the car, of course

Cross-site-------- no ------------ yes

Whilst you can get content cross domain into an iframe, security will prevent access to it from host page and vice versa.

So if we are taking about using a hidden iframe for AJAX functionality there is no cross site advantage. XMLHttpRequest also allows POSTS, so unless very early browser support is an issue it is the best way to go.