最简单的ajax，ajax读取页面内容

最新推荐文章于 2022-03-06 10:18:05 发布

mush_me

最新推荐文章于 2022-03-06 10:18:05 发布

阅读量242

点赞数

分类专栏： javascript相关文章标签： Ajax 百度 HTML QQ 浏览器

本文链接：https://blog.csdn.net/mush_me/article/details/83780016

版权

javascript相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

总有人把ajax搞得异常复杂，其实蛮简单的，给新手一个信心，以下是一个简单的例子，通过ajax来加载其它url的内容。
ajax.html，主页面


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="ajax.js"></script>
<style type="text/css">
#previewWin{
	background-color:#FF9;
	widht:400px;
	height:100px;
	padding:5px;
	position:absolute;
	visibility:hidden;
	top:10px;
	left:10px;
	border:1px #CC0 solid;
	clip:auto;
	overflow:hidden;
}
</style>
</head>

<body>
直接用浏览器打开是看不到ajax请求的，需要放到服务器目录下才可以哦。
如有问题QQ：45886484
	[list]
		[*][url=test.html]test.html[/url]

		[*][url=test2.html]test2.html[/url]

		[*][url=http://www.baidu.com]百度[/url]ajax不能跨域，所以这里得不到百度的页面

	[/list]
	<div id="previewWin"></div>
</body>
</html>

test.html，用来被主页面加载的内容


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    这里是test.html的内容，可以被读取 <br>
  </body>
</html>

ajax.js，加载内容的js


window.onload=initAll;
var xhr=false;
var xPos,yPos;

function initAll(){
	var allLinks=document.getElementsByTagName("a");
	for(var i=0;i<allLinks.length;i++){
		allLinks[i].onmouseover=showPreview;
		allLinks[i].onmouseout=hidePreview;
	}
}

function showPreview(evt){
	getPreview(evt);
	return false;
}
function hidePreview(){
	document.getElementById("previewWin").style.visibility="hidden";
}
function getPreview(evt){
	if(evt){
		var url=evt.target;
	}else{
		evt=window.event;
		var url=evt.srcElement;
	}
	xPos=evt.clientX;
	yPos=evt.clientY;

	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{
		if(window.ActiveXObject){
			try{
				xhr=new ActiveXObject("Microsoft.XMLHTTP");			
			}
			catch(e){}
		}
	}

	if(xhr){
		xhr.onreadystatechange=showContents;
		xhr.open("GET",url,true);
		xhr.send(null);
	}else{
		alert("不能发送ajax请求");
	}
}

function showContents(){
	var preWin=document.getElementById("previewWin");
	if(xhr.readyState==4){
		if(xhr.status==200){
			preWin.innerHTML=xhr.responseText;
		}else{
			preWin.innerHTML="ajax请求出错";
		}
		preWin.style.top=parseInt(yPos)+2+"px";
		preWin.style.left=parseInt(xPos)+2+"px";
		preWin.style.visibility="visible";
		preWin.onmouseout=hidePreview;
	}
}