1# 罗哥.net 发表于2007-09-29

AJAX简单上手

今天,我给大家讲讲AJAX的初级应用
AJAX的概念我就不讲了,BAIDU、GOOGLE上多的是,我讲实际的应用吧

[复制到剪切板]
CODE:
var xmlHttp;                                                                 
function createXMLHttpRequest() {                                  
    if (window.ActiveXObject) {                                        
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else if (window.XMLHttpRequest) {                            
        xmlHttp = new XMLHttpRequest();                           
    }
} ;

这里是建立XMLHttpRequest对象的语句,这里的主要目的为两个:
1.建立XMLHttpRequest对象
2.确定客户浏览器,if(window.ActiveXObject)是判断如果浏览器支持ActiveXObject,也就是说浏览器为IE,那可以使用ActiveXObject来代替XMLHttpRequest,其他的则使用XMLHttpRequest

[复制到剪切板]
CODE:
function SendAjax(name) {
    createXMLHttpRequest();                               //调用上面例子的createXMLHttpRequest函数
    var url = 'ajax.php?type='+name;                                   //定义要传送到的页面,也就是AJAX的后台页面
    xmlHttp.onreadystatechange = callback;           //当状态改变时触发callback
    xmlHttp.open("GET", url, true);                       //设置URL以及HTTP的传送方法
    xmlHttp.send(null);                                        //seng()方法触发AJAX传送
} ;

以上这段属于固定用法,大家看我的注释,了解一下,这个是发送数据,接下来大家看看如何获得数据

[复制到剪切板]
CODE:
function callback() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var backresult = xmlHttp.responseText;
            document.getElementById('result').innerHTML = backresult;
        } else {
            document.getElementById('result').innerHTML = "无法获得数据";
        }
    } else {
        document.getElementById('result').innerHTML = "loading...";
    }
} ;

好了,以上就是回调数据的函数.我来给大家说明一下用法
readystate 是请求的状态,0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成.为什么我们这里只判断了一个4,然后就用else解决了呢,因为在0到4这个过程中,一般按照现有的带宽及服务器响应速度,是一闪而过的,所以定义了全部的状态,也不一定用户可以看见.当然如果你有这个需要,可以一个个设置过来.
status 是HTTP状态码,就如我们有时打开一个网站看到的"404 error page not found",200指的是加载成功,诸如此类的状态定义,我们可以自己设定.
document.getElementById('result').innerHTML是我自己定义的,用来取出id为result的标签的内容,xmlHttp.responseText也就是ASP后台程序返回的值,我这里把这个值给了id为result的标签.
注意,xmlHttp.responseText是最简单也是功能最少的方法,一般当你能够熟练使用AJAX的时候应该结合XML来做,方法为xmlHttp.responML
其他的说明我也就不多说了,相信大家也都看懂了吧.

再接下来我再写个后台的ajax.php,让大家看的更直观一点

[复制到剪切板]
CODE:
<?php
    if(isset($_GET['type'])){
        switch($_GET['type']){
            case "admin":
                echo "<a href='http://www.luoge.net'>罗哥.net的BLOG</a>";
                break;
            case "guest";
                ……………………
        }
    }
?> ;

好了,一个简单的php后台,根据GET到的参数输出一句"罗哥.net",那我们的前台的id为result的标签(<div id="result"></div>)的内容就是"罗哥.net"了.

[复制到剪切板]
CODE:
<input type="button" value="点这个来调用AJAX" onclick="SendAjax('admin')" > ;

这样就可以啦,一个简单的AJAX就实现了.

更多关于罗哥.net的技术资料请参考罗哥.net的BLOG