Ajax服务请求原理 简单总结

Posted 2020-08-13

　　刚开始以为Ajax是一种新的语言，接触之后才知道，ajax是用于服务器交换数据并更新部分网页的Web应用程序的技术。

第一次看到Ajax请求代码时，感觉一脸萌逼，这些代码竟然把后台数据请求过来了，神奇啊。但是写着写着第二天再写的时候发现，代码一堆，根本没记住。

　　没想到好办法，老办法，抄了十来遍，其实也就是钱三遍在抄，后边直接默写出来了。这才捋顺了思路。整理了一下想法，现在把这些想法分享一下。先把代码献上，虽然很俗套。

/**********请求流程************/
1、创建请求对象
 var xhr;
 if(window.XMLHttpRequest){
 	xhr = new XMLHttpRequest();
 }else if(window.ActiveXObject){
 	var versionArr = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
 	for(var tempVersion of versionArr){
 		xhr = new ActiveXObject[tempVersion];
 		if(xhr){
 			break
 		}
 	}
}else{
     throw new Error("您的浏览器版本过低")
}
 // 2建立连接
xhr.open("GET","url")
 // 3发送请求
xhr.send(null)
// 4接收响应
xhr.onreadystatechange = function(){
     if(xhr.readyState == 4&& xhr.status ==200){
 	var rootObj = JSON.parse(xhr.responseText)
		……………………
     }
 }

　　来，刚看完代码，这里先抛开代码。就事论代码，先从这件事开始，当你想要请求到后台数据，首先你能想到要去做什么？别说创建请求实例，一步一步按正常=逻辑倒着来。这时你应该想到肯定要先去发送请求了。那么问题来了，从哪里发送请求呢？这时候就要去想办法找这个能发送请求的东西了，然而并没有。这时候就要拿出曾经练得的一首好本领——造对象。没有请求的实例，就要先造出来一个请求实例，这就是第一步，当然了，有了他就可以往下进行了，然而发送请求也并不是随便就让发的，就像打电话，首先你得去开启电话，才可以去拨号聊天，这就是第二步，去打开一个连接，然后再进行点击拨号，发送出去你按下的号码，这就是第三部，发送请求，接下来就要处理收到的回复了。

　　下面再一步一步简单解析一下

创建XMLHttpRequest请求对象，Ajax编程是通过这个对象来进行的。
由于各大厂商浏览器对XMLHttpRequest对象支持不同，尤其是IE...这里需要对不同浏览器版本进行兼容考虑。
现在大部分主流浏览器都能够支持XMLHttpRequest对象
直接使用 new XMLHttpRequest()作为请求对象;
下面是经典的IE6支持类型 new ActiveXObject("Msxml2.XMLHTTP");
最后是IE6以下支持类型new ActiveXObject("Microsoft.XMLHTTP");

当然了也有这些根本都不支持的顽固份子。。。。直接抛出错误给他们咯

 

然后就是打开链接 open（method,url,flag） 参数method:GET 或者POST 参数url：请求服务器的路径 参数flag 是否异步请求，现在一般都是异步啦，不设置的话会默认异步。

接下来是发送请求send() ，这里要根据请求方式不同采取发送不同的请求，如果是GET请求，send方法内的参数写一个null就行。但如果是post类型的请求，请求带有参数的haunted。这个参数要写到send方法内发送出去，另外还要设置请求头 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")请求头根据实际请求不同设置的类型页不一样，这里只写一个简单示例。

　　最后一步就是接受服务器响应 可以通过控制台或者警告框测试，会有四次输出信息，因此便有了几种不同的对象状态码：

0：未初始化完成，这时只是创建了XMLHttpRequest对象，未调用open方法
1：初始化已完成，请求开始，开始调用open方法，未调用send方法
2：请求发送，就是说已经调用了send方法
3：开始接收服务器的响应。
4：读取接收服务器响应后返回的数据。（响应结束）

onreadystatechange事件会在234时被处罚。我们使用的时候一般只是关心第四部，到了第四部，才开始进行数据接收处理，当然了，进行到第四部也不一定意味着就大功告成了，还要看一下服务器响应状态；一般状态码返回值 200 404 500，

200是正常响应，还有令人头疼的的404，找不到要访问的网页，最令人崩溃的就是500了，服务器崩了。。。

这里我们可以利用请求对象的status属性查看服务器状态码；当进行到第四步且服务器状态码是200时，就是我们获取到数据开始请求之时。

 

第一次发文章，不熟悉套路 ，有问题的话我上线会及时回复的。