How do I preview a url using ajax?

Question

How do I preview a url using ajax? I have seen this done with search engine plug ins and would like to learn how to do this. Specifically, I would like to be able to mouse over a link and see the preview of the webpage using ajax.

Answer 1

Please clarify your question. It's not obvious what do you mean. Cheers.

Answer 2

There's the easy solution, the hard solution, and the use-a-library solution.

use-a-library : I prefer always doing the use-a-library solution unless you have a darn good reason otherwise. One possible site which wraps the "hard solution" as a service for you: http://thumbnails.iwebtool.com/demo/

easy: The easy solution is to just load the target webpage as a downscaled AJAXy window. You can use many of the Lightbox-class plugins for this task, particularly the ones which allow you to target arbitrary HTTP content for the Lightbox window. GreyBox is my favorite of those which I have used before. Lightbox Gone Wild is also nice.

hard: Then there is the hard solution: you need to render the web page server side, cache the rendering as an image, and then serve up that image using Lightbox-esque Javascript (which is trivial next to the other requirements). How you would go about doing this is outside the scope of this box. Why would you do it this way? The preview generates MUCH faster for the client, and it hermetically seals the client's session away from things which might bust it in the target website -- poorly behaving Javascript and/or malware can cause Really Bad Things when you open them, even in an AJAXy window-within-a-window.

Answer 3

I think I know what he's driving at. What happens is that he wants a windows to appear on hover over a hyperlink (javascript), and for that windows to display a snapshot image of the website being referenced by the hyperlink.

The ajax part connects to the server where you are hosting your site, asynchronously, and hits a page that goes and fetches an image of the site to display in a img tag.

Now, how does one generate the image of the site? I would suggest that this is done in advance (for example as the content is being created) and that already-generated image is recalled.

How to generate the images to begin with? I think that would be another question: "How to generate snapshot images of websites?"