原生js的ajax数据渲染

最新推荐文章于 2024-08-20 10:25:59 发布

baibaibeaytiful

最新推荐文章于 2024-08-20 10:25:59 发布

阅读量3.9k

点赞数

分类专栏： web前端 javascript 文章标签： javascript 异步 ajax

本文链接：https://blog.csdn.net/wzdlovewen/article/details/52262055

版权

web前端 javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

ajax应用不只是页面功能的提升，也是性能优化的一种方式。

兼容这块的话就是其ajax对象，在ie和其他浏览器的不同，那么现在基本上w3c已经给出了兼容的写法

var xmlhttp;
if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');}

然后就是发送，和异步的填写

xmlhttp.open("GET","ajax.txt",true);
xmlhttp.send();

然后基于返回的参数值来写事件

if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
//这里面就是我们写的事件。
}

那么这个请求我们得到了什么?

xmlhttp.responseText

这个就是我们请求的东西，比如上面我们请求的对象是ajax.txt,那么我们的xmlhttp.resposeText就是请求的值。这个值就是整个txt所有的文字。如何这个text文件是一个html格式，我的意思不是说他是html文件，是里面的内容是一个html格式的字符串，那么直接插入到dom结构里面，那么浏览器会去渲染这个字符串，大到我们想要的效果。

那么渲染之后的元素我们能用js去获取嘛？

答案是能！一定能。然后你可以对请求过来的元素进行各种操作，改样式，那些都是你的事了。

如果你的txt里面是一个类似json对象的字符串，那么你想要以json对象格式输出的话，直接赋值是不行的，这里需要用到eval函数。这个函数就是执行这个函数传过来的字符串，将传过来的值当做js去执行，那么我们就得到了一个json对象。

当然jq对于ajax已经封装的很好了，各种参数已经满足了我们开发的需求，但是从进阶角度还是要看看这些值是如何转变的，况且，原生，速度快。

下面附上我测试的代码。

<!doctype>
<html>
	<head>
		<title>ajax</title>
		<meta charset="utf-8">
		<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
		<script>			
	function wzd(){
		console.log($('img').length);
	
	}	
		function ajax(){
			var xmlhttp;
			if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
			else{xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');}
			xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200)
			{ 
			var  aa=xmlhttp.responseText;			
			document.getElementById('ja').innerHTML=document.getElementById('ja').innerHTML+aa;		
				$('img').each(function(){
				this.οnlοad=function(){
				$(this).animate({'opacity':1},1000);
				}
				})			
			}
			}
			xmlhttp.open("GET","ajax.txt",true);
			xmlhttp.send();			
		}	
//这个是将字符串转变成json对象的函数		
		function strToJson(str){   
		var json = eval('(' + str + ')');   
		return json;   
		}   
			</script>
	</head>
	<body>
		<input type="text" id='ajax' value='ajax' οnclick='ajax()'><br>
		<div id='ja' style='width:500px; height:500px; background-color:blue;'>22</div>
		<input type='button' value='aa' οnclick="wzd()">
		
	</body>
</html>