01

实现Ajax的步骤

<script>
//点击按钮来触发AJAX的异步交互
//是否只有一个事件才能触发ajax的交互呢？
//不是，只是为了能让效果更加的清晰
var btn=
document.getElementById("btn");
btn.onclick=function(){
    //实现AJAX步骤，总共是4步

    //1.创建XMLHttpRequest对象
        var xhr=getXhr();//定义变量调用函数 
      /*2.与服务器端建立连接
            使用XMLHttpRequest对象的open(method,url,async)方法
            *method-请求类型(GET或POST)
            *url-请求地址
            *async-(Boolean)是否异步
                *true-异步（默认值）
                *false-不异步(同步)
        注意：
        *新版本的XMLHttpRequest对象的w3c官网规范不建议使用同步方式
      */
        xhr.open("GET","01.php?user=zhangwuji&pwd=12345",true);//open这个方法没有返回值，所以做到这一步还没有办法去测试它
      /*3.向服务器端发送请求数据
      send(data)方法
      *data-请求的数据内容
      注意
      *请求数据的格式
      name=value&name=value&....
      请求类型
      *GET方式下
        *send()方法其实是失效的
        *send()方法不能被省略
         send(null)
        *请求数据被添加在请求地址(url?)后
        POST方法
      */
        xhr.send(null);
      /*4.接收服务器端的响应数据 
        *onreadystatechange事件-监听服务器端的通信状态
        *readyState属性-表示服务器端的通信状态
        *0-(服务器端)未初始化
        *1-正在连接(服务器端)
        *2-(服务器端)正在接收
        *3-(服务器端)正在响应
        *4-(服务器端)响应完毕
        *status属性-表示服务器端的状态码
        *responseText属性-用于接收服务器端响应的Text格式的数据 
        *真正关心的是4，因为只有为4时，才能接收到完整的内容
      */
      xhr.onreadystatechange=
      function(){
        //判断服务器端的通信状态
        if(xhr.readyState==4){
            //判断当前请求一定是成功的
            if(xhr.status==200){
                //如何接收响应数据 
                var data=
                xhr.responseText;
            }
      }
}
//定义创建XMLHttpRequest对象的函数
function getXhr(){
    //总共3步
    var xhr=null;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{//IE浏览器
        xhr=new
        ActiveXObject("Microsoft.XMLHttp"
        );
    }
    return xhr;
}

</script>

服务器端