<!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. appium桌面版和命令行版的安装

    一.appium桌面版: 启动很慢,一般用于元素定位 Appium-Desktop官方下载地址:https://github.com/appium/appium-desktop/releases/ ( ...

  2. 批量自动化生成PDF目录标签

    所需软件: 1. FreePic2Pdf(网上很容易找到) 2. python3 3. 天若OCR 链接:https://pan.baidu.com/s/1B9dUr3gc0pv0BSHo5QYGsQ ...

  3. 51nod 1812 树的双直径 题解【树形DP】【贪心】

    老了-稍微麻烦一点的树形DP都想不到了. 题目描述 给定一棵树,边权是整数 \(c_i\) ,找出两条不相交的链(没有公共点),使得链长的乘积最大(链长定义为这条链上所有边的权值之和,如果这条链只有 ...

  4. 6. Javscript学习笔记——BOM

    6. BOM 6.1 widow对象 全局作用域: window是浏览器的一个实例 window对象同时扮演着ECMAScript中的Global对象的角色,因此所有在全局作用域中声明的变量.函数都会 ...

  5. EPC sequence

    nps-epc-term-2.7.0 eNodeB: /root/b2b/eutran/01/bin ./clean_log.sh ./set_ip.sh [root@CEN6- bin]# ./cl ...

  6. [转] Vagrant入门

    [From] https://www.cnblogs.com/davenkin/p/vagrant-virtualbox.html 简单地说,Vagrant让我们可以通过代码的方式快速地.可重复地创建 ...

  7. CentOS&.NET Core初试-4-安装守护服务(Supervisor)

    系列目录 CentOS的安装和网卡的配置 安装.NET Core SDK和发布网站 Nginx的安装和配置 安装守护服务(Supervisor) Supervisor是什么? Supervisor 是 ...

  8. 【TensorFlow】-精选Github开源项目

    转至:http://www.matools.com/blog/1801988 留底做个记录,有空在做验证. TensorFlow源码 https://github.com/tensorflow/ten ...

  9. 2016424王启元 Exp3免杀原理与实现

    基础问题回答 1.杀软是如何检测出恶意代码的? (1)基于特征码的检测 特征码是能识别一个程序是一个病毒的一段不大于64字节的特征串.如果一个可执行文件包含这样的特征码则被杀毒软件检测为是恶意代码. ...

  10. Django去操作已经存在的数据库

    你有没有遇到过这种情况? 数据库,各种表结构已经创建好了,甚至连数据都有了,此时,我要用Django管理这个数据库,ORM映射怎么办??? Django是最适合所谓的green-field开发,即从头 ...