1.什麼是ajax
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式、快速動態網頁應用的網頁開發技術，無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。一句話，ajax可以讓js和服務器實現數據交互，不需要刷新網頁。
2.使用wamp搭建本地服務器，利用localhost/***.html訪問放置在wamp安裝目錄下www目錄的頁面
3.提供如下ajax函數，格式爲js
function ajax(url, fnSucc, fnFaild)
{
//1.創建Ajax對象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.連接服務器（打開和服務器的連接）
oAjax.open('GET', url, true);
//3.發送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功了：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
//alert('失敗了');
if(fnFaild)
{
fnFaild();
}
}
}
};
}
4.通過ajax函數讀取外部文件aaa.txt中的內容。文件中的內容aaaaaa
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>read ajax</title>
<script src="ajax.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
//+date是爲了去緩存
ajax("aaa.txt?t="+new Date().getTime(),function(str){
alert(str);
},function(){
alert('failed');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="讀取"/>
</body>
</html>
5.讀取arr.txt文件中的數組，文件內容[1,2,3,4,4,5,6,7]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>read ajax</title>
<script src="ajax.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
//+date是爲了去緩存
//雖然讀了個數組，但其實是字符串
ajax("arr.txt?t="+new Date().getTime(),function(str){
alert(eval(str));
},function(){
alert('failed');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="讀取"/>
</body>
</html>
6.讀取json文件，文件內容：[{user: 'blue', pass: '123456'},{user: 'zs', pass: '654321'},{user: 'ls', pass: '789456'},{user: 'ww', pass: '7777'}]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>read ajax</title>
<script src="ajax.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
oBtn.onclick = function(){
//+date是爲了去緩存
//雖然讀了個數組，但其實是字符串
//用eval可以從字符串返回數字
ajax("json.txt?t="+new Date().getTime(),function(str){
var arr = eval(str);
for (var i = arr.length - 1; i >= 0; i--) {
var oLi = document.createElement('li');
oLi.innerHTML = '用戶名：<strong>'+arr[i].user+'</strong>密碼：<span>'+arr[i].pass+'</span>';
oUl.appendChild(oLi);
}
},function(){
alert('failed');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="讀取"/>
<ul id="ul1"></ul>
</body>
</html>
7.post和get
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>read ajax</title>
<script src="ajax.js"></script>
<script>
window.onload = function(){
};
</script>
</head>
<!-- get通過網址傳遞，容量小，網址可能非常長，從而無法訪問-->
<!-- post不通過網址傳遞，容量大，沒有長度問題 -->
<!-- get不安全，網址欄以及歷史記錄都看得見提交的內容 -->
<!-- get方式有緩存，post沒有緩存 -->
<!-- get適合用來獲取數據，post適合用來傳遞數據 -->
<form action="http://www.zhinengshe.com/" method="post">
用戶名：<input type="text" name="username"/><br>
密碼：<input type="password" name="password"><br>
<input type="submit">
</form>
</body>
</html>
注意事項：
1.wamp得打開
2.文件等必須放在www目錄下
3.訪問時必須通過地址訪問，注意自己的端口號，一般默認是8080，我的是自己修改的
