<!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. 使用Git如何优雅的忽略掉一些不必的文件

    熟悉使用Git之后发现,使用sourceTree来管理和开发项目会变得更高效,现在我用bitbucket管理自己的项目,它提供了私有的仓库,用起来还是比较爽,不过刚开始用的时候,只要一打开本地仓库的工 ...

  2. jquery 实现省市二级联动

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 解析XMl文档和字符串

    //解析xml字符串 txt="<bookstore><book>"; txt=txt+"<title>Everyday Italia ...

  4. SPOJ 1811 Longest Common Substring(求两个串的最长公共子串 || 或者n个串)

    http://www.spoj.com/problems/LCS/ 题目:求两个串的最长公共子串 参考:https://www.cnblogs.com/autoint/p/10345276.html: ...

  5. springcloud(一)-初识

    springCloud简介 尽管springCloud带有“cloud”字样,但它并不是云计算解决方案,而是在SpringBoot基础上构建的,用于快速构建分布式系统的通用的工具集.从技术架构上降低了 ...

  6. 矩阵&&高斯消元

    矩阵运算: \(A\times B\)叫做\(A\)左乘\(B\),或者\(B\)右乘\(A\). 行列式性质: \(1.\)交换矩阵的两行(列),行列式取相反数. \(2.\)某一行元素都\(\ti ...

  7. APP开发的三种技术对比

    目前来说主流的App开发方式有三种:Native App .Web App.Hybird App.下面我们来分析一下这三种App开发方式的优劣对比: 一 :Native App 即 原生App开发 优 ...

  8. React 的 server render 初步学习

    所谓server render 即服务端渲染,这是为了解决现代前端框架下的单页应用在SEO方面不友好的问题. react 的SSR主要思路就是 1.将应用的根组件导出 如 <App /> ...

  9. log4j 简单用法

    maven添加必要库: <!-- https://mvnrepository.com/artifact/log4j/log4j --> <dependency> <gro ...

  10. 铵钮提交事件PostBack之后，一些动态加载的物件丢失

    今早起来,发现skype有网友留言,情况大约如下,不过Insus.NET还是先感谢网友的测试.http://www.cnblogs.com/insus/p/3193619.html  如果你有看此篇博 ...