当前位置: 首页 > 图文教程 > 网络编程 > PHP > Ajax+PHP 边学边练 之二 实例

PHP
dedecms模版制作使用方法
dede3.1分页文字采集过滤规则详说(图文教程)
dede3.1分页文字采集过滤规则详说(图文教程)续二
dede3.1分页文字采集过滤规则详说(图文教程)续四
手把手教你使用DedeCms V3的在线采集图文教程
PHP实现MVC开发得最简单的方法:模型
php下用GD生成生成缩略图的两个选择和区别
Win2003服务器安全加固设置--进一步提高服务器安全性
[php] 我的微型论坛的简单教程[已完成]
phpMyAdmin下载、安装和使用入门教程
PHP 优化配置:加速你的VBB,phpwind,Discuz,IPB,MolyX
php+mysql开源XNA 聚合程序发布 下载
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
小结下MySQL中文乱码,phpmyadmin乱码,php乱码 产生原因及其解决方法
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
[PHP]经常用到的实用函数集合
php扩展ZF:Validate扩展
php开发工具之vs2005图解
PHP 5.0创建图形的实用方法完整篇

Ajax+PHP 边学边练 之二 实例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 255 ::
收藏到网摘: n/a

本篇通过一个实例介绍Ajax与PHP结合使用的方式,可以下载该实例的源程序以便更好理解。压缩包中functions.js就是Ajax核心代码了,所有的操作效果都是通过它来实现的。下文的代码解释都是提取自functions.js。 效果1. 当鼠标放在某日上时,如果当天有备忘录,则会显示出来,如下图:
taskcheck
复制代码 代码如下:

function checkfortasks (thedate, e){
//找到页面中taskbox对应<div>设置为可见
theObject = document.getElementById("taskbox");
theObject.style.visibility = "visible";
//初始化taskbox位置
var posx = 0;
var posy = 0;
//定位taskbox位置为鼠标位置
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
theObject.style.left = posx + "px";
theObject.style.top = posy + "px";
//设置PHP请求页面
serverPage = "taskchecker.php?thedate=" + thedate;
//设置PHP返回数据替换位置
objID = "taskbox";
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);
}

效果2. 当鼠标点击某日录入姓名时,系统会自动检索姓名是否存在,并可以通过选择填入姓名框中,如图:
namecheck
复制代码 代码如下:

function autocomplete (thevalue, e){
//定位页面中autocompletediv(显示检索姓名的标签)的<div>位置
theObject = document.getElementById("autocompletediv");
//设置为可见
theObject.style.visibility = "visible";
theObject.style.width = "152px";
//设置检索标签位置
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";
//设定事件为键盘录入
var theextrachar = e.which;
if (theextrachar == undefined){
theextrachar = e.keyCode;
}
//设定加载检索名单位置
var objID = "autocompletediv";
//设定PHP请求页面,并将用户输入的姓名传值过去(同时考虑到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);
}
//发送请求并加载返回数据
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);
}

文件打包下载