Use ajax to preview the link to see the content of the link-JS Tutorial-php.cn

Use ajax to preview the link to see the content of the link

亚连

Release： 2018-05-25 15:47:18

Original

1594 people have browsed it

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>

Copy after login

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

Copy after login

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

Copy after login

Analysis:

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

Copy after login

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

Copy after login

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.

function hidePreview() {
document.getElementById ("previewWin").style.visibility = "hidden";
}

Copy after login

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;

Copy after login

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.

SSH online mall uses ajax to complete asynchronous verification of user names

Ajax asynchronous submission Example analysis of line wrapping problem of data return value

Analysis 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!