Ajax & PHP Learning and Practicing Part 2 Example_PHP Tutorial

This article introduces the use of Ajax and PHP through an example. You can download the source program of this example for better understanding. The functions.js in the compressed package is the Ajax core code, and all operating effects are achieved through it. The code explanations below are all extracted from functions.js.

Effect 1. When the mouse is placed on a certain day, if there are memos on that day, it will be displayed, as shown below:

Copy to ClipboardQuoted content: [www.bkjia.com] function checkfortasks (thedate, e){
//Find the taskbox corresponding to the

in the page and set it to be visible
theObject = document.getElementById("taskbox");
theObject.style.visibility = "visible ";
//Initialize the taskbox position
var posx = 0;
var posy = 0;
//Position the taskbox position to the mouse position
posx = e.clientX + document.body. scrollLeft;
posy = e.clientY + document.body.scrollTop;
theObject.style.left = posx + "px";
theObject.style.top = posy + "px";
//Set the PHP request page
serverPage = "Ajax & PHP Learning and Practicing Part 2 Example_PHP Tutorialer.php?thedate=" + thedate;
//Set the PHP return data replacement location
objID = "taskbox";
var obj = document. getElementById(objID);
//Send a request and load the return data
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState = = 4 && xmlhttp.status == 200){
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}

Effect 2. When the mouse clicks to enter a name on a certain day, the system will automatically search whether the name exists, and can be filled in the name box by selection, as shown in the figure:

Copy to ClipboardQuoted content: [www.bkjia.com] function autocomplete (thevalue, e){
//Locate the

position of the autocompletediv (the label that displays the retrieved name) in the page
theObject = document.getElementById("autocompletediv");
//Set To be visible
theObject.style.visibility = "visible";
theObject.style.width = "152px";
//Set the retrieval tag position
var posx = 0;
var posy = 0;

posx = (findPosX (document.getElementById("yourname")) + 1);
posy = (findPosY (document.getElementById("yourname")) + 23);

theObject.style.left = posx + "px";
theObject.style.top = posy + "px";
//Set the event to keyboard input
var theextrachar = e. which;

if (theextrachar == undefined){
theextrachar = e.keyCode;
}
//Set the location to load the search list
var objID = "autocompletediv";

//Set the PHP request page and pass the name entered by the user (taking into account the Backspace function)
if (theextrachar == 8){
if (thevalue.length = = 1){
var serverPage = "autocomp.php";
}
else{
var serverPage = "autocomp.php" + "?sstring=" + thevalue.substr(0, ( thevalue.length -1));
}
}
else{
var serverPage = "autocomp.php" + "?sstring=" + thevalue + String.fromCharCode(theextrachar);
}
//Send the request and load the returned data
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}

Source code download: Sample3.rar

http://www.bkjia.com/PHPjc/364430.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/364430.htmlTechArticleThis article introduces the use of Ajax and PHP through an example. You can download the source program of this example for better understanding. understand. functions.js in the compressed package is the Ajax core code, all operations...