揭秘利用ajax实现预览链接看链接的内容

2016-11-09 00:00:00临风网页程序设计

　　今天由yjbys小编给大家带来用ajax实现预览链接可以看到链接的内容的方法，希望对大家有所启发。想了解更多相关资讯请持续关注我们应届毕业生培训网。

　　首先先看实现代码

　　html代码部分

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>Previewing Links</title>

　　</head>

　　<body>

　　<h2>A Gentle Introduction to JavaScript</h2>

　　<ul>

　　<li><a href="jsintro/2000-08.html" rel="external nofollow" >August column</a></li>

　　<li><a href="jsintro/2000-09.html" rel="external nofollow" >September column</a></li>

　　<li><a href="jsintro/2000-10.html" rel="external nofollow" >October column</a></li>

　　<li><a href="jsintro/2000-11.html" rel="external nofollow" >November column</a></li>

　　</ul>

　　</body>

　　</html>

　　这个CSS设置预览弹出窗口的样式

　　#previewWin {

　　background-color: #FF9;

　　width: 400px;

　　height: 100px;

　　font: .8em arial, helvetica, sans-serif;

　　padding: 5px;

　　position: absolute;

　　visibility: hidden;

　　top: 10px;

　　left: 10px;

　　border: 1px #CC0 solid;

　　clip: auto;

　　overflow: hidden;

　　}

　　#previewWin h1, #previewWin h2 {

　　font-size: 1.0em;

　　}

　　这个JavaScript进行服务器请求并且显示弹出窗口

　　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 = getPreview;

　　}

　　function getPreview(evt) {

　　if (evt) {

　　var url = evt.target;

　　}

　　else {

　　evt = window.event;

　　var url = evt.srcElement;

　　}

　　xPos = parseInt(evt.clientX);

　　yPos = parseInt(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("Sorry, but I couldn't create an XMLHttpRequest");

　　}

　　function hidePreview() {

　　document.getElementById("previewWin").style.visibility = "hidden";

　　}

　　function showContents() {

　　var prevWin = document.getElementById("previewWin");

　　if (xhr.readyState == 4) {

　　if (xhr.status == 200) {

　　prevWin.innerHTML = xhr.responseText;

　　}

　　else {

　　prevWin.innerHTML = "There was a problem with the request " + xhr.status;

　　}

　　prevWin.style.top = yPos+2 + "px";

　　prevWin.style.left = xPos+2 + "px";

　　prevWin.style.visibility = "visible";

　　prevWin.onmouseout = hidePreview;

　　}

　　分析：

　　var allLinks = document.getElementsByTagName("a");

　　for (var i=0; i< allLinks.length;i++) {

　　allLinks[i].onmouseover = getPreview;

　　}

　　这是initAll()函数的内容，它遍历页面上的所有链接，并且在每个链接上添加onmouseover事件

　　处理程序。这个事件处理程序将（你下面将看到的）读取目标页面并且向（可能的）访问者显示预览。

　　if (evt) {

　　var url = evt.target;

　　}

　　else {

　　evt = window.event;

　　var url = evt.srcElement;

　　}

　　xPos = parseInt(evt.clientX);

　　yPos = parseInt(evt.clientY);

　　在getPreview()中，首先需要查明要读取哪个文件，这就要查看事件的属性。根据访问者使用的

　　浏览器不同，URL保存在evt.target或window.event.srcElement中。获得了URL之后，就可以获得

　　鼠标的x和y位置供以后使用。

　　function hidePreview() {

　　document.getElementById ("previewWin").style.visibility = "hidden";

　　}

　　如果打算显示预览，将需要再次隐藏它，对吗？hidePreview()函数的作用是将预览窗口的可见性

　　重新设置为隐藏。

　　var prevWin = document.getElementById("previewWin");

　　if (xhr.readyState == 4) {

　　使用Ajax读取文件之后，现在进入了showContents()函数。我们将previewWin元素存储在prevWin

　　中以备后用。当xhr.readyState为4时，就该显示预览了。

　　if (xhr.status == 200) {

　　prevWin.innerHTML = xhr.responseText;

　　}

　　else {

　　prevWin.innerHTML = "There was a problem with the request " + xhr.status;

　　}

　　prevWin.style.top = yPos+2 + "px";

　　prevWin.style.left = xPos+2 +"px";

　　prevWin.style.visibility ="visible";

　　prevWin.onmouseout = hidePreview;

　　如果一切正常，那么xhr.status为200，而且我们希望放在prevWin.innerHTML中的数据已经存

　　在于xhr.responseText中了。如果出现了问题，就在prevWin.innerHTML中放一个错误消息。

　　在此之后，需要查明要在哪里显示预览窗口，也就是当前的鼠标x和y坐标。这个窗口是一个弹

　　出窗口，所以将它放在触发该调用的当前鼠标位置向下和向右一点儿的地方（向下和向右各2像素）。

　　最后，将prevWin设置为可见，并且让JavaScript知道，当鼠标离开预览窗口时，应该隐藏prevWin。

[网页程序设计]相关推荐

`[网页程序设计]热门推荐`

[网页程序设计]最新文章

[网页程序设计]相关栏目推荐