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

开场白：最近一直忙于个人网站的开发，来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()是测试是否创建成功用的，大家可以把上面代码拷到本地，去掉注释测试一下。

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) 讲解：首先看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) (me.xml) 讲解：首先看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，大功告成了，我的这篇教程也就写到这了。只要能给您一点点帮助就是我最大的满足……

欢迎回复本帖 ^-^ !!! 注：回帖无奖~!  祝：大家看的开心，学着舒心～！　ByeBye……

     By dx_andy

[ 本帖最后由 dx_andy 于 2007-11-10 14:22 编辑 ]

支持一个，刚开始学ajax

精华了，嘿嘿，顶一下！

我 之前也有学了点

基本上会用ajax验证

是使用文本的，好像用xml意义也不大？

当你要传送大量数据的时候就要用到XML了，现在我也不怎么用XML，或者可以说我不用AJAX，打算在自己网站的第四版中加入Ajax，毕竟是时髦的话题！

学习了.

很不错!!支持
最近刚要学习AJAX~~

不支持中文！

Thanks very much!

太好了！！

太好了！！

ajax 正在学习ing！

顶下

学习了~

支持呀!~太谢谢了
呵呵

应鼓励原创精品！

谢了

强赞一个~~~!

切实很不错的一篇文章。

精�A阿><~
感�x分享><~
正要�_始�Wajax呢~ 希望不��太慢

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

网上贴的这段代码里有误。lv=love.childNodes[0].nodeValue;
本想写这个帖子纠正一下。发现原来不是楼主写错了。而是网站不显示“特殊字符”。正确的请读者比对代码包里的信息。一看就明白了。

[ 本帖最后由 xiongxiaoming 于 2008-2-24 20:32 编辑 ]

刚想开始学AJAX了,顶楼主一个..