7.ajax的简单使用

ajax是干什么的

• 前端向服务器发起异步请求的技术

异步/同步

• 同步：同一时刻只能干一件事
• 异步：同一时刻可以干多件事

原理

• 通过XmlHttpRequest对象向服务器发起请求
• 再通过js操作DOM更新页面
• 在IE5中首次引入，支持异步请求
• 因为js是单线程，引入ajax可以不阻塞代码运行同时可以及时向服务器发起请求并处理服务器响应，达到无刷新的效果

使用

<script>
        // 创建ajax对象
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }// 兼容IE5\IE6
        else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 设置请求地址
        // 1.第一个参数表示请求方式，2.第二个参数表示请求的URL，
        // 3.第三个参数表示是否发起异步请求，默认true（异步请求），同步已被废弃
        xhr.open("GET", "http://localhost:8080/picture/list")

        // 发送请求（可选参数，默认null）
        xhr.send();

        // 等待服务器响应
        // 注册事件。 onreadystatechange事件，状态改变时就会调⽤。
        xhr.onreadystatechange = function () {
            // 表示数据全部响应
            if (xhr.readyState === 4) {
                // 请求成功
                if (xhr.status === 200) {
                    alert(xhr.responseText);
                } else {
                    alert("请求错误，状态码：" + xhr.status);
                }
            }
        }
</script>