As traditional HTML frames have fallen out of favor, HTML5 no longer supports them, and iframes are now limited to URL usage, the Div element has stepped up to take on this important role.
DIV+CSS layout is indeed very satisfying for page structuring and is also more convenient to use.
Today, I suddenly encountered a problem: I needed to import another page and display it inside a Div on the current page.
Of course, I could use an iFrame or something similar, but that’s not the approach I wanted.
After searching online for a while, I found many methods, but none were quite satisfactory, mostly because they relied on jQuery.
I’ll provide the jQuery implementation later in this post.
Moreover, the page I need to import includes special effects, not just plain data. For example, all the page styles must be preserved!
What I want to show you is how to achieve this using Ajax. As you all know, Ajax can update data asynchronously at any time without refreshing the page, and its capabilities are very powerful.
And in the future of HTML5, Ajax will receive even better support.
Below, I’ll teach you how to quickly achieve this goal using Ajax:
Using vanilla Ajax, it only takes two steps:
1: Download the Ajax JS file: Ajax Package Download
2: Import the JS file into your page <script type="text/javascript" src="ajaxrequest.js"></script>
Done. You’ve successfully stepped through the gateway of Ajax.
Now let’s complete the task:
Details: Apache / Ajax / JS
Add a target element in the page: for example <div id="des"></div>
Alright, the entire code of another page will be imported into this div named “des” shortly. We want to import the page abc.html. // This is great for designing template pages.
Now add the JS code:
<script type="text/javascript">
var ajaxobj=new AJAXRequest; // Create an AJAX object, the class is defined in the file we just imported.
ajaxobj.method="GET"; // Set the request method to GET
ajaxobj.url="templat/main.html" // The target URL. This can be changed to a dynamic processing page later. As Ajax users know, this allows you to return different data based on the purpose.
// Set the callback function to output the response content. Because it’s a static page (that was my requirement), all the content comes over.
ajaxobj.callback=function(xmlobj) {
document.getElementById('des).innerHTML = xmlobj.responseText; // Pay close attention to this line.
}
ajaxobj.send(); // Send the request
</script>
And that’s it, the goal is achieved. The page is fully loaded, right? Right-click and view the source code; the URL for abc.html is well hidden, and even the text is concealed. It’s magical, hoho.
Using this to develop templates turns it into a single URL, not even a question mark is visible. One word: Awesome!
And the styles are all preset as intended. You can also wrap the JS in a function like function aa{} and trigger it freely with onload(javascript:aa()).
A final note: Ajax still needs some browser detection. This guide is for the fastest way to get started. I’ve tested it in Firefox and everything worked fine. IE might have some minor issues with styles, but as the door is now open,
you’ll pick up the rest in no time, right?
Loading with jQuery:
Method 1: First, include the jQuery JS file: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
For more on jQuery’s internal principles, see this great post: http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html
Import the JS and add the code, just write a JS function (since both jQuery and Ajax are developed in JS):
<script language="javascript" type="text/javascript">
<!–
function jump(){
$("#mainBody").load("./templat/main.html",function(){ $("#mainBody").fadeIn(100);}
);
–>
</script>
Just add onclick="jump();" to the element you want to trigger the action. I found this method has slightly better browser support.
For more on the load method, see the full documentation: http://www.cnblogs.com/mslove/archive/2009/05/07/1452098.html
Method 2: This method uses jQuery’s ajax function.
var parames={
"type1":"paramer1","type2":"paramer2"};
$.ajax({
url:'myTest.php',
type:'post',
dataType:'html',
data:parames,
error: function(){alert('error');},
success:function(data){
$("#myDiv").html(data);
}
});
This method works too. Feel free to use whichever you prefer, haha.