ajax 底层源码解析

Posted 2020-09-23 每天都要进步一点点

对象: XMLHttpRequest

属性:
readyState
请求状态，开始请求时值为0直到请求完成这个值增长到4

responseText
目前为止接收到的响应体,readyState<3此属性为空字符串，=3为当前响应体，=4则为完整响应体

responseXML
服务器端相应，解析为xml并作为Document对象返回

status
服务器端返回的状态码，=200成功，=404表示“Not Found”

statusText
用名称表示的服务器端返回状态，对于“OK”为200，“Not Found”为400

方法:
 
setRequestHeader()
向一个打开但是未发生的请求设置头信息

open()
初始化请求参数但是不发送

send()
发送Http请求

abort()
取消当前相应

getAllResponseHeaders()
把http相应头作为未解析的字符串返回

getResponseHeader()
返回http相应头的值

 

事件句柄: 

onreadystatechange
每次readyState改变时调用该事件句柄，但是当readyState=3有可能调用多次

// javascript Document
var ajax={
	post:function(url,data,func){//导入3个参数
		//创建ajax对象
		var xhr=null;
		if(window.ActiveXObject){//处理兼容问题
			xhr = new ActiveXObject("Msxml2.XMLHTTP")||new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			xhr = new XMLHttpRequset();
		}
		//建立连接
		xhr.open("post",url,true);//method  url true=异步
		//发送请求
		xhr.setRequsetHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send(data);
		//获取响应
		xhr.onreadystatechange = function(){//判断 需满足两个条件
			if(xhr.readyState==4){
				if(xhr.status==200){
					var str = xhr.responseText;//str 为json数据
					if(typeof func=="function"){//判断func是否为函数，为函数时调用
						func(str);//回调函数
					}
				}
			}
		}
	},//","必须添加
	
	get:function(url,func){//导入两个参数
		//创建ajax对象
		var xhr = null;
		if(window.ActiveXObject){
			xhr = new ActiveXObject("Msxml2.XMLHTTP")||new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			xhr = new XMLHttpRequset();
		}
		//建立连接
		xhr.open("get",url,true);
		//发送请求
		xhr.send();
		//获取响应
		xhr.onreadystatechange = function(){
			if(xhr.readyState==4&&xhr.status==200){
				var str = xhr.responseText;
				if(typeof func == "function"){
					func(str);
				}
			}
		}
	}
}

 从代码我们看出：首先我们创建一个 XMLHttpRequest 对象（由于浏览器不同需要 相应判断处理），设置相应的请求信息（通过open来做，例如请求地址等 设置 ）；然后我们绑定 onreadystatechange 事件，在这个事件中我们根 据服务器返回状态的不同来做出不同处理，这其中主要是请求成功后接收相应的返回值来通过 javascript 对客户端做出相应操作（我 们只是使显示有关信息）；最后我们发送这个请 求（通过send方法）。