使用AJAX技术实现网页部分信息的更新

1创建.AJAX对象

主流浏览器：var ajax=new XMLHttpRequest();

IE低版本浏览器：var ajax=new ActiveXObject('Microsoft.XMLHTTP');

2向服务器发送http请求

if(method=='GET' && data){

        url=url+'?'+data;

    }

    xhr.open(method,url,true);

    

    if(method=='GET'){

        xhr.send(null);

    }

    else{

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        xhr.send(data);

    }

3获取ajax对象传来的信息，处理后返回给ajax对象

<?php

    $userName=$_GET['name'];

    

    if($userName=='admin'){

        echo '该用户名不能使用';

    }

    else{

        echo '该用户名能使用';

    }

    

?>

4把数据返回给调用ajax对象的地方

xhr.onreadystatechange=function(){

        if(xhr.readyState==4){

            if(xhr.status==200){

                if(fnsuccess){

                    fnsuccess(xhr.responseText);

                }    

            }

            else{

                alert('出差了，出错状态是：'+xhr.status);

            }

        }

    }

把整个过程封装为函数：

function ajax(method,url,data,fnsuccess){

    var xhr;

    if(window.XMLHttpRequest){

        xhr=new XMLHttpRequest();

    }

    else{

        xhr=new ActiveXObject('Microsoft.XMLHTTP');

    }

    if(method=='GET' && data){

        url=url+'?'+data;

    }

    xhr.open(method,url,true);

    if(method=='GET'){

        xhr.send(null);

    }

    else{

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        xhr.send(data);

    }

    xhr.onreadystatechange=function(){

        if(xhr.readyState==4){

            if(xhr.status==200){

                if(fnsuccess){

                    fnsuccess(xhr.responseText);

                }

            }

            else{

                alert(xhr.status);

            }

        }

        

    }

}

调用ajax函数

<script type="text/javascript">

            window.onload=function(){

                var oBtn=document.getElementById('btn');

                oBtn.onclick=function(){

                    ajax('GET','aa.txt','',function(str){

                        console.log(str);

                    });

                }

            }

        </script>