Ajax+PHP learning while practicing two examples

  • 2020-03-31 19:23:41
  • OfStack

Effect 1. When the mouse is placed on a certain day, if there is a memo on that day, it will be displayed as follows:
(link: https://www.jb51.net/upload/2009-11/20091124221629523.png)
 
function checkfortasks (thedate, e){ 
//Find the taskbox correspondence in the page <Div> Set it to visible
theObject = document.getElementById("taskbox"); 
theObject.style.visibility = "visible"; 
//Initialize the taskbox location
var posx = 0; 
var posy = 0; 
//Locate 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 up the PHP request page
serverPage = "taskchecker.php?thedate=" + thedate; 
//Set the 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 certain day to enter the name, the system will automatically retrieve whether the name exists or not, and can fill in the name box by selecting, as shown in the figure:
(link: https://www.jb51.net/upload/2009-11/20091124221629982.png)
 
function autocomplete (thevalue, e){ 
//Locate the autocompletediv in the page <Div> location
theObject = document.getElementById("autocompletediv"); 
//Set it to visible
theObject.style.visibility = "visible"; 
theObject.style.width = "152px"; 
//Sets the retrieval 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"; 
//Set the event for keyboard entry
var theextrachar = e.which; 

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

//Set the PHP request page and pass the name entered by the user (also considering the role of Backspace)
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); 
} 

(link: http://xiazai.jb51.net/200911/yuanma/php_ajax_Sample3.rar)

Related articles: