Using AJAX to implement a preview link you can see the link content _ajax related

First look at the implementation code

HTML code Section

<! DOCTYPE html>
 
 

This CSS setting previews the pop-up window style

#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;
}

This javascript makes the server request and displays the pop-up window

Window.onload = Initall;
var xhr = false;
var xpos, YPos; function Initall () {var alllinks = document.getElementsByTagName ("a"); for (var i=0; i< alllinks.length; i++) {Alllin
Ks[i].onmouseover = GetPreview; } function GetPreview (evt) {if (evt) {var url = evt.target;} else {evt = window.event; var url = evt.srcelement;} x
Pos = 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.onreadystatechang
e = 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 = =) {prevwin.innerhtml = Xhr.responsetext;} else {Prevwin.innerhtml = "There is 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; }
}

Analysis:

1.

var alllinks = document.getElementsByTagName ("a");
for (var i=0; i< alllinks.length;i++) {
alllinks[i].onmouseover = GetPreview;
}

This is the content of the Initall () function that iterates through all the links on the page and adds onmouseover events to each link
Handler. The event handler reads the target page (as you will see below) and displays a preview to the (possible) visitor.
2.

if (evt) {
var url = evt.target;
}
else {
evt = window.event;
var url = evt.srcelement;
}
Xpos = parseint (evt.clientx);
YPos = parseint (Evt.clienty);

In GetPreview (), you first need to find out which file you want to read, and that's the view of the event's properties. Based on what the visitor uses
Unlike browsers, URLs are stored in evt.target or window.event.srcElement. Once you have the URL, you can get
The X and Y positions of the mouse are available for later use.

3.

function Hidepreview () {
document.getElementById ("Previewwin"). Style.visibility = "hidden";
}

If you're going to show a preview, you'll need to hide it again, right? The role of the Hidepreview () function is to make the visibility of the preview window
Reset to hidden.
4.
var Prevwin = document.getElementById ("Previewwin");
if (xhr.readystate = = 4) {
After reading the file using AJAX, you are now entering the showcontents () function. We store the Previewwin elements in the Prevwin
To prepare for later use. When Xhr.readystate is 4 o'clock, the display preview is displayed.
5.

if (Xhr.status =) {
prevwin.innerhtml = xhr.responsetext;
}
else {
prevwin.innerhtml = "There is 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;

If everything works, then Xhr.status is 200, and the data we want to put in prevwin.innerhtml has been saved
lies in the Xhr.responsetext. If there is a problem, put an error message in the prevwin.innerhtml.
After that, you need to find out where to display the preview window, which is the current mouse x and y coordinates. This window is a bullet
Out of the window, place it at the current mouse position that triggers the call down and to the right (2 pixels down and to the right).
Finally, set the Prevwin to visible and let JavaScript know that the Prevwin should be hidden when the mouse leaves the preview window.