ajax原生态写法

前端之家收集整理的这篇文章主要介绍了ajax原生态写法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是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>

猜你在找的Ajax相关文章