Our PHP file
<?php
$text="<hr align='left'>".date("m:i:s ").$_REQUEST['text'];
$handle = fopen("wall.txt", "a");
fwrite($handle,$text);
fclose($handle);
echo $text;
?>
The first line: $text="<hr align='left'>".date("m:i:s ").$_REQUEST['text'];
just appends an HR element, followed by date and the text you entered in the textbox from the main page.
The next functions will append [add to the end of wall.txt]
$handle = fopen("wall.txt", "a");
fwrite($handle,$text);
fclose($handle);
Then finally the script will spit out the
processed text
echo $text;
which is picked by the same ajax that called it and appended to the begining of the "display" div used in the main page.
index.html
<title>Profile Wall</title>
<script>
function ajaxRequest() {
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i=0; i<activexmodes.length; i++){try{return new ActiveXObject(activexmodes[i])} catch(e){alert("Failed");}}
} else if (window.XMLHttpRequest) {return new XMLHttpRequest()} else {return false}
return;
}
function download(url) {
var mygetrequest=new ajaxRequest();
url+="?&"+new Date().getTime();
mygetrequest.onreadystatechange=function(){
if (mygetrequest.readyState==4){
if (mygetrequest.status==200) {document.getElementById('display').innerHTML=mygetrequest.responseText;}
else {
//alert("Download was not successful");
}
}
}
mygetrequest.open("POST", url, true);
mygetrequest.send(null);
}
function post2(url,flag) {
var mygetrequest=new ajaxRequest();
url+="&"+new Date().getTime();
mygetrequest.onreadystatechange=function(){
if (mygetrequest.readyState==4){
if (mygetrequest.status==200) {
var d=document.getElementById('display');
d.innerHTML=mygetrequest.responseText+d.innerHTML;
document.getElementById('textbox').value="";
}
else {
alert("Connection failed.");
}
}
}
mygetrequest.open("POST", url, true);
mygetrequest.send(null);
}
function post(text) {
if(text.value=="") {return;}
post2("post.php?text="+text.value);
}
</script>
<style>
input.text {width:200px;}
hr {width:200px;text-align:left;}
</style>
<body onload="download('wall.txt');">
Type Text Here and press enter:<br>
<input class="text" id="textbox" type="text" style="wdith:200px" onkeypress="if(event.keyCode==13) {post(this);}">
<div id="display"></div>
</body>
I have already done justice to most of the functions in this in my ajax thread which i mentioned above.
I will only explain the necessary functions.
When the page loads, it will call the download function which will dump the entire wall.txt into the display div object.
if (mygetrequest.status==200) {document.getElementById('display').innerHTML=mygetrequest.responseText;}
When u type into the textbox and press enter - it will detect this and call the post function
function post(text) {
if(text.value=="") {return;}
post2("post.php?text="+text.value);
}
The post function evaluates if you have actually entered any data - if not it exits.
If you have entered data - it calls the post2 function and passes a url like post2.php?text=yo!
post2.php will append it and post back the processed data as reponseText which is now added to the already growing list.
document.getElementById is used to access elements that you have assigned ID for earlier.
innerHTML is used to manipulate the html content being displayed by an object.
![Nairaland [Nigerian Forum] Home](http://www.nairaland.com/Themes/default/images/english/home.gif)
Author
