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 ...
随机推荐
- CF1097D Makoto and a Blackboard（期望）
[Luogu-CF1097D] 给定 \(n,k\)一共会进行 \(k\) 次操作 , 每次操作会把 \(n\) 等概率的变成 \(n\) 的某个约数 求操作 \(k\) 次后 \(n\) 的期望是多 ...
- php引擎文件php.ini优化参数
无论是Apache环境还是nginx环境,php.ini都适合,php-fpm.conf适合nginx+fcgi的配置. 生产环境php.ini(php.ini-production) php.ini ...
- web及时通信传输的几种方法
有哪些: 轮询.长轮询.iframe流.websocket 轮询:http的请求有一个很明显的缺点,就是只能有客户端发起,不能由服务端主动推送,所以轮询就是定时向服务器发送请求,去获取数据 优点:传输 ...
- POST请求出现中文乱码的问题
最近使用Java的HttpURLConnection请求rest接口时候,POST请求参数中的中文传输之后出现乱码的问题,在网上找了一个亲测有效的方法: 将 DataOutputStream out ...
- iis支持asp.net4.0的注册命令使用方法及部署网站注意事项
如果没有按照正常的先装iis后装.net的顺序,可以使用以下命令重新注册一下,这样iis就可以支持asp.net 4.0了 32位的Windows: 1. 运行->cmd,打开窗口时请以管理 ...
- 【CSS】布局之选项卡与图片库
前面对简单的选项卡和简单的图片库进行了实现,现在把两者结合起来,实现下面这样的效果. 现在附上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 ...
- Java Hashtable 源码(JDK8)
记录了HashMap也来看看Hashtable吧,最近打算换份实习,所以想看看书回顾一下,不然就快记不得了.....囧啊囧啊,记性太差怎么破??? Hashtable里面的一些变量: Entry< ...
- springboot入门记
在idea中直接新建: 选择web: 在idea中启动“项目名称”Application中的main即可: 或者在项目目录下运行:mvn spring-boot:run: 或者: mvn instal ...
- 下面我将随机抽取一名幸运女生，XXXXX
个人在经过长久以来(约等于4小时)的奋战,终于实现了一个上课老师提问并抽奖的小程序.希望这个程序变得非常非常实用 课程的理解:在我的项目开始之前,先学习了一下UML项目类图的画法,和类与类之间的关系. ...
- js验证营业执照号码是否合规
需求:最近要做实名验证的功能,但是验证我们要验证严谨一点,参考了网上关于营业执照号码规则和一些大侠的代码的代码,总结一下. 营业执照号码规则:规则 代码: //方法一:function checkLi ...