Saturday, August 17, 2013

Loading website in a DIV using Ajax and PHP

Loading a website or content inside a DIV in ajax using php is common, everyone learns it when they are new to ajax. I'm also a beginner in Ajax. Let's start learning it from beginning, covering all the history of ajax as well as how to use ajax.

History:
If you want you can read the history of ajax at wikipedia: http://en.wikipedia.org/wiki/Ajax_(programming)

To run ajax you'll need a server if you own a hosting then you can use that to run the application or you can download the XAMPP local server / host.

First we'll create two files, one will be the index.html and another one will be url.php (Refer below image to understand the directory structure.)

In the inder.html file we'll add our javascript inside the head tags and we'll call that using click event.
HTML & Javascript: index.html source code.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function loader() {
var ajaxhttp;
try {
//For major browser like Chrome etc...not for IE
ajaxhttp = new XMLHttpRequest();
}catch(e1) {
try {
//For IE6 and above
ajaxhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e2) {
try {
//For IE5
ajaxhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e3) {
//If all returns an error then we'll return false!
return false;
}
}
}
ajaxhttp.onreadystatechange = function() {
if(ajaxhttp.readyState==4) { //it should be 4 or 200
document.getElementById("frame").innerHTML = ajaxhttp.responseText;
}
}
ajaxhttp.open("GET", "url.php", true);
ajaxhttp.send(null);
}
</script>
</head>
<body style="margin:0px;font-family:trebuchet Ms;">
<h2 onClick="loader()" style="background:#2C2C2C;text-align:center;color:white;padding:15px;margin:0px;">Click to load the website in a DIV!</h2>
<div id="frame"></div>
</body>
</html>

We are using try..catch construct, which is a powerful exception-handling technique that was initially implemented in OOP languages. Basically, when an error happens at run time in the JavaScript code, an exception is thrown. The exception is an object that contains the details of the error. Using the try..catch syntax, we can catch the exception and handle it locally, so that the error won't be propagated to the user's browser.

Now we'll make url.php file to send the data from the server.
PHP: url.php source code.

<?php
   $url = "http://www.thecodepress.info";
   echo file_get_contents($url);
?>

Basically the url.php file loads the content of the specified URL which is fetched from variable url.
and then we are printing the contents of the file. So when our index.html tries to get the responseText from the server, the server sends the contents of the file and that's the reason for the website to be displayed.