原生JavaScript之ajax总结

版权声明: https://blog.csdn.net/wlk2064819994/article/details/81138878

什么都不说,直接上两段代码,解开ajax的面纱,来看看原生js的ajax是如何工作的。

//ajax发送GET请求
function ajaxGet(url,callback){
	//第一步:创建XMLHttpRequest对象
	var request = new XMLHttpRequest();
	//第二步:指定请求路径和方式
	request.open("GET",url);
	//第三步:绑定请求状态发生改变时的处理函数
	request.onreadystatechange = function(){
		//第四步:指定请求成功时执行内容
		if(request.readyState === 4 && request.status === 200){
			var type = request.getRsponseHeader("Content-Type");
			if(type.indexof("xml") !== -1 && request.responseXML){
				callback(request.responseXML);
			}else if(type === "application/json"){
				callback(JSON.parse(request.responseText));
			}else{
				callback(request.responseText);
			}
		}
	}
	//正式发送ajax请求主体(备注:没有请求主体,即请求参数,可传null或者省略)
	request.send(null);
}

在ajax异步请求中,get和post请求用的比较多,所以本文就以这两种请求方式进行归纳。如上面一段代码所示,一个完整的原生JavaScript异步请求也就这么几步。只是在请求和响应时的各种数据编码格式的处理也就是请求头的处理要留心一些。其实在大部分的ajax请求时,你只需重点关注一下“Content-Type”这一项就行。上面给的是一个Get请求方式的例子

下面再附上一个POST方式的异步请求,方便比较。

//使用JSON编码主体发送一个http post请求
function ajaxJson(url,data,callback){
	//第一步:创建XMLHttpRequest对象
	var request = new XMLHttpRequest();
	//第二步:指定请求路径和方式
	request.open("POST",url);
	//第三步:绑定请求状态发生改变时的处理函数
	request.onreadystatechange = function(){
		//第四步:指定请求成功时执行内容
		if(request.readyState === 4 && request.status === 200){
			var type = request.getRsponseHeader("Content-Type");
			if(type.indexof("xml") !== -1 && request.responseXML){
				callback(request.responseXML);
			}else if(type === "application/json"){
				callback(JSON.parse(request.responseText));
			}else{
				callback(request.responseText);
			}
		}
	};
	//第五步:设置请求头信息,指定请求主体的编码
	request.setRequestHeader("Content-Type","applicaton/json");
	//第六步:正式发送ajax请求主体
	request.send(JSON.stringify(data));
}

仔细观察两种方式,可以发现,POST方式指定多了两点操作:1.设置请求头信息。2.发送的请求主体不再是null值。
现在两种方式的请求都给了一个还不错的例子。

那么接下来就正式总结一下我所理解的ajax吧。

ajax是一种异步请求数据的方式,在与服务器进行数据交互时不会导致页面重载,只是局部刷新。

ajax请求数据的第一步就是实例化XMLHttpRequest对象(以下简称XHR),这点非常简单,只是需要注意一点,在IE7之前有点不兼容(解决办法请自行查找)。

创建完XHR之后,就是调用XHR的open()方法指定请求方法(如:GET,POST等)和请求地址

如果请求需要设置相关头信息的话,现在时非常合适的时机(其实只要在send()执行之前都是可以的啦)。
比如:XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded")。这是对于用表单提交数据时需要设置的一种格式。

然后就是对请求得到响应后的处理设置好回调函数,要注意,这里是使用回调函数异步处理响应的,因为我们的请求现在还没有正式发送呢,何来响应不是吗。

最后就是正式发送我们的异步请求啦。

接下来我会再总结一下在ajax中的一些注意点,当做笔记以备查看。


1.open()方法的第一个参数指定HTTP请求方式,不区分大小写,但通常大家用大写字母来匹配HTTP协议。

2.GET请求绝对没有主体,所以应该传递null或省略这个参数。

3.POST请求通常是有请求主体的,同时由于请求参数的格式不同,所以应该匹配使用setRequestHeader()指定“Content-type”头信息。(这一点非常重要,因为当我们用不同的格式,比如:json,XML,纯文本,表单等,提交请求数据时服务器会根据我们指定的头信息去解析请求数据。常用的json和表单应该设置的头信息上文提到过,请自行查找。)

4.用表单提交请求时,我们应该序列化一下表单数据。序列化的方法有很多,比如formData()方法不过IE对的的兼容性不好,jQuery的serialize()方法等。

5.无论服务器响应的内容类型是什么,响应主体的内容都会保存到XHR对象的responseText和responseXML属性中,对于非XML格式的数据而言,responseXML的属性值将会是null。

6.最好在open方法之前指定onreadystatechange事件处理程序,这样能保证更好的浏览器兼容性(当然只是建议,我自己就不喜欢这条)。

7.在onreadystatechange事件处理函数中,不建议使用this去指代XHR对象,而是尽量直接使用XHR对象。
 

就这么多吧,如果看官有更好的关于原生JavaScript的ajax总结请不吝留言。

猜你喜欢

转载自blog.csdn.net/wlk2064819994/article/details/81138878