The above area is populated by the contents of files in the same directory as this .php file.
After you select a file in the above form, a request to the JavaScript getPages() defined in
internal_request.js. The getPages() method creates a XMLHttpRequest
object requesting data from the URL ./internal_request.php?action=get_page&id={selected_item} and
registers the callback function handlePages() to deal with the response.
internal_request.php used the PHP method file_get_contents() to get the contents of the
selected file and simply prints the contents to the response.
The handlePages() method gets the response text and changes the contents of the "page_cage" div to hold the file contents.
/* The following function creates an XMLHttpRequest object... */
function createRequestObject(){
var request_o; //declare the variable to hold the object.
var browser = navigator.appName; //find the browser name
if(browser == "Microsoft Internet Explorer"){
/* Create the object using MSIE's method */
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
/* Create the object using other browser's method */
request_o = new XMLHttpRequest();
}
return request_o; //return the object
}
/* You can get more specific with version information by using
parseInt(navigator.appVersion)
Which will extract an integer value containing the version
of the browser being used.
*/
/* The variable http will hold our new XMLHttpRequest object. */
var http = createRequestObject();
/* Function called to get the page contents */
function getPage(){
/* Create the request. The first argument to the open function is the method (POST/GET),
and the second argument is the url...
document contains references to all items on the page
We can reference document.form_page_select.select_page_select and we will
be referencing the dropdown list. The selectedIndex property will give us the
index of the selected item.
*/
http.open('get', 'internal_request.php?action=get_page&id='
+ document.form_page_select.select_page_select.selectedIndex);
/* Define a function to call once a response has been received. This will be our
handleProductCategories function that we define below. */
http.onreadystatechange = handlePages;
/* Send the data. We use something other than null when we are sending using the POST method. */
http.send(null);
}
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handlePages(){
/* Make sure that the transaction has finished. The XMLHttpRequest object
has a property called readyState with several states:
0: Uninitialized
1: Loading
2: Loaded
3: Interactive
4: Finished */
if(http.readyState == 4){ //Finished loading the response
/* We have got the response from the server-side script,
let's see just what it was. using the responseText property of
the XMLHttpRequest object. */
var response = http.responseText;
/* And now we want to change the page_cage <div> content.
we do this using an ability to get/change the content of a page element
that we can find: innerHTML. */
document.getElementById('page_cage').innerHTML = response;
printHtmlResponse(http);
}
}
function printHtmlResponse(http)
{
var response = http.responseText;
document.getElementById('page_cage').innerHTML = response;
}
<?php
/* You should implement error checking, but for simplicity, we avoid it here */
if($_GET['action'] == 'get_page')
{
/* Were here to get the product listing...
You can obviously change this file to include many
different actions based on the request.
*/
switch($_GET['id']){
/* We had the following in our list.
1 file1.html
2 file2.html
3 file3.html
The integer value on the left is the value
corresponding to the javascript selectedIndex
property.*/
case 1:
/* Print HTML to fill the page_cage <div>
Any output to the browser will be
retrieved in the XMLHttpRequest object
responseText property */
$contents = file_get_contents ( "file1.html" );
echo "$contents";
break;
case 2:
$contents = file_get_contents ( "file2.html" );
echo "$contents";
break;
case 3:
$contents = file_get_contents ( "file3.html" );
echo "$contents";
break;
default:
echo '<b>You didn\'t select an item from above!</b>';
break;
}
}
?>
<h3>File 1</h3>
<ul>
<li>I'm file 1</li>
</ul>
<h1>File 2</h1>
<dl>
<dt>File name:</dt>
<dd>I'm file 2</dd>
</dl>
<h4>File 3</h4>
<ol>
<li>I'm file 3</li>
</ol>