利用AJAX實(shí)現(xiàn)鼠標(biāo)懸浮獲取值的代碼
更新時(shí)間：2009年12月04日 13:04:37 作者：
ajax實(shí)現(xiàn)將鼠標(biāo)放到圖標(biāo)上，下方會(huì)顯示和該圖有關(guān)的信息
客戶端代碼mouseover.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠標(biāo)懸浮測(cè)試</title>
</head>
<script type="text/javascript" language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function sendRequest(t){
var id = t.id
createXMLHttpRequest();
var url = "mouseover_check.php?page=" +t.id ;
xmlHttp.onreadystatechange = callback;
xmlHttp.open('GET',url,true);
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
document.getElementById("show").innerHTML = xmlHttp.responseText;
}
}
}
</script>
<body>
<p>
<input type="text" value="here" id="1" onmouseover="sendRequest(this)" />
</p>
<p><br/>
<input type="text" value="haha" id="2" onmouseover="sendRequest(this)" />
</div>
</p>
<p></p>
<span id="show"></span>
</body>
</html>
服務(wù)器端代碼：
mouseover_check.php
<?php
header("Content-type:text/html;charset=gb2312");
header("cache-control:no-cache,must-revalidate");
$name = $_GET['page'];
if($name == '1'){
echo "111";
}
else{
echo "222";
}
?>
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠標(biāo)懸浮測(cè)試</title>
</head>
<script type="text/javascript" language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function sendRequest(t){
var id = t.id
createXMLHttpRequest();
var url = "mouseover_check.php?page=" +t.id ;
xmlHttp.onreadystatechange = callback;
xmlHttp.open('GET',url,true);
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
document.getElementById("show").innerHTML = xmlHttp.responseText;
}
}
}
</script>
<body>
<p>
<input type="text" value="here" id="1" onmouseover="sendRequest(this)" />
</p>
<p><br/>
<input type="text" value="haha" id="2" onmouseover="sendRequest(this)" />
</div>
</p>
<p></p>
<span id="show"></span>
</body>
</html>
服務(wù)器端代碼：
mouseover_check.php
復(fù)制代碼 代碼如下:
<?php
header("Content-type:text/html;charset=gb2312");
header("cache-control:no-cache,must-revalidate");
$name = $_GET['page'];
if($name == '1'){
echo "111";
}
else{
echo "222";
}
?>
相關(guān)文章
pushState、replaceState、onpopstate 實(shí)現(xiàn)Ajax頁面的前進(jìn)后退刷新
這篇文章主要介紹了pushState、replaceState、onpopstate 實(shí)現(xiàn)Ajax頁面的前進(jìn)后退刷新的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
AJAX初體驗(yàn)之上手篇...2006-07-07
Ajax上傳實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理的方法
這篇文章主要介紹了Ajax上傳實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理的方法,實(shí)例分析了Ajax請(qǐng)求及java處理并返回服務(wù)器端數(shù)據(jù)請(qǐng)求的相關(guān)技巧2015-07-07
今天小編就為大家分享一篇快速解決ajax返回值給外部函數(shù)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
讓ajax更加友好的實(shí)現(xiàn)方法(實(shí)時(shí)顯示后臺(tái)處理進(jìn)度。)
我們能否讓ajax更加友好點(diǎn)，實(shí)時(shí)顯示服務(wù)器處理的進(jìn)度了？這在一些長(zhǎng)時(shí)間的請(qǐng)求中尤其重要，比如上傳文件、發(fā)送郵件、批量處理數(shù)據(jù)。2010-06-06
本文給大家分享的是原生javascript結(jié)合ajax實(shí)現(xiàn)的異步交互的方法和代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2016-01-01
Ajax創(chuàng)建XMLHttp對(duì)象的完美兼容性代碼
Ajax創(chuàng)建XMLHttp對(duì)象的完美兼容性代碼，需要的朋友可以參考下。2011-11-11
建立XMLHttpRequest對(duì)象...2006-07-07
默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行2012-04-04
這篇文章主要介紹了全面解析Ajax和jsonp使用總結(jié) 的相關(guān)資料,需要的朋友可以參考下2017-10-10