Ajax ajax原生-xhr对象的属性和方法、xhr对象的创建

Ajax模块在处理网络请求时包括以下四个步骤

	创建Xhr对象
	构建Xhr对象的属性和方法
	发出HTTP请求
	通过Xhr对象的方法接收服务器回传的数据

创建xhr对象
	var xhr=new XMLHttpRequest();

xhr对象属性/方法
	onreadystatechange
		指向一个回调函数,当页面加载状态发生改变时调用
			xhr.onreadystatechange=function(){};
		作用:监听请求是否发送成功

	readyState
		用一个整数和对应常量来表示XMLHttpRequest请求当前所处状态,一般会在onreadystatechange的回调函数中,通过
		readyState属性的值来执行不同状态的函数
			具体值见下图
			0 UNSENT,表示请求未发送
			1 OPENED,请求准备发还未发
			2 HEADERS_RECEIVED,请求已发送,但后台未收到
			3 LOADING,后台正在接受,还未接收完成
			4 DONE,表示已接受或本次接收失败

	status
		表示后台接收到请求后,返回数据时,前端接收状态码
		200访问正常
			其他具体值见下图

	statusText
		表示后台接收到请求后,返回数据时,前端接收状态码对应的
		常量字符
		 200对应OK
		 	其他具体值看下图

	responseText
		后台返回的json字符串数据,若要转成js类型对象,需要使用
		JSON.parse(数据);

	open()
		设置请求发往某处,只是设置,不是发送
			xhr.open('请求类型','url地址',true/false);
				true为异步

	setRequestHeader()

在这里插入图片描述

send()
	用于实际发出的HTTP请求
		xhr.send(info);
			get请求参数为null
			
		
	设置请求发送后等待响应的时间
		xhr.timeout=毫秒数;
		 0则表示没有时间限制

	设置超时后的回调函数
		xhr.ontimeout=function(){};
			当超出timeout设置的时间后执行
	
	上传进度回调
	xhr.upload.progress=function(){};

status和statusText属性值:

在这里插入图片描述

创建xhr对象监听代码示例:

	<script>
		var btn=document.querySelector('button');
		btn.onclick=function()
		{
			//创建xhr对象
			var xhr=new XMLHttpRequest();
			//监听请求是否成功
			xhr.onreadystatechange=function()
			{
				//通过readyState属性的值,判断当前请求状态
				if(xhr.readyState==4)
				{
					console.log("已接受");
					//通过status属性来判断前台接收状态
					if(xhr.status==200)
					{
						console.log(xhr.statusText);
						//此时表明真正接收到了数据
						console.log(xhr.responseText);
						console.log(JSON.parse(xhr.responseText));
					}
				}

			};
			
		}

	</script>

发布了252 篇原创文章 · 获赞 3 · 访问量 3274

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/103653672