Home > Article > Web Front-end > Use ajax to preview the link to see the content of the link
Use ajax to preview the link to see the content of the link
- 亚连Original
- 2018-05-25 15:47:181525browse
Use CSS to set the style of the preview pop-up window, use JavaScript to make server requests and display the pop-up window. Friends in need can refer to it
First look at the implementation code
html code part
<!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>
This CSS sets the style of the preview pop-up window
#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 a server request and Show 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++) {
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;
}
}
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, which iterates through all links on the page and adds an onmouseover event
handler on each link. This event handler will (as you'll see below) read the target page and display a preview to (possible) visitors.
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, so you need to check the properties of the event . Depending on the
browser used by the visitor, the URL is saved in evt.target or window.event.srcElement. Once you have the URL, you can get the x and y position of the
mouse for later use.
3.
function hidePreview() {
document.getElementById ("previewWin").style.visibility = "hidden";
}
If you plan to show the preview, you will need to hide it again, right? The function of the hidePreview() function is to reset the visibility of the preview window to hidden.
4.
var prevWin = document.getElementById("previewWin");
if (xhr.readyState == 4) {
After using Ajax to read the file, now enter the showContents() function . We store the previewWin element in prevWin
for later use. When xhr.readyState is 4, it's time to show the preview.
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;
If everything is OK, then xhr.status is 200 and the data we want to put in prevWin.innerHTML has The is stored in xhr.responseText. If something goes wrong, put an error message in prevWin.innerHTML.
After this, you need to find out where you want to display the preview window, which is the current mouse x and y coordinates. This window is a pop-up window, so place it slightly down and to the right of the current mouse position that triggered the call (2 pixels down and 2 pixels to the right).
Finally, set prevWin to visible and let JavaScript know that prevWin should be hidden when the mouse leaves the preview window.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
SSH online mall uses ajax to complete asynchronous verification of user namesAjax asynchronous submission Example analysis of line wrapping problem of data return valueAnalysis of order problem of returning data in ajax request
The above is the detailed content of Use ajax to preview the link to see the content of the link. For more information, please follow other related articles on the PHP Chinese website!