INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS
Come Join Us!
Are you a
Computer / IT professional?
Join Tek-Tips now!
- Talk With Other Members
- Be Notified Of Responses
To Your Posts
- Keyword Search
- One-Click Access To Your
Favorite Forums
- Automated Signatures
On Your Posts
- Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.
Partner With Us!
"Best Of Breed" Forums Add Stickiness To Your Site
(Download This Button Today!)
Feedback
"...Your information in this site is absolutely WONDERFUL. It is the most useful site on the web to me right now. Thank You Thank You..."
Geography
Where in the world do Tek-Tips members come from?
|
AJAX with PHP backend
|
How to load a new JavaScript with AJAX and PHP
Posted: 26 Oct 06 (Edited 6 Nov 06)
|
So you want to load a new script the AJAX way?
This FAQ tells you how to do it with a PHP backend script. The backend script language doesn't really matter - this should give you the basic idea.
Here's what you have:
0) A server with a PHP
1) Some HTML formatted stuff
2) Some JavaScript in an external file you need to load with the HTML stuff
It takes a few files to spin it off. The flow goes like this:
A user clicks a link. This link fires a JavaScript. The JavaScript requests a specific file from a server side backend script. The backend script returns a string (or more). The return is splitted in to two parts. One part is the name of the external JavaScript to be loaded; another is the HTML formattet output to be inserted in your AJAX page.
This example assumes that the target of the HTML stuff is a DIV id'd 'contents'.
You need five files to complete this example
1) The base page
2) The JavaScript to be loaded
3) The AJAX handler
4) A server side backend to load the new content and -JavaScript
5) "The" new file - JavaScript filename reference AND HTML formatted return
So here's the code ...
1: "Base page" : index.html
CODE<html>
<head>
<title>AJAX - loads a new script!</title>
<script type="text/javascript" src="ajax_lib.js"></script>
<style type="text/css">
#contents {
width : 500px;
height : 100px;
border : solid 1px #000;
}
</style>
</head>
<body>
<a href="javascript:send_request('loadme.html')">Try me!</a>
<hr />
<div id="contents">
</div>
</body>
</html>
2: "JavaScript to be loaded" : new_script.js
CODEfunction hello() {
alert('Hello world');
}
3: "AJAX handler" : ajax_lib.js
CODEfunction createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
ro = new ActiveXObject("Microsoft.XMLHTTP");
else
ro = new XMLHttpRequest();
return ro;
}
function send_request(html_file_name) {
server_side_script = 'html_loader.php?filename=' + html_file_name;
http.open('get', server_side_script);
http.onreadystatechange = handle_response;
http.send(null);
}
var http = createRequestObject();
function handle_response() {
if(http.readyState == 4){
var response = http.responseText;
var parts = response.split('~');
if(parts.length>1) {
load_script(parts[0]);
document.getElementById('contents').innerHTML = parts[1];
} else {
document.getElementById('contents').innerHTML = response;
}
}
}
function load_script(filename) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = filename;
document.getElementsByTagName('head')[0].appendChild(script);
}
4: "Server side backend" - in this example a PHP script : html_loader.php
CODE<?php
$file_name = $_REQUEST["filename"];
$html_file = file($file_name);
foreach($html_file as $lineno => $line)
echo $line;
?>
5: "Formatted file - Script file name & HTML stuff" : loadme.html
CODEnew_script.js~<button onclick="hello()">Click me!</button>
Please note that in this example, the char ~ in the "Formatted file - Script file name & HTML stuff" is used to separate the script filename from the HTML formatted stuff. You may want or need to change the char ~ to something else. If you do, you need to change it i in both loadme.html and ajax_lib.js.
Happy coding
Jak b |
Back to AJAX FAQ Index
Back to AJAX Forum
|
|
 |
|
Join Tek-Tips® Today!
Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.
Here's Why Members Love Tek-Tips Forums:
Talk To Other Members- Notification Of Responses To Questions
- Favorite Forums One Click Access
- Keyword Search Of All Posts, And More...
Register now while it's still free!
Already a member? Close this window and log in.
Join Us Close
