[转]献给初学 Ajax 的 PHPer --Ajax 技术及其简单应用

来源：互联网发布：本乎数的意思编辑：程序博客网时间：2024/05/29 14:17

[转]献给初学 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对象。

例：

复制内容到剪贴板

代码:


<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对象的方法，一种为IE浏览器创建方法，另一种为其它浏览器创建方法(如现在流行的Firefox和小巧的Opera)。alert()是测试是否创建成功用的，大家可以把上面代码拷到本地，去掉注释测试一下。

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)

复制内容到剪贴板

代码:


<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>

(me.php)

复制内容到剪贴板

代码:


<?php
sleep(1);   //(程序延迟1秒执行) 测试用……
$love=$_GET["love"];
echo "You love : ".$love;
?>

讲解：首先看index.html 从<script/>标签中的内容开始：

  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)

复制内容到剪贴板

代码:


<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>

(me.xml)

复制内容到剪贴板

代码:


<?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，大功告成了，我的这篇教程也就写到这了。只要能给您一点点帮助就是我最大的满足……