[转]献给初学 Ajax 的 PHPer --Ajax 技术及其简单应用
[转]献给初学 Ajax 的 PHPer --Ajax 技术及其简单应用
作者：dx_andy
原帖地址： http://www.phpchina.com/bbs/viewthread.php?tid=42820&extra=page%3D1%26amp%3Bfilter%3Ddigest%26amp%3Borderby%3Ddateline%26amp%3Bascdesc%3DDESC
开场白：最近一直忙于个人网站的开发，来PHPCHINA的时间少了，消失这么久不知大家有没有把我淡忘。昨天翻看论坛帖子的时候无意中发现自己得奖了，兴奋的不得了……非常感谢PHPCHINA和PHPer们对我的赞同。第二天下午(07 10.9)，随手写了此篇文章，带去了我的谢意，希望能给大家一点小小的帮助。（花了半天时间呀，大家看看吧，由于现在学校网络整修，只能来网吧传文章，还望谅解！！）
好了，切入话题：
下面我来简要介绍一下Ajax技术及其简单的应用。
注：理论知识主要来自《Ajax编程技术与实例》一书。所有代码均在：IE 6.0 , Firefox , Opera9.0下测试通过。
什么是Ajax：Ajax（Asynchronous Javascrpt And Xml）是一种运用于浏览器的技术，它可以在浏览器与服务器之间使用异步通信机制进行数据通信，从而允许浏览器向服务器获取少量信息而不是刷新整个页面。Ajax并不是一种新的技术，或者说它不是一种技术，它只是多种技术的综合：Javascript、Html、Css、Dom、Xml、XMLHttpRequest等技术按照一定的方式在协作中发挥各自的作用就构成了Ajax。
Javascript,Html,Css这些都是一个WEB编程人员必备的知识，这里就不再介绍了，下面着重介绍一下XMLHttpRequest。可以说XMLHttpRequest是Ajax技术的一个核心，没有它Ajax无从运作。
XMLHttpRequest：XMLHttpRequest是XMLHttp组件的一个对象，使用XMLHttpRequest可以实现浏览器端与服务器端进行异步通信。通过HttpRequest对象，Web应用程序无需刷新页面就可以向服务器提交信息，然后得到服务器端的返回信息。
如何使用XMLHttpRequest对象：使用XMLHttpRequest首先要先创建XMLHttpRequest对象。
例：
XMLHttpRequest的属性：(常用的属性)
(1). readyState：返回当前XMLHttp请求的状态，有5种：
状态：0 ：请求未初始化；
状态：1 ：请求已经建立；
状态：2 ：请求已经发送；
状态：3 ：请求处理中；
状态：4 ：响应已经完成。
(2). onreadystatechange：readyState状态改变的事件触发器，用来指定当readyState发生变化时的处理事件。
(3). responseText：将响应信息以字符串的形式返回。
(4). responseXML：将响应信息格式化为XML文档的形式返回。
(5). status：当前Http请求的状态，下面列几个重要的，经常用到的状态。
状态值：200 ：交易成功；
状态值：404 ：没有发现文件、查询或URI；
状态值：500 ：服务器产生内部的错误；
XMLHttpRequest的方法：(常用的方法)
(1). open(string method,string url,boolean asynch,string username,string password)方法将创建一个新的Http请求。
method（请求方法）：GET,POST和PUT(一般不用);
url为：请求的地址
asynch：可选参数，用来指定此请求是同步还是异步方式，默认为trun(异步)；
username,password：可选参数，服务器需要验证时用的，一般不用（插一句：俺没用过，嘿嘿……)。
(2). send(content)方法用来向服务器发送具体的请求,如果没有内容要发送，content省略或为null。
介绍了这么多了，有人一定会说有用吗?到底Ajax怎么用？这才是我们最关心的一件事？
往下看 ↓↓↓
对了，容我再说一句费话：一个不懂上面内容的程序员说自己是一个Ajax高手无异于打肿了脸充胖子。
我希望，大家在理解上面内容的情况下再看下面2个实例：
一. reponseText：得到服务器返回信息(Ajax+Php)（先贴代码再详细讲解）:
(index.html)
1. createXmlHttp()：创建XMLHttpRequest对象，前面已经介绍了这个函数这里不再多说。只让大家注意这里的xmlHttp变量为一个全局变里。
2. call_back()：得到我们的表单数据，整理所要提交的url变量。然后将url交给sendAjax()来处理。
3. sendAjax()：首先创建XMLHttpRequest对象，然后以GET方法，异步方式(true)打开请求，目标地址为call_back()处理过的url。刚才说到onreadstatechange是readyState状态改变的事件触发器，意思大概可以理解为用它来驱动readyState，通过判断readyState的返回值和status的返回值来决定我们如何操作（参照process()函数）
4. process()：readyState=4 响应已经完成,status=200 交易成功。
5. me.php：不是一般的简单，不再讲解。
然后说一下：<form/>标签。这里主要说一点： "提交" 标签，这里的type="button"，可不要写成 submit。submit代表提交表单，肯定会刷新页面的，那样就体现不出Ajax效果了……
reponseXML：XML文档的形式(Ajax+Xml) （先帖代码再详细讲解）：
(index.html)
原帖地址： http://www.phpchina.com/bbs/viewthread.php?tid=42820&extra=page%3D1%26amp%3Bfilter%3Ddigest%26amp%3Borderby%3Ddateline%26amp%3Bascdesc%3DDESC
开场白：最近一直忙于个人网站的开发，来PHPCHINA的时间少了，消失这么久不知大家有没有把我淡忘。昨天翻看论坛帖子的时候无意中发现自己得奖了，兴奋的不得了……非常感谢PHPCHINA和PHPer们对我的赞同。第二天下午(07 10.9)，随手写了此篇文章，带去了我的谢意，希望能给大家一点小小的帮助。（花了半天时间呀，大家看看吧，由于现在学校网络整修，只能来网吧传文章，还望谅解！！）
好了，切入话题：
下面我来简要介绍一下Ajax技术及其简单的应用。
注：理论知识主要来自《Ajax编程技术与实例》一书。所有代码均在：IE 6.0 , Firefox , Opera9.0下测试通过。
什么是Ajax：Ajax（Asynchronous Javascrpt And Xml）是一种运用于浏览器的技术，它可以在浏览器与服务器之间使用异步通信机制进行数据通信，从而允许浏览器向服务器获取少量信息而不是刷新整个页面。Ajax并不是一种新的技术，或者说它不是一种技术，它只是多种技术的综合：Javascript、Html、Css、Dom、Xml、XMLHttpRequest等技术按照一定的方式在协作中发挥各自的作用就构成了Ajax。
Javascript,Html,Css这些都是一个WEB编程人员必备的知识，这里就不再介绍了，下面着重介绍一下XMLHttpRequest。可以说XMLHttpRequest是Ajax技术的一个核心，没有它Ajax无从运作。
XMLHttpRequest：XMLHttpRequest是XMLHttp组件的一个对象，使用XMLHttpRequest可以实现浏览器端与服务器端进行异步通信。通过HttpRequest对象，Web应用程序无需刷新页面就可以向服务器提交信息，然后得到服务器端的返回信息。
如何使用XMLHttpRequest对象：使用XMLHttpRequest首先要先创建XMLHttpRequest对象。
例：
复制内容到剪贴板
上面是在不同主流浏览器中创建XMLHttpRequest对象的方法，一种为IE浏览器创建方法，另一种为其它浏览器创建方法(如现在流行的Firefox和小巧的Opera)。alert()是测试是否创建成功用的，大家可以把上面代码拷到本地，去掉注释测试一下。
代码:
<script type="text/javascript">
function createXmlHttp(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
//alert("IE XmlHttp");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
//alert("Other XmlHttp");
}
}
</script>XMLHttpRequest的属性：(常用的属性)
(1). readyState：返回当前XMLHttp请求的状态，有5种：
状态：0 ：请求未初始化；
状态：1 ：请求已经建立；
状态：2 ：请求已经发送；
状态：3 ：请求处理中；
状态：4 ：响应已经完成。
(2). onreadystatechange：readyState状态改变的事件触发器，用来指定当readyState发生变化时的处理事件。
(3). responseText：将响应信息以字符串的形式返回。
(4). responseXML：将响应信息格式化为XML文档的形式返回。
(5). status：当前Http请求的状态，下面列几个重要的，经常用到的状态。
状态值：200 ：交易成功；
状态值：404 ：没有发现文件、查询或URI；
状态值：500 ：服务器产生内部的错误；
XMLHttpRequest的方法：(常用的方法)
(1). open(string method,string url,boolean asynch,string username,string password)方法将创建一个新的Http请求。
method（请求方法）：GET,POST和PUT(一般不用);
url为：请求的地址
asynch：可选参数，用来指定此请求是同步还是异步方式，默认为trun(异步)；
username,password：可选参数，服务器需要验证时用的，一般不用（插一句：俺没用过，嘿嘿……)。
(2). send(content)方法用来向服务器发送具体的请求,如果没有内容要发送，content省略或为null。
介绍了这么多了，有人一定会说有用吗?到底Ajax怎么用？这才是我们最关心的一件事？
往下看 ↓↓↓
对了，容我再说一句费话：一个不懂上面内容的程序员说自己是一个Ajax高手无异于打肿了脸充胖子。
我希望，大家在理解上面内容的情况下再看下面2个实例：
一. reponseText：得到服务器返回信息(Ajax+Php)（先贴代码再详细讲解）:
(index.html)
复制内容到剪贴板
(me.php)
代码:
<html>
<head>
<title>HPLamp站 Ajax讲解 - www.phplamp.com - </title>
<script type="text/javascript">
function createXmlHttp(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function sendAjax(strUrl){
createXmlHttp();
xmlHttp.open("GET",strUrl,true);
xmlHttp.onreadystatechange=process;
xmlHttp.send(null);
}
function process(){
if (xmlHttp.readyState==4){
if(xmlHttp.status==200){
alert(xmlHttp.responseText);
}
}
}
function call_back(){
var love=document.getElementById("love").value;
var url="me.php?love="+love;
sendAjax(url);
}
</script>
</head>
<body>
<center>
<form name="f1">
爱好：<input type="text" name="love" id="love" />
<input type="button" name="submit" value="提交" onClick="call_back()" />
</form>
</center>
</body>
</html>
复制内容到剪贴板
讲解：首先看index.html 从<script/>标签中的内容开始：
代码:
<?php
sleep(1); //(程序延迟1秒执行) 测试用……
$love=$_GET["love"];
echo "You love : ".$love;
?>1. createXmlHttp()：创建XMLHttpRequest对象，前面已经介绍了这个函数这里不再多说。只让大家注意这里的xmlHttp变量为一个全局变里。
2. call_back()：得到我们的表单数据，整理所要提交的url变量。然后将url交给sendAjax()来处理。
3. sendAjax()：首先创建XMLHttpRequest对象，然后以GET方法，异步方式(true)打开请求，目标地址为call_back()处理过的url。刚才说到onreadstatechange是readyState状态改变的事件触发器，意思大概可以理解为用它来驱动readyState，通过判断readyState的返回值和status的返回值来决定我们如何操作（参照process()函数）
4. process()：readyState=4 响应已经完成,status=200 交易成功。
5. me.php：不是一般的简单，不再讲解。
然后说一下：<form/>标签。这里主要说一点： "提交" 标签，这里的type="button"，可不要写成 submit。submit代表提交表单，肯定会刷新页面的，那样就体现不出Ajax效果了……
reponseXML：XML文档的形式(Ajax+Xml) （先帖代码再详细讲解）：
(index.html)
复制内容到剪贴板
(me.xml)
代码:
<html>
<head>
<title>HPLamp站 Ajax讲解 - www.phplamp.com - </title>
<script type="text/javascript">
function createXmlHttp(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function sendAjax(){
createXmlHttp();
xmlHttp.open("GET","me.xml",true);
xmlHttp.onreadystatechange=process;
xmlHttp.send(null);
}
function process(){
if (xmlHttp.readyState==4){
if(xmlHttp.status==200){
listLove(xmlHttp.responseXML);
}
}
}
function listLove(obj){
var loveNode=obj.getElementsByTagName("lovelist")[0];
var love=loveNode.getElementsByTagName("love");
var con='<table width="100" border="1">';
for(i=0;i<love.length;i++){
lv=love.childNodes[0].nodeValue;
con+="<tr><td>"+lv+"</td></tr>";
}
con+="</table>";
document.getElementById("love").innerHTML=con;
}
</script>
</head>
<body>
点击按钮查看本站收藏网友爱好：
<input type="button" onclick="sendAjax();" value="点击查看">
<div id="love"></div>
</body>
</html>
复制内容到剪贴板
代码:
<?xml version="1.0" encoding="UTF-8"?>
<lovelist>
<love>hp</love>
<love>Asp</love>
<love>Jsp</love>
</lovelist>
讲解：首先看index.html
1.前面已经讲过createXmlHttp(),sendAjax(),process()这里就不再费话。
2.这个实例多了一个函数lovelist()：主要是用来处理reponseXML返回的object的。process()中与上例唯一不同的是：listLove(xmlHttp.responseXML)。xmlHttp.responseXML不用说是将服务器返回的信息格式化为XML文档。
关于解析这个XML文档主要是交给listLove()函数来处理。
下面认真看一下listLove()函数。这是一个有参数的函数，它传递的参数为xmlHttp.responseXML的返回对象。
loveNode=obj.getElementsByTagName("lovelist")[0]先将XML文件中最外层的TAG解析出来，它的值是一个外层TAG的object。
love=loveNode.getElementsByTagName("love")。然后由刚才解析出来的loveNode来解析它所包含的节点。
for(i=0;i<love.length;i++){
lv=love.childNodes[0].nodeValue;
con+="<tr><td>"+lv+"</td></tr>";
}
然后再解析每个节点，得到其中的value。赋值给lv变量，然后再保存在正在格式化中的con变量。
document.getElementById("love").innerHTML=con;将id为love的标签填充HTML代码，即con变量的值……
3.关于xml文件，如果大家看不懂这个xml文件，建议到网上找些资料，很好懂的，要我讲我也无从讲起，这里就不说了。
OK，大功告成了，我的这篇教程也就写到这了。只要能给您一点点帮助就是我最大的满足……