Introduction
I recently had a requirement to grab HTML fragments from pages on one website and include them in some pages on another website. I was unable to do this by making either site an ASP.NET web project as our content management system requires that both source and target pages have to remain as HTML files and can not be included in ASP.NET web projects. Both websites are under my control, so I have full access to them, but they are on different domains.
I was fairly sure I could do this using AJAX, so I did a bit of research. I am inherently lazy, so I did not want to write my own XMLHTTPRequest code when I could get nice simple Open Source code to do the work for me. After a bit of searching and reading, I chose the Prototype Framework as it looked easy to use and has good documentation and examples. It also seems quite popular and has an active community, so help is available if needed.
Cross Domain Issue
My first issue was cross domain access to pages. If I try to read files from a different domain, most browsers will see this as a security breach and complain with a popup (at least), or refuse to load the page. As I have full control over both domains, the easiest solution was to upload the source pages to the domain I need to call them from. Both websites have staging sites on my internal server, and both have an automatic upload to the live server once an hour. This is plenty for my needs, so I just created another upload job that transfers the source pages to the second domain if they have been modified.
Great, now I have the pages where I need them, and no more cross domain calls. Next step, get the fragments of HTML out of the source pages.
The ASP.NET Project
This is where the ASP.NET project comes in. (I am indebted to Christian Graus for his help with this part of the process). While I could not turn the whole site into an ASP.NET project, I could include an ASP.NET project as an application in a sub directory. The content authors won’t be making any alterations to any files in the project, and when I compile and publish the project, VS can overwrite the sub directory without affecting the rest of the site. All I needed to do was create an empty ASPX file for each HTML source page. The ASPX page just needs the @Page directive and the CodeFile and Inherits attributes. Delete everything else (including the <html>, <head>, and <body> tags).
<%@ Page Language="VB" AutoEventWireup="false"
CodeFile="Test.aspx.vb" Inherits="Test" %>
Then, in the OnPageLoad event in the code-behind, some code that reads the source page grabs the required html and outputs it using Response.Writes. The trick is to add a Response.End at the end of the code so that you don’t get anything returned other than the HTML fragment required. In order to identify the fragments needed, I used a couple of named anchors to mark the start and end points in the HTML (<a id=”TheStart”></a> and <a id=”TheEnd”></a>). In order to make my life easier, I wrote a simple class that contains all of the page names and paths to the source pages, and some generic code that grabs all content between the start tag and the end tag. It also rebases any image tags or relative hyperlinks back to the original domain so that they still work in the new page.
A sample project is available as a download at the top of this article. I have used VB.NET, but the language is irrelevant - the AJAX code just sees the HTML fragment.
The AJAX Stuff
Beautiful, now I have the fragment(s) I need, and all I have to do is get them into the page. It turns out that this is the easiest step. I wrote a small fragment of JavaScript and saved it in my Scripts directory as “GetTheFrag.js”. The prototype has a method called Ajax.Updater that takes an element ID – to put the returned content in, and a URL – to get the content from. So, my code turned out to be:
function getAspx(url,placeHolderID){
new Ajax.Updater({success:placeHolderID},url,{
evalScripts: true
});
}
For a full understanding of the above code, please read the Prototype documentation.
The Client Stuff
The final step is to include the Prototype Framework (which is just a JavaScript file) and the “GetTheFrag.js” file on the target page, and then to add a call in the window.onload event passing in the URL of the source page and the ID of a <div> tag where the HTML fragment is to be placed. All this is about 7 lines in the page head tag.
<script type="text/javascript" src="../Scripts/Prototype.js"></script>
<script type="text/javascript" src="../Scripts/GetThePage.js"></script>
<script type="text/javascript">
window.onload=function(){
getAspx('http://TheDomain/TheSourcePage.aspx','TheContainerDiv');
}
</script>
The Solution
The structure of my target website now looks like this:
Root
FolderOne (A Content Folder)
TargetPageOne.html
FolderTwo (Another Content Folder)
TargetPageTwo.html
Frags (Source Pages)
SourcePageOne.html
SourcePageTwo.html
Online (ASP.netProject)
FragmentPageOne.aspx
FragmentPageTwo.aspx
(Rest of project files)
Scripts (theScripts repository)
Prototype.js (the framework)
GetTheFrag.js
I have imported source pages from my other domain, target pages with my new, minimal AJAX code, an ASP.NET project, and two JavaScript files – the Prototype Framework and my small GetTheFrag file. (I omitted other script pages and CSS files et al for simplicity).
Points of Interest
You will notice that the source files are outside of the ASP.NET project. ASP.NET is quite happy to work with files that are in a folder outside of the project. Just get the virtual paths right, and away you you. In my case, it is simply a single ../. I have placed them all in a single "Frags" directory for simplicity.
I can not include a link to a working copy of the source or target websites as they currently only exist on our development server and are not live yet. When they are live, I will come back and update this article with links.
Prototype is an Open Source JavaScript AJAX Framework developed by Sam Stephenson and the Prototype Core Team. The Prototype AJAX framework is available from http://www.prototypejs.org/.
Disclaimer
I have no association with the Prototype Core Team. I don't know anyone on the team, or even anyone who knows anyone on the team.
