ajax.js內容
function ajax(url,fnWin,fnFaild){ //1.創建ajax對象 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //2.與服務器建立連接 xhr.open("GET",url,true); //3.發送請求 xhr.send(); //4.接收服務器返回的信息 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ fnWin && fnWin(xhr.responseText); }else{ fnFaild && fnFaild(); } } } }
實例一，獲取txt文件內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width:300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="button" name="" id="" value="按鈕一" />
<input type="button" name="" id="" value="按鈕二" />
<input type="button" name="" id="" value="按鈕三" />
<div id="box"></div>
</body>
</html>
<script type="text/javascript" src="js/ajax.js" ></script>
<script type="text/javascript">
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("box");
for(var i = 0;i < oBtn.length;i ++){
oBtn[i].index = i;
oBtn[i].onclick = function(){
ajax(this.index + 1 + ".txt",function(str){
oDiv.innerHTML = str; })
}
}
</script>
效果圖如下↓
實例二，通過ajax訪問服務器端的abc.txt文件，並實現無刷新實時更新內容↓
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>通過ajax訪問服務器端的abc.txt文件</p>
<input type="button" name="btn" id="btn" value="讀取文件" />
<div id="box">
</div>
</body>
</html>
<script type="text/javascript" src="js/ajax.js" ></script>
<script type="text/javascript">
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("box");
oBtn.onclick = function(){
document.title = "abc.txt?" + new Date().getTime();
ajax("abc.txt?t=" + new Date().getTime(),function(str){ //？后的內容會被瀏覽器忽略，以此實現實時刷新內容，即在修改abc.txt文件內容后，無須刷新也能獲取最新內容。
oDiv.innerHTML = str;
})
}
</script>
實例三，
通過ajax訪問服務器端的data.json文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>通過ajax訪問服務器端的data.json文件</p>
<input type="button" name="btn" id="btn" value="讀取文件" />
<div id="box">
</div>
</body>
</html>
<script type="text/javascript" src="js/ajax.js" ></script>
<script type="text/javascript">
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("box");
oBtn.onclick = function(){
ajax("data.json?t=" + new Date().getTime(),function(str){
var json = (new Function("return" + str))();
alert(json[0].c);
})
}
</script>
實例四，動態創建dom節點並插入json文件內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul1"></ul>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</body>
</html>
<script type="text/javascript" src="js/ajax.js" ></script>
<script type="text/javascript">
var oUl = document.getElementById("ul1");
var oA = document.getElementsByTagName("a");
for(var i = 0;i < oA.length; i ++){
oA[i].index = i;
oA[i].onclick = function(){
oUl.innerHTML = ""; //清空ul
ajax("page" + (this.index + 1) + ".json",function(str){
var json = (new Function("return" + str))(); //解析json
//利用js中DOM動態生成頁面中的內容
for(var j = 0;j < json.length;j ++){
var obj = json[j];
for(var key in obj){
var oLi = document.createElement("li");
oLi.innerHTML = "<strong>" + key + "</strong><i>" + obj[key] + "</i>";
oUl.appendChild(oLi);
}
}
})
}
}
</script>
page.json1↓
[{"a":1},{"aa":11},{"aaa":111}]
page.json2↓
[{"b":2},{"bb":22},{"bbb":222}]
page.json3↓
[{"c":3},{"cc":33},{"ccc":333}]
效果圖↓
點擊1
點擊2
點擊3
實例五，獲取php文件內容