<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        #url{

            width: 1000px;

            height: 30px;

            outline: none;

            border: 1px solid #000;

            border-radius: 5px;

            margin-left: 10px;

        }

        #btn{

            width: 90px;

            height: 30px;

            outline: none;

            border: 1px solid #000;

            border-radius: 5px;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div>

        <label for="url">

            URL:<input type="text" placeholder="请输入要检测的URL" id="url">

        </label>

    </div>

    <br>

     <button class="btn" id="btn">点击测试</button>

    <div id="content">

    </div>

</body>

<script>

    var str = ''

    document.getElementById('btn').onclick = function(){

        var xhr = new XMLHttpRequest();

        var url = document.getElementById('url').value;

        if (!url) {

            alert('请输入URL');

            return false;

        }

        // console.log(url)

        console.log(xhr.status, xhr.readyState) // 0,0

        xhr.onreadystatechange=function(){

            // console.log(xhr)

            if(xhr.status === 200){

                console.log(xhr.status, xhr.readyState)//200,2;200,3;200,4

                str += `status:${xhr.status}`

                if(xhr.readyState === 4){

                    // console.log(xhr.getAllResponseHeaders())

                    str += xhr.getAllResponseHeaders() + '<br/>'

                }

            }

            document.getElementById('content').innerHTML = str;

        }

        xhr.open("GET",url,true);

        console.log(xhr.status, xhr.readyState)// 0,1

        xhr.send(null)

    }

</script>

</html>

　　

XHR.readyState == 状态（0，1，2，3，4）

0：请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了。

ajax方法XHR.readyState五种状态与示例的更多相关文章

  1. 转 XMLHttpRequest().readyState的五种状态详解

    转 http://javathinker.blog.ccidnet.com/blog-htm-itemid-1262479-do-showone-type-blog-uid-36384.html 在& ...

  2. Js--AJAX的小知识（一）：ajax的五种状态

    一.ajax的五种状态(readyState ) 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已 ...

  3. ajax的五种状态

    ajax的五种状态(readyState ) 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接 ...

  4. jsp页面加载readyState的五种状态根据我们状态添加进度条

    这段代码放在页面最下面 原文如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomet ...

  5. xmlhttprequest readyState 属性的五种状态

    关于readystate五个状态总结如下: readyState 状态    状态说明(0)未初始化此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备.值 ...

  6. 细说进程五种状态的生老病死——双胞胎兄弟Java线程

    java线程的五种状态其实要真正高清,只需要明白计算机操作系统中进程的知识,原理都是相同的. 系统根据PCB结构中的状态值控制进程. 单CPU系统中,任一时刻处于执行状态的进程只有一个. 进程的五种状 ...

  7. Java 多线程 线程的五种状态，线程 Sleep, Wait, notify, notifyAll

    一.先来看看Thread类里面都有哪几种状态,在Thread.class中可以找到这个枚举,它定义了线程的相关状态: public enum State { NEW, RUNNABLE, BLOCKE ...

  8. Thread之一：线程生命周期及五种状态

    <Thread之一:线程生命周期及五种状态> <juc线程池原理(四): 线程池状态介绍> 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较 ...

  9. java线程的五种状态

    五种状态 开始状态(new) 就绪状态(runnable) 运行状态(running) 阻塞状态(blocked) 结束状态(dead) 状态变化 1.线程刚创建时,是new状态 2.线程调用了sta ...

随机推荐

  1. webpack---less+热更新 使用

    最近尝试用less写界面,webpack进行打包,然后发现每次修改less时都需要重新执行webpack打包一下,于是就想到了webpack热更新这个功能. 一.使用less less是一门css预处 ...

  2. EndNote同步功能<Sync>

    EndNote的同步功能Sync可以把本地文献和网络云文献进行同步,如何进行同步,同步过程中需要注意什么,本文就EndNote的同步功能Sync作一图文说明. 一直对EndNote的同步功能Sync不 ...

  3. Django之ContentTypes

    ContentTypes是什么? ContentTypes是Django内置的一个应用,可以追踪项目中所有app和model的对应关系,并记录在ContentType表中. 每当我们创建了新的mode ...

  4. jieba和文本词频统计

    ---恢复内容开始--- 一.结巴中文分词涉及到的算法包括: (1) 基于Trie树结构实现高效的词图扫描,生成句子中汉字所有可能成词情况所构成的有向无环图(DAG): (2) 采用了动态规划查找最大 ...

  5. Python学习 day13

    一.可迭代对象和迭代器 1.回顾可以被for循环的对象 list.dic.str.set.tuple.文件句柄f.range().enumerate() 只有可迭代对象才能被for循环,当我们遇到一个 ...

  6. python fileinput处理多文件

    import fileinput with fileinput.input(files=(path1,path2)) as f: for line in f: print(line)

  7. redis cluster 部署过程

    一, 特点 高性能: 1.在多分片节点中,将16384个槽位,均匀分布到多个分片节点中 2.存数据时,将key做crc16(key),然后和16384进行取模,得出槽位值(0-16383之间) 3.根 ...

  8. ocr 资源

    1. PIL 在图片上添加中文 https://blog.csdn.net/m0_37606112/article/details/78511381 2 .Chinese Text in the Wi ...

  9. Centos7修改主机名称、DNS、网卡信息

    1 hostnamectl set-hostname wangshuyi 2 vi /etc/hostname 3 vi /etc/resolv.conf 4 vi /etc/sysconfig/ne ...

  10. C#利用WebBrowser获取完整COOKIE

    代码: http://www.cnblogs.com/hsapphire/archive/2010/09/10/1823384.html http://blog.csdn.net/attilax/ar ...