原生js的Ajax实例

最新推荐文章于 2024-09-10 09:48:41 发布

tomorain23

最新推荐文章于 2024-09-10 09:48:41 发布

阅读量1.6k

点赞数 2

分类专栏：前端笔记文章标签： js Ajax 实例

本文链接：https://blog.youkuaiyun.com/Yuan_mingyu/article/details/99336811

版权

前端笔记专栏收录该内容

13 篇文章

订阅专栏

与jQuery不同，原生js的ajax的实现相比来说复杂一些，因为jquery中的$.ajax()方法已经把js的实现封装起来，使用起来更加方便。但是，原生js的实现过程，对于理解ajax，好像更清晰一些。

之前写过的jQuery的ajax实现：jQuery的Ajax实例（附完整代码）

这次使用原生js实现

实现过程（文末有完整代码）

以此实例为例：
在这里插入图片描述

1.创建XMLHttpRequest对象

这里的 XMLHttpRequest 是针对非IE浏览器而言的，对于IE浏览器，需要创建 ActiveXObject 对象
因此

//第一步：创建XMLHttpRequest对象
		var xmlHttp;
		if (window.XMLHttpRequest) {            //非IE
		    xmlHttp = new XMLHttpRequest();
		    console.log('创建了XMLHttpRequest对象');
		} else if (window.ActiveXObject) {       //IE
		    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		    console.log('创建了ActiveXObject对象');
		}

2.设置请求方式和url，即open()

在这里插入图片描述
async一般设置为异步方式，即true

//第二步：设置请求方式
		var url = "http://hebutgo.com:8080/maps/getMapsList";
		xmlHttp.open("GET", url, true);
		console.log('执行open()');

3.设置发送请求的内容，即send()

在这里插入图片描述
与$.ajax()中的data相似，不过send的内容是字符串形式，即把data中的json数组转化为一个字符串。
例如：

data：{
name：zhangsan
age：18
}

应拼接成为：(键值对之间用&连接)

data = 'name=zhangsan&age=18'

然后

//第三步：设置发送请求的内容
	xmlHttp.send(data);

本例中无需请求内容，，就直接

	xmlHttp.send();

4.回调函数

回调函数通过监听 readystate 和 status 值的变化，得到返回值，执行回调

与$.ajax()的success回调不同，js的ajax从请求初始化到发送请求，再到请求结束，readystate 和 status的值时钟在发生着变化，当 readystate=4 并且 status=200时，标志着请求成功，可以执行回调内容，其余情况均为发生错误

可以理解为： readystate=4 && status=200 等价于 jquery中的 success 回调

对于返回值
包含 responseText 和 responseXML 两种
这个的选择要看服务器预先设定的返回值是什么类型的

前者拿到的是字符串；后者是XML

1.如果是字符串，处理后可以赋值给html中的标签，或者构造节点，显示到界面
2.如果是XML，则需要根据具体内容，添加到相应的html标签中

//第四步：回调函数
		  xmlHttp.onreadystatechange = function() {
			//console.log('执行了回调函数,此时readystate为'+xmlHttp.readyState+' status为'+xmlHttp.status);
		    if (xmlHttp.readyState == 4) {
		        if (xmlHttp.status == 200) {
		            var obj = document.getElementById('getData');
		            //console.log(xmlHttp.responseText);
		            //console.log('拿到了返回数据');
		            //console.log(JSON.parse(xmlHttp.responseText));
		            var res = JSON.parse(xmlHttp.responseText).result;
		            for(var i=0;i<res.length;i++)
		            {
		            	var node = document.createElement('tr');
		            	node.innerHTML = '<td>'+res[i]['申请人省份']+'</td><td>'+res[i]['counts']+'</td>'
		            	obj.appendChild(node);			            
		            }           
		        } else {
		            alert("AJAX服务器返回错误！");
		        }
		    }

本例中拿到的是responseText，为字符串，但是通过打印可以看出，结构是json数组转成的一个大字符串。
如下：
{“result”:[{“申请人省份”:“0”,“counts”:1553},…,{“申请人省份”:“黑龙江省”,“counts”:215}],“reason”:"",“status”:“success”}

通过

JSON.parse(xmlHttp.responseText)

转成
在这里插入图片描述
之后通过js添加节点，连接在 < table > 标签中

状态值和状态码

状态值：readystate

0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用

状态码：status

1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败

具体取值：（常见）

200——交易成功
400——错误请求，如语法错误
403——请求不允许
404——没有发现文件、查询或URl
500——服务器产生内部错误
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

测试：

我在代码中加入了console打印，可以看出二者的状态变化
虽然说onreadystatechange可以随时监听readystate的变化，但是实际能打印出来的仅有2、3、4三个状态。
在这里插入图片描述
如果调整代码顺序
把onreadystatechange放在open()和send()执行之前，结果如下

结果与理论上的状态值定义不太相同，这里还没搞太明白。。

实例完整代码

<!DOCTYPE html>
<html>
<head>
	<title>
		ajax_js
	</title>
	<style type="text/css">
		#getData th{
			width: 100px;
		}
		#getData td{
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="main">
		<div>
			<button onclick="request()">Request</button>
		</div>
		<table id="getData">
			<tr>
				<th>
				申请人省份
				</th>
				<th>
					人数
				</th>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
	
		function request(){
			//第一步：创建XMLHttpRequest对象
			var xmlHttp;
			if (window.XMLHttpRequest) {            //非IE
			    xmlHttp = new XMLHttpRequest();
			    console.log('创建了XMLHttpRequest对象');
			} else if (window.ActiveXObject) {       //IE
			    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			    console.log('IE');
			    console.log('创建了ActiveXObject对象');
			}
					 
			//第二步：设置请求方式
			var url = "http://hebutgo.com:8080/maps/getMapsList";
			xmlHttp.open("GET", url, true);
			console.log('执行了open()');
			
			//第三步：设置发送请求的内容
			xmlHttp.send();
			console.log('调用了send()');

			//第四步：回调函数
			xmlHttp.onreadystatechange = function() {
				console.log('执行了回调函数,此时readystate为'+xmlHttp.readyState+' status为'+xmlHttp.status);
			    if (xmlHttp.readyState == 4) {
			        if (xmlHttp.status == 200) {
			            var obj = document.getElementById('getData');
			            console.log('拿到了返回数据');
			            console.log(JSON.parse(xmlHttp.responseText));
			            var res = JSON.parse(xmlHttp.responseText).result;
			            for(var i=0;i<res.length;i++)
			            {
			            	var node = document.createElement('tr');
			            	node.innerHTML = '<td>'+res[i]['申请人省份']+'</td><td>'+res[i]['counts']+'</td>'
			            	obj.appendChild(node);			            
			            }
			        } else {
			            alert("AJAX服务器返回错误！");
			        }
			    }
		}
        	}
	</script>
</body>
</html>