DOM编程艺术之Ajax

最新推荐文章于 2019-06-24 16:35:43 发布

原创最新推荐文章于 2019-06-24 16:35:43 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

Ajax的作用是浏览器和服务器之间的桥梁。
Ajax的优势在于不需要刷新整个页面就可以局部刷新的同时，不影响后续代码正常执行，能够给用户带来很顺畅的使用体验。
Ajax主要依赖服务器端的处理。
同源策略：使用xhr对象发送的请求，只能访问和其所在的HTML文件处于同一个域中的数据，不能像向其他域发送请求。
某些浏览器存在限制ajax请求中使用到的协议的问题，比如Safari和Chrome中运行以下代码，提示Cross origin requests are only supported for HTTP. 而FF中可以正常显示。

经测试，getNewContent.js中的“function done”先于“Response Received”弹出来，体现了异步性，说明脚本在将xhr请求送出去之后，没有等待响应，而是继续执行后续内容。

1、Ajax.html

<!DOCTYPE html>
<html>
<head>
	<title>模拟Ajax</title>
	<meta charset="utf-8">
</head>
<body>
<div id="new"></div>
<script src="js/addLoadEvent.js"></script>
<script src="js/getHTTPObject.js"></script>
<script src="js/getNewContent.js"></script>
</body>
</html>

2、test.txt

This was loaded asynchonously!

3、addLoadEvent.js

//添加事件
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (window.onload != "function") {
		window.onload = func;
	}else{
		oldonload();
		func();
	}
}

4、getHTTPObject.js

//生成Ajax的核心对象，兼容IE
function getHTTPObject(){
	if (typeof XMLHttpRequest == "undefined") {
		XMLHttpRequest = function(){
			try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
			 catch(e){}
			try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
			 catch(e){}
			try{return new ActiveXObject("Msxml2.XMLHTTP");}
			 catch(e){}
			return false;
		}
	}
	return new XMLHttpRequest();
}

5、getNewContent.js

//访问返回的数据，并显示在页面
function getNewContent(){
	var xhr = getHTTPObject();
	if (xhr) {
		xhr.open('GET','test.txt',true);
		xhr.onreadystatechange = function(){
			//等于4表示已经完成响应，可以访问服务器端返回的数据
			if (xhr.readyState == 4) {
				alert("Response Received");
				var p = document.createElement('p');
				var t = document.createTextNode(xhr.responseText);
				p.appendChild(t);
				var d = document.getElementById('new');
				d.appendChild(p);
			}
		};
		xhr.send();
	}else{
		alert("sorry,your browser doesn\'t support XMLHttpRequest.")
	}
	alert("function done!");
}
addLoadEvent(getNewContent);