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 ...
随机推荐
- Android Fragment实现微信底部导航
1.XML布局 (1)主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...
- mongodb与python随手记
在python中使用pymongo连接mongodb数据库. 基本代码如下: from pymongo import MongoClient client = MongoClient('127.0.0 ...
- linux忘记root密码怎么办
如何找回root密码,如果我们不小心,忘记root密码,怎么找回? 思路:进入到单用户模式,然后修改root密码.因为进入单用户模式,root不需要密码就可以登录. 详细过程: 1.打开虚拟机 2.开 ...
- java HelloWorld时报错:"找不到或无法加载主类"问题的解决办法
学习java的第一天: 当我在做Java入门的时候,根据教程写的第一个Java程序是: public class Hello{ public static void main(String args[ ...
- centos 7 下安装nginx-1.15.7
安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境. 一. gcc 安装安装 nginx 需要先 ...
- lucene原理
lucene查找原理: https://yq.aliyun.com/articles/581877
- JavaScript跨浏览器处理事件以及相关对象
主流的浏览器和IE浏览器在处理事件和事件对象上是有所区别的,我们一般会通过EventUtil进行封装,这样,就可以正常的跨浏览器处理事件了,本文的主要内容总结自<JavaScript高级程序设计 ...
- 解决C#中dynamic类型作为泛型参数的反射问题
C#中dynamic类型作为泛型参数传递过去后,反射出来的对象类型是object,我用老外的这篇博文中的代码跑起来,得出的结果是:Flying using a Object map (a map),将 ...
- 9、在Shell脚本中调用其他脚本
在Shell脚本的执行过程中,Shell脚本支持调用另一个Shell脚本,调用的格式为:程序名 实例:在Shell脚本test1中调用test2. 1.调用test2#test1脚本root@ubun ...
- Redis的安装(CentOS 7下)
redis的官网,www.redis.io 1. 先下载 redis: wget http://download.redis.io/releases/redis-3.0.3.tar.gz 2. 解压: ...