ajax原生态写法

最新推荐文章于 2024-09-19 16:13:24 发布

租房请下载：房东直租APP

最新推荐文章于 2024-09-19 16:13:24 发布

阅读量694

点赞数

分类专栏： Ajax 文章标签： ajax jquery json xhr function

本文链接：https://blog.csdn.net/AinUser/article/details/71308204

版权

Ajax 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了一个使用原生AJAX而非jQuery封装的方法来从服务器获取数据并更新DOM的例子。通过点击事件触发AJAX请求，利用浏览器内置对象XMLHttpRequest实现GET请求，将返回的JSON数据解析并展示在表格中。

摘要由CSDN通过智能技术生成

这是ajax原生态的写法，并没有jquery进行封装：


   <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
  	<script type="text/javascript">
  	
  		$(function(){
  			$("#ajax").click(function(){
  				//创建xhr
  				var xhr;
  				if(window.ActiveXObject){//IE
					xhr=new ActiveXObject("Microsoft.XMLHTTP");
				}else if(window.XMLHttpRequest){//webkit,IE7+
					xhr=new XMLHttpRequest();
				}
  				//初始化xhr
  				xhr.open("get","${pageContext.request.contextPath}/ajax/query");
  				//发送请求
  				xhr.send();
  				//监听响应
  				xhr.onreadystatechange=function(){
  					if(xhr.readyState==4 && xhr.status==200){
  						var ret = xhr.responseText;
  						//解析json转换为js对象
  						var users = $.parseJSON(ret);
  						$("tbody>tr:gt(0)").remove();
  						for(var i=0;i<users.length;i++){
  							var id = users[i].id;
  							var name=users[i].name;
  							var birthday = users[i].birthday;
  							//dom显示更新
  							$("tbody").append(
  								"<tr>"+
  									"<td>"+id+"</td>"+
  									"<td>"+name+"</td>"+
  									"<td>"+birthday+"</td>"+
  								"</tr>"
  							);
  							
  						};
  						
  					};
  				};
  			});
  		});
  	</script>