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

深碍√TFBOYSˉ_ 2021-07-24 12:20 568阅读 0赞

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()

![在这里插入图片描述][20191222153901928.png]

send()
    	用于实际发出的HTTP请求
    		xhr.send(info);
    			get请求参数为null
    			
    		
    	设置请求发送后等待响应的时间
    		xhr.timeout=毫秒数;
    		 0则表示没有时间限制
    
    	设置超时后的回调函数
    		xhr.ontimeout=function(){};
    			当超出timeout设置的时间后执行
    	
    	上传进度回调
    	xhr.upload.progress=function(){};
    	
    	取消当前ajax发送:
    	xhr.abort();  //使ajax请求到未初始化的状态

status和statusText属性值:

![在这里插入图片描述][20191222145849886.png]

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

[20191222153901928.png]: /images/20210724/015ec8e9f8f2432195e5921dee1cdd40.png
[20191222145849886.png]: /images/20210724/59948ec65c774fbcaffa408b51d3fa69.png