Ajax异步请求--readyState

ajax 专栏收录该内容
1 篇文章 0 订阅

概述

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个:

readyState状态描述状态描述
0UNSEND代理对象已经被创建,但尚未调用open()方法
1OPENEDopen()方法已经调用,建立与服务端口特定的链接
2HEADERS_RECEIVEDsend()方法已经被调用,并获得了状态行和响应头
3LOADING响应体下载中,可能已经下载部分数据了
4DONE响应体下载完成,可以直接使用responseText

代码–代理对象的状态

随便一个符号语法的json都可以
准备一个后台文件json字符串,通过前后台交互理解readyState


  • 状态为0
	var xhr = new XMLHttpRequest();
	console.log(xhr.readyState) //0
	//创建XHR,即请求初始化
  • 状态为1
    后台的文件这里是data.php
	xhr.open('get','data.php')
	console.log(xhr.readyState) //1
	// 调用open()方法,建立与服务器端口的特定链接
  • 状态为2
xhr.send()
	xhr.addEventListener('readystatechange', function(){
		switch(xhr.readyState){
			case 2:
			console.log(this.readyState)  //2
			//send()方法已经调用,可以拿到响应头了
	   		console.log(this.responseText)  //此时尚未拿到
	   		console.log(this.getAllResponseHeaders())
//date: Fri, 28 Dec 2018 02:28:34 GMT
//server: Apache/2.2.21 (Win32) PHP/5.3.10
//connection: Keep-Alive
//x-powered-by: PHP/5.3.10
//content-length: 380
//keep-alive: timeout=5, max=99
//content-type: text/html

	   		break;
		}
	})

已经拿到响应头

  • 状态为3
			case 3:
			console.log(this.readyState)  //3
	   		console.log(this.responseText)  //拿到响应体,可能是不完整的
	   		break;

看一下拿到的json
部分截图
后面很明显是断开了,是不完整;数据少,网速快等等,也有可能是完整,所以测试可以调一下慢网速看看

  • 状态为4
case 4:
			console.log(this.readyState)  //4
	   		console.log(this.responseText)  //响应体下载完成,responseText可以使用
	   		console.log(document.readyState)
	   		var obj = JSON.parse(this.responseText)
	   		break;

部分截图
最后拿到的数据是完整的


使用我们JSON.parse转换成对象使用

console.log(obj)

转成我们所熟悉的对象

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值