揭秘利用ajax實現預覽鏈接看鏈接的內容

時間：2024-10-19 13:37:09 AJAX 我要投稿

相關推薦

　　今天由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。

【揭秘利用ajax實現預覽鏈接看鏈接的內容】相關文章：

如何利用錨文本鏈接進行基本優化?03-22

word清除超鏈接03-31