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 ...
随机推荐
- string.Format("rspauth={0}",
public string rspauth(string Username, string Realm, string Password, string Nonce, string Cnonce, ...
- celery简单理解和使用
解决同步阻塞的问题 将耗时任务放到后台异步执行,不影响用户其他操作. 实现原理 任务队列是一种跨线程,跨机器的机制. 任务队列中包含称作任务的工作单元.有专门的进程持续不断的监视任务队列,并从中得到新 ...
- c++开发规范
目录 1. 头文件 1.1. Self-contained 头文件 1.2. #define 保护 1.3. 前置声明 1.4. 内联函数 1.5. #include 的路径及顺序 2. 作用域 2. ...
- java设计模式：简单实现生产者和消费者模式
*博客搬家:初版发布于 2016/04/15 20:31 原博客地址:https://my.oschina.net/sunqinwen/blog/660881 本实例中单独为生产者和消费者各开辟 ...
- python全栈开发_day3_数据类型，输入输出及运算符
一:常见数据类型 1)int整型 例:age=1 整型常用于年龄,账号等 2)float浮点型 例:salary=5.1 浮点型常用于薪水,身高,体重等 3)str字符串类型 例:name=“chen ...
- 2. Javscript学习笔记——引用类型
2. 引用类型 2.1 Object类型 Object 是一个基础类型,其他所有类型都从 Object 继承了基本的行为. 对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象 ...
- 微信内置浏览器H5 弹出键盘 遮盖文本框解决办法 Fixed失效
if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", functio ...
- Devexpress中统一设置字体样式的方法
#region 设置默认字体.日期格式.汉化dev DevExpress.Utils.AppearanceObject.DefaultFont = new System.Drawing.Font(&q ...
- reset.css(重置浏览器默认样式)
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1 ...
- Ubuntu安装google-chrome
原文地址:http://www.linuxidc.com/Linux/2013-10/91857.htm安装谷歌浏览器,只需要三行代码: 打开终端,输入 cd /tmp 对于谷歌Chrome32位版本 ...