This article introduces an example of how AJAX works in conjunction with PHP, and you can download the source program for that instance for better understanding. The functions.js in the compressed package is the AJAX core code, and all the operational effects are achieved through it. The code explained below is extracted from functions.js.
Effect 1. When the mouse is placed on a certain day, if there is a memo on the day, it will be displayed, such as:
Copy to ClipboardWhat to refer to: [www.bkjia.com]function Checkfortasks (Thedate, E) {
Find the Taskbox corresponding setting in the page to be visible
Theobject = document.getElementById ("Taskbox");
theObject.style.visibility = "visible";
Initialize the Taskbox location
var posx = 0;
var posy = 0;
Positioning the Taskbox position as 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 PHP Request page
Serverpage = "taskchecker.php?thedate=" + thedate;
Set PHP return Data replacement location
ObjID = "Taskbox";
var obj = document.getElementById (ObjID);
Send the request and load the returned 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 on a date to enter a name, the system automatically retrieves whether the name exists, and can choose to fill in the Name box,
Copy to ClipboardWhat to refer to: [www.bkjia.com]Function AutoComplete (Thevalue, E) {
Locate the location of the Autocompletediv (the label that displays the retrieved name) in the page
Theobject = document.getElementById ("Autocompletediv");
Set to visible
theObject.style.visibility = "visible";
TheObject.style.width = "152px";
Set the search label location
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";
Setting Events for keyboard entry
var Theextrachar = E.which;
if (Theextrachar = = undefined) {
Theextrachar = E.keycode;
}
Set Load Search list location
var ObjID = "Autocompletediv";
Set the PHP request page and pass the user's input name to the past (taking into account the backspace effect)
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.html www.bkjia.com true http://www.bkjia.com/PHPjc/364430.html techarticle This article introduces an example of how AJAX works in conjunction with PHP, and you can download the source program for that instance for better understanding. Functions.js in the compressed package is the AJAX core code, all the exercises ...
