AJAX快速上手和基本核心

一、快速上手AJAX

使用ajax的过程可以类比平常我们访问网页过程

1.创建一个XMLHttpRequest类型的对象------相当于打开了浏览器

var xhr = new XMLHttpRequest();

2.打开一个网址之间的连接-------相当于在地址栏输入访问地址

xhr.open('GET', 'http://test1.com/ajax/time.php');

3.通过连接连接发送一次请求-------相当于回车或点击访问发送请求

xhr.send();

4.指定xhr状态变化事件处理函数---------相当于处理网页呈现后的操作

 xhr.onreadystatechange = function  () {
           //通过 xhr 的readyState 判断此次请求的响应是否接受完成
           if (this.readyState!==4) return;
           //通过 xhr 的responseText 获取到响应的响应体
           console.log(this.responseText);
         }    

二、readyState

由于readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以得有必要了解每一个状态值代表的含义。

以下是各状态值出现的顺序

<script>
        var xhr= new XMLHttpRequest();
        console.log(xhr.readyState);
        //==>0
        //初始化  请求代理对象
        

        xhr.open('GET', 'http://test1.com/ajax/time.php');
        console.log(xhr.readyState);
        //==>1
        //open 方法已经调用 ， 建立一个与服务端特定端口的连接

        xhr.send();
      

        xhr.addEventListener('readystatechange',function(){
         switch (xhr.readyState) {
             case 2:
                 console.log(xhr.readyState);
                 //==>2
                 //已经接收到了响应报文的响应头（但是还没有拿到请求体）
                 break;
             case 3:
                 console.log(xhr.readyState);
                 console.log(this.responseText);
                 //==>3
                 //正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
                 //在这里处理响应体不保险（不可靠）
                 break;
             case 4:
                 console.log(xhr.readyState);
                 //==>4
                 //整个响应报文已经完整下载下来了
                 break;
             default:
                 // statements_def
                 break;
         }
        });


    </script>