ajax方法XHR.readyState五种状态与示例
<!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五种状态与示例的更多相关文章
- 转 XMLHttpRequest().readyState的五种状态详解
转 http://javathinker.blog.ccidnet.com/blog-htm-itemid-1262479-do-showone-type-blog-uid-36384.html 在& ...
- Js--AJAX的小知识（一）：ajax的五种状态
一.ajax的五种状态(readyState ) 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已 ...
- ajax的五种状态
ajax的五种状态(readyState ) 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接 ...
- jsp页面加载readyState的五种状态根据我们状态添加进度条
这段代码放在页面最下面 原文如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomet ...
- xmlhttprequest readyState 属性的五种状态
关于readystate五个状态总结如下: readyState 状态 状态说明(0)未初始化此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备.值 ...
- 细说进程五种状态的生老病死——双胞胎兄弟Java线程
java线程的五种状态其实要真正高清,只需要明白计算机操作系统中进程的知识,原理都是相同的. 系统根据PCB结构中的状态值控制进程. 单CPU系统中,任一时刻处于执行状态的进程只有一个. 进程的五种状 ...
- Java 多线程 线程的五种状态，线程 Sleep, Wait, notify, notifyAll
一.先来看看Thread类里面都有哪几种状态,在Thread.class中可以找到这个枚举,它定义了线程的相关状态: public enum State { NEW, RUNNABLE, BLOCKE ...
- Thread之一：线程生命周期及五种状态
<Thread之一:线程生命周期及五种状态> <juc线程池原理(四): 线程池状态介绍> 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较 ...
- java线程的五种状态
五种状态 开始状态(new) 就绪状态(runnable) 运行状态(running) 阻塞状态(blocked) 结束状态(dead) 状态变化 1.线程刚创建时,是new状态 2.线程调用了sta ...
随机推荐
- javascript中children,childNodes等节点属性
1.children与childNodes children: 获取子元素节点,无兼容问题 childnNodes: IE:获取子元素节点 非IE(chrome,Firefox等):获取子节点,包括元 ...
- 2016级算法第二次上机-D.Bamboo的饼干
Bamboo的饼干 分析 从两个数组中各取一个数,使两者相加等于给定值.要注意去重和排序 难度不大,方法很多,基本只要不大于O(n^2 ) 的都可以过.本意想考察二分搜索 还可以借助stl中的map, ...
- AIMR 固定收益推荐读物
目录 AIMR Suggested Fixed-Income Readings I. Perspectives on Interest Rates and Pricing of Traditional ...
- P01-Python中列表的复制问题
(1)使用=直接赋值 a = [1, 2, 3, [6, 7]] b = a 初始情况: a: [1, 2, 3, [6, 7]] b: [1, 2, 3, [6, 7]] ------------- ...
- ubuntu 报错 libcublas.so.8.0
在qt程序中使用yolo时报错: ./conjugateGradientPrecond: error while loading shared libraries: libcublas.so.8.0: ...
- PHP会话cookie类的封装
<?php header('content-type:text/html;charset=utf-8');/** * 完成cookie的设置.删除.更新.读取 */class Cookie{ ...
- 【算法笔记】B1019 数字黑洞
1019 数字黑洞 (20 分) 给定任一个各位数字不完全相同的 4 位正整数,如果我们先把 4 个数字按非递增排序,再按非递减排序,然后用第 1 个数字减第 2 个数字,将得到一个新的数字.一直 ...
- Django项目创建与管理
1.主题 这部分教程主要介绍如何通过Pycharm创建.管理.运行一个Django工程.对于Django模块的相关知识大家可以参考Python社区. 2.准备环境 Django版本为2.0或更高 Py ...
- Codeforces - 914C 数位DP
题意有点难以描述,简略的就是给定一个二进制\(n\),每一步操作能使\(n\)的位为1的数的和转化为一个十进制,然后转化为该数的二进制再进行相同的操作 查询\([0,n]\)中操作数恰好为\(k\)的 ...
- 关于tp5全局过滤
在config里面. // 默认全局过滤方法 用逗号分隔多个'default_filter' => 'htmlspecialchars',