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

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

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

  首先先看实现代码

  html代码部分

  <!DOCTYPE html>

  <html>

  <head>

  <title>Previewing Links</title>

  <link rel="stylesheet"href="script05.css" rel="external nofollow" >

  <script src="script05.js"></script>

  </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>

  <p id="previewWin"> </p>

  </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;

  }

  }

  分析:

  1.

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

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

  allLinks[i].onmouseover = getPreview;

  }

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

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

  2.

  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位置供以后使用。

  3.

  function hidePreview() {

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

  }

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

  重新设置为隐藏。

  4.

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

  if (xhr.readyState == 4) {

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

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

  5.

  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。

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

[网页程序设计]相关栏目推荐
查看更多
上一篇:HTML5文本编辑器推荐_属于Web开发人员的HTML5编辑器 下一篇:PHP常用的关键字