<!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. NASA的10条代码编写原则

    NASA的10条代码编写原则 作者: Gerard J. Holzmann 来源: InfoQ 原文链接 英文原文:NASA's 10 Coding Rules for Writing Safety ...

  2. ORM查询练习

    ORM查询练习 Django ORM  ORM查询的练习题 ORM代码 from django.db import models # Create your models here. class Pu ...

  3. Python开发转盘小游戏

    Python开发转盘小游戏 Python  一 原理分析 Python开发一个图形界面 有12个选项和2个功能键 确定每个按钮的位置 每个按钮的间隔相同 点击开始时转动,当前选项的背景颜色为红色,其他 ...

  4. 洛谷 P4234 最小差值生成树(LCT)

    题面 luogu 题解 LCT 动态树Link-cut tree(LCT)总结 考虑先按边权排序,从小到大加边 如果构成一颗树了,就更新答案 当加入一条边,会形成环. 贪心地想,我们要最大边权-最小边 ...

  5. Sklearn，TensorFlow，keras模型保存与读取

    一.sklearn模型保存与读取 1.保存 from sklearn.externals import joblib from sklearn import svm X = [[0, 0], [1, ...

  6. maxscript批量设置摄像机并保存渲染图

    代码可直接运行 fn renderr = ( a=box() --新建一个立方体 ambientcolor = (color ) --设置环境光(搞不太懂,白的不出错就行) to do ( dis = ...

  7. APP的功能分类及打包与发布的分类方式

    智能手机的出现改变了我们的生活,同时各种各样的APP充斥在我们的手机当中.那么我先现在在来熟悉一下APP的分类及其用途:工具类.社交类.信息类.娱乐类.生活类等几大类.我么了解了APP的用途分类,那么 ...

  8. jQuery示例 | 分级菜单

    <!DOCTYPE html> Title .header{ background-color: black; color: wheat; } .content{ min-height: ...

  9. Struts中Validate（）和validateXxx的使用

    Struts中Validate()和validateXxx的使用 学习struts2之后,你会发现validate在之前是没有的!它是怎么实现的呢? validate和validateXxxx都是拦截 ...

  10. 【随笔】关于绝对定位absolute相对于父元素定位的问题

    绝对定位absolute的官方定义: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素 ...