您的位置：首页 > 数据库 > MySQL

web编程之日程表模块（PHP+Mysql+Ajax）

2014-06-25 18:29 225 查看

web编程之日程表模块

一，AJAX基础
传统的javascript编程中，获取服务端的数据或者向服务端发送信息，必须通过使用HTML中的表单进行GET或POST的方法，返回页面数据在进行重载，非常不友好。
在AJAX模式中，步骤如下：
1）用户在web页面执行某一操作，例如点击某个连接。
2）根据用户操作，页面产生相应DHTML事件。
3）调用注册到该DHTML时间的客户端javascript事件处理函数。其中，需要创建并初始化一个用以向服务器发送异步请求的XMLHttpRequest对象，同时指定一个回调函数。当服务器端的响应返回时，自动调用该回调函数。
4）服务器收到XMLHttpRequest对象的请求后，根据请求进行一系列的的处理。
5）处理完毕，服务端向客户端返回所需数据。
6）数据到达客户端之后执行javascript回调函数，并根据返回的数据对用户显示界面进行更新。
7）用户获得自己操作所需的数据，对应看到显示界面的变化。

二，AJAX 与服务端数据库进行交互式通信

AJAX与服务端的通信通过XML来实现，XML的特性如下：
1）XML是一种标记性语言，类似HTML.
2)XML的设计宗旨是传输数据，而不是显示数据
3）XML标签没有被预定义，需要自行定义标签
例如：创建Ajax.xml ，代码如下：

<?xml version="1.0" encoding="utf8" ?>
<family>
<member>
<name>
mark
</name>
<doing>task1
</doing>
</member>
<member>
<name>
annie
</name>
<doing>task2
</doing>
</member>
<member>
<name>
nathan
</name>
<doing>task3
</doing>
</member>
<member>
<name>
chris
</name>
<doing>task4
</doing>
</member>
</family>

接下来就是创建一个Ajaxdemo.html 用来读取和处理以上xml文档的数据，代码如下：

<html>
<head>
<title>sspku</title>
<script language="javascript">
function GetXmlHttpObject()
{
xmlHttp=null;
try{
xmlHttp = new XMLHttpRequest();  //Firefox,Opera,Safari浏览器

}
catch(){
try{
xmlHttp = new ActiveObject("Msxm12.XMLHTTP")     //IE6.0+浏览器

}
catch()
{
try{
xmlHttp=new ActiveObject("Microsoft.XMIHTTP")  //IE6.0-

}
catch(){
alert("对不起，您的浏览器不支持AJAX");
return  false;
}
}
}
return xmlHttp;
}

//状态改变
function state_Changed()
{
if（xmlHttp.readyState!=4） return;
if(xmlHttp.status!=200)
{
alert("加载XML文件失败");
return;
}
txt="<table border='1'>";
x=xmlHttp.responseXML.documentElement.getElementsByTagName("member");
for(i=0;i<x.length;i++)
{
txt=txt+"<tr>";
xx=x[i].getElementsByTagName('name');    //传回名称为name的元素集合
{
try
{
txt=txt+"<td>"+xx[0].firstChild.nodeValue+"</td>";

}
catch
{
txt=txt+"<td></td>";

}

txt=txt+"</tr>";
}

}
txt=txt+"</table>";
document.getElementById("name").innerHTML=txt;
}

function showXML(url)
{
xmlHTTP=GetXmlHttpObject();
if(xmlHTTP!=null)
{
xmlHTTP.onreadystatechange=state_Changed();
xmlHTTP.open("GET",url,true);
xmlHTTP.send(null);
}
}
</script>
</head>

<body>
<span id ="name"></span>
<input type="button" value="显示xml" onclick="showXML('Ajax.xml')"/>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航