美文网首页H5^Study
AJAX学习:基础(发送请求)/readystatechange

AJAX学习:基础(发送请求)/readystatechange

作者: Merbng | 来源:发表于2019-05-09 18:33 被阅读0次

readystatechange & readyState

涉及到 AJAX 操作的页面“不能”使用文件协议访问(文件的方式访问)
AJAX是一套API 核心提供的类型:XMLHttpRequest

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 涉及到 AJAX 操作的页面“不能”使用文件协议访问(文件的方式访问)
    //    AJAX是一套API 核心提供的类型:XMLHttpRequest
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "./time.php");
    console.log(xhr.readyState);//1 open方法已调用,建立一个与服务端特定接口的连接
    xhr.send();
    //因为客户端永远不知道服务器何时才能返回我们需要的响应
    //所有AJAX API 采用事件的机制(通知的感觉)
    xhr.addEventListener("readystatechange", function () {

        switch (this.readyState) {
            case 2:
                //已经接收到了响应报文的响应头
                //可以拿到头
                console.log(this.getAllResponseHeaders());
                console.log(this.getResponseHeader("server"));
                //但是拿不到请求体
                console.log(this.responseText);
                break;
            case 3:
                //正在下载响应报文的响应体,有可能响应体为空,也可能不完整
                //在这里处理响应体不保险(不可靠)
                console.log(this.responseText);
                break;
            case 4:
                //一切ok,整个响应报文已经完整下载下来了
                console.log(this.responseText);
                break;

        }


//    这个事件并不只在响应时触发,XHR 状态改变就触发
        if (this.readyState !== 4) return;
        console.log(this.responseText);
    });

</script>
</body>
</html>

相关文章

  • AJAX学习:基础(发送请求)/readystatechange

    readystatechange & readyState 涉及到 AJAX 操作的页面“不能”使用文件协议访问(...

  • 用get、post方式发送ajax请求

    get方式发送ajax请求 post方式发送ajax请求

  • ajax

    特点 ajax ajax入门 ajax请求与发送数据 ajax工具类封装 type:请求类型url:请求地址dat...

  • 使用promise封装ajax请求

    封装一个ajax请求方法: 调用ajax方法,发送请求

  • JavaScript学习笔记(三十三)-- jQuery(下)

    jQuery 今天我们继续来聊 jQuery 发送 ajax 请求 发送 get 请求 发送 post 请求 综合...

  • jQuery+Ajax

    Ajax Ajax-HTTP请求 XMLHttpRequest发送请求 XMLHttpRequest取得响应 JS...

  • Ajax-03

    jQuery 中的 Ajax $.ajax()方法概述 作用:发送Ajax请求。 可替换属性 作用:发送jsonp...

  • ajax,本地存储

    ajax 发送http请求ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。...

  • <Ajax>总结:知识点

    一、Ajax的基础: 1、使用步骤 1.1、步骤: 创建一个异步对象 设置请求方式和请求地址 发送请求 监听状态的...

  • 发送ajax请求

    发送ajax请求 vue本身不支持发送ajax请求,需要使用vue-resourc axios等插件实现,建议使用...

网友评论

    本文标题:AJAX学习:基础(发送请求)/readystatechange

    本文链接:https://www.haomeiwen.com/subject/fyygoqtx.html