2021-06-20

最新推荐文章于 2024-10-16 08:40:07 发布

还在发呆么

最新推荐文章于 2024-10-16 08:40:07 发布

阅读量98

点赞数

分类专栏： Ajax 笔记文章标签： Ajax XMLHttpRequest 浏览器兼容性异步通信局部更新

本文链接：https://blog.csdn.net/qq_46073710/article/details/118073446

版权

笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

初识Ajax

1.Ajax对浏览器的兼容性
在IE中创建新的对象使用代码:

var request = new ActiveXObject("Msxml2.XMLHTTP.6.0");

2.在其他浏览器则基于XMLHttpRequest来创建对象:
Ajax技术的核心就是XMLHttpRequest对象

var request = new XMLHttpRequest();

3.服务器在对XMLHttpRequest对象发回响应时,该对象有许多属性可以用,浏览器会在不同阶段更新readyState属性的值,它有5个可能的值:

0代表未初始化
1表示正在加载
2表示加载完毕
3表示正在交互
4表示完成

4.示例代码如下:
1.getHTTPObject.js文件

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();
	}

2.addLoadEvent.js文件


function addLoadEvent (func) {
	var oldonload = window.onload;
	if(typeof window.onload!='function'){
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
		}	
	}
}

3.getNewContent.js文件

function getNewContent () {
	var request = getHTTPObject();
	if(request){
		request.open("GET","example.txt",true);
		request.onreadystatechange = function(){
			if(request.readyState==4){
				var para = document.createElement("p");
				var txt = document.createTextNode(request.responseText);
				para.appendChild(txt);
				document.getElementById("new").appendChild(para);
			}
		};
		request.send(null);
	}else{
		alert("Sorry,your browser does not support XMLHTTprequest");
	}
	alert("Function Done");
}
addLoadEvent(getNewContent);

4.example.txt文件(放置你想发送的文本内容),例如:

Hello World!

5.HTML文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax</title>
	</head>
	<body>
		<div id="new" style="border: 1px solid black;"></div>
			<script src="js/addLoadEvent.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/getHTTPObject.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/getNewContent.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

Ajax优势与不足

1.Ajax可以只更新页面的一小部分,其他内容不用重新加载
2.Ajax对页面的爱请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。利用Ajax, Web 应用可以呈现出功能丰富、交互敏捷、类似桌面应用般的体验，就像你使用谷耿地图时的感觉一样。
3.和任何新技术样, Ajax有它自己的适用范围。它依赖JavaScript,所以可能会有浏览器不支持它，而搜索引擎的蜘蛛程序也不会抓取到有关内容。