ajax實(shí)現(xiàn)點(diǎn)擊不同的鏈接讓返回的內(nèi)容顯示在特定div里

更新時(shí)間：2014年06月23日 11:32:04 投稿：whsnow

過ajax實(shí)現(xiàn)在一個(gè)web頁面點(diǎn)擊不同的鏈接，然后將返回的結(jié)果顯示在該頁面固定的div里

/* 以下代碼通過ajax實(shí)現(xiàn)在一個(gè)web頁面點(diǎn)擊不同的鏈接，然后將返回的結(jié)果顯示在該頁面固定的div里。 */

<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script language="javascript"> 
var http_request = false; 
function createRequest(url,objID){ 
http_request = false; 
if(window.XMLHttpRequest){ //非IE瀏覽器 
http_request = new XMLHttpRequest(); 
if(http_request.overrideMimeType){ 
http_request.overrideMimeType("text/xml"); 
} 
}else if(window.ActiveXObject){ //IE瀏覽器 
try{ 
http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
}catch(e){ 
try{ 
http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(e){} 
} 
} 
if(!http_request){ 
alert("無法創(chuàng)建XMLHTTP實(shí)例"); 
return false; 
} 
http_request.open("GET",url,true); 
http_request.send(null); 

var obj = document.getElementById(objID); 
http_request.onreadystatechange = function(){ 
if(http_request.readyState == 4){ 
if(http_request.status == 200){ 
obj.innerHTML = http_request.responseText; 
}else{ 
alert('您請求的頁面發(fā)現(xiàn)錯誤！'); 
} 
} 
} 
} 
</script> 
</head> 

<body onload="createRequest('content1.html','show')"> 
<div align="center"> 
<a href="content1.html" onclick="createRequest('content1.html','show');return false;">no1</a> | 
<a href="content2.html" onclick="createRequest('content2.html','show');return false;">no2</a> | 
<a href="content3.html" onclick="createRequest('content3.html','show');return false;">no3</a> 
</div> 
<div id="show" align="center"></div> 
</body> 
</html>

您可能感興趣的文章:

相關(guān)文章

Ajax跨域訪問Cookie丟失問題的解決方法
這篇文章主要介紹了Ajax跨域訪問Cookie丟失問題的解決方法,需要的朋友可以參考下
2017-02-02
Ajax方式提交帶文件上傳的表單及隱藏iframe應(yīng)用
一般的表單都是通過ajax方式提交，所以碰到帶文件上傳的表單就比較麻煩,基本原理就是在頁面增加一個(gè)隱藏iframe，然后通過ajax提交除文件之外的表單數(shù)據(jù),感興趣的你不妨了解一下，或許本文對你有所幫助
2013-01-01
AJAX實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出詳細(xì)介紹示例
鼠標(biāo)經(jīng)過彈出詳細(xì)內(nèi)容的效果想必大家都有見到過吧，其實(shí)很簡單，在本文為大家介紹下使用ajax實(shí)現(xiàn)此效果，感興趣的朋友可以參考下
2013-09-09
給Ajax返回的HTML標(biāo)簽動態(tài)添加樣式的方法
這篇文章主要介紹了給Ajax返回的HTML標(biāo)簽動態(tài)添加樣式的方法,需要的朋友可以參考下
2017-04-04
$.ajax()方法進(jìn)行網(wǎng)頁間傳值示例
這篇文章主要介紹了$.ajax()方法進(jìn)行網(wǎng)頁間傳值的具體實(shí)現(xiàn),需要的朋友可以參考下
2014-04-04
Ajax使用JSON數(shù)據(jù)格式案例
JSON是一種簡單的數(shù)據(jù)格式，比xml更輕巧。其規(guī)則很簡單，對象是一個(gè)無序的名稱/值對集合，下面有個(gè)案例，大家可以感受下
2014-07-07
Ajax商品分類三級聯(lián)動的簡單實(shí)現(xiàn)(案例)
下面小編就為大家?guī)硪黄狝jax商品分類三級聯(lián)動的簡單實(shí)現(xiàn)(案例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
H5移動開發(fā)Ajax上傳多張Base64格式圖片到服務(wù)器
這篇文章主要為大家詳細(xì)介紹了H5移動開發(fā)Ajax上傳多張Base64格式圖片到服務(wù)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
[js]輕便的XMLHttpRequest應(yīng)用函數(shù)：downloadUrl()
[js]輕便的XMLHttpRequest應(yīng)用函數(shù)：downloadUrl()...
2007-04-04
Jquery版本導(dǎo)致Ajax不執(zhí)行success回調(diào)函數(shù)
這篇文章主要介紹了Jquery Ajax不執(zhí)行success回調(diào)函數(shù)的原因及解決方法
2014-04-04