js ajax请求流程

Posted 2020-10-20 carol72

<input type="button" name="btn" id="btn" value="按钮" />

JS

//点击按钮弹出1.txt的内容
var oBtn=document.getElementById("btn");

oBtn.onclick=function(){
	//打开浏览器
	/*
	 1.创建一个ajax对象
	 	ie6以下new ActiveXObject(‘Microsoft.XMLHTTP‘)
	 * */
	var xhr=null;
	try{
		xhr=new XMLHttpRequest();
	}catch(e){
		xhr=new ActiveXObject(‘Microsoft.XMLHTTP‘);
	}
	//在地址栏中输入地址
	/*
	open方法
	 参数
	 	1.打开方式
	 	2.地址
	 	3.是否异步
	 		异步：非阻塞模式  前面的代码不会影响后面代码的执行
	 		同步：阻塞模式   前面的代码会影响后面代码的执行
	 * */
　　　　　//异步请求
	xhr.open(‘get‘,‘1.txt‘,true);
	//提交  发送请求
	xhr.send();
	
	//等待服务器返回内容
	/*readyState：ajax工作状态 请求状态
	 * 0 (初始化)还没有调用open()方法
	 * 1 (载入)已经调用send()方法，正在发送请求
	 * 2 (载入完成)send()方法完成，已收到全部响应内容
	 * 3 (解析)正在解析响应内容
	 * 4 (完成)响应内容解析完成，可以在客户端调用了
	 * 
	status属性：服务器(请求资源)的状态，http状态码
	返回的内容
		responseText:返回以文本形式存放的内容
		responseXML:返回XML形式的内容*/
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				alert(xhr.responseText);
			}else{
				alert(‘出错了，Err‘+xhr.status);
			}
			
		}
	}
}