<!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. 2016级算法第三次上机-C.AlvinZH的奇幻猜想——三次方

    905 AlvinZH的奇幻猜想--三次方 思路 中等题.题意简单,题目说得简单,把一个数分成多个立方数的和,问最小立方数个数. 脑子转得快的马上想到贪心,从最近的三次方数往下减,反正有1^3在最后撑 ...

  2. How to stop UITableView from clipping UITableViewCell contents in iOS 7

    It looks like the view hierarchy changed slightly in ios7 for table view cells. You can try setting ...

  3. Windows下的ntfs流文件简介

    流文件,即NTFS交换数据流(alternate data streams,简称ADS),是NTFS磁盘格式的一个特性,在NTFS文件系统下,每个文件都可以存在多个数据流,就是说除了主文件流之外还可以 ...

  4. java程序没有运行选项

    1.检查module是否正确 确保src为资源文件 2.检查是否有main函数

  5. display和overflow

    一.display <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. Oracle dbms_random随机函数包

    dbms_random是oracle提供的一个随机函数包,以下是它的一些常用的功能: 1.dbms_random.value 作用:生成一个大于等于0,大于等于1的随机的38位小数,代码如下: sel ...

  7. Asp.Net webconfig中使用configSections的用法

    最近闲来无事,研究研究公司的框架,无意中打开了webconfig页面,发现了一个我不认识的节点<configSections></configSections>,于是百度之,大 ...

  8. sencha touch list infinite 属性

    sencha touch list 1 默认每一项的高度会自动适应其内容. 2 当每一个 item 的高度都相同且不变时, 设置 itemHeight 为固定值 和 variableHeights 为 ...

  9. Mutex,Monitor,lock,MethodImplAttribute,SynchronizedAttribute的用法差异

    1)Mutex:进程之间的同步(互斥量). 2)lock/Monitor……:线程同步.其中lock是Monitor的简化版本(直接生成try{Monitor.Enter(……)}finally{Mo ...

  10. 并发编程之synchronize

    synchronized是Java中的关键字,是一种常用的线程同步锁. 用法 注意:在理解synchronized时,要知道一个核心点,synchronized锁定的不是代码,而是对象.使用synch ...