Easy Page Scraping

I recently had a need to pull data from a different part of our site and display it in a floating div (triggered by a mouseover) for quick and easy access. Thanks to jQuery this process is incredibly simple and by using the framework in this post you will be off and running in no time. Before we get into the code I should mention that JavaScript has what is known as a "Same Origin Policy" which means a document or script loaded from one origin can not receive properties of a document from another origin. As a result we can't grab data from another domain using this approach. This security feature is absolutely critical otherwise it way be way too easy to use JavaScript to do (potentially) malicious things across domains.

For this example the basic premise is the following: we want to display some data on our home page that is buried in another page elsewhere on the same site. This event will be triggered by mousing over an anchor tag. So imagine we have a file named "network.php" which includes a page element w/ ID="WiFi" and we want to grab/display the data contained in that element on our home page. The data is loaded then displayed in a hidden container when the mouseover event is triggered.

I hope this gives you a clear idea of not only how to do page scraping but also why it is a useful technique to know. The documentation in the code should make things fairly self explanatory but if you still have questions please don't hesitate to leave them in the comments.