什么是 ajax
ajax 即“Asynchronous JavaScript and XML”（異步 JavaScript 和 XML），也就是無刷新數據讀取。
http 請求
首先需要了解 http 請求的方法（GET 和 POST）。
GET 用於獲取數據。GET 是在 URL 中傳遞數據，它的安全性低，容量低。
POST 用於上傳數據。POST 安全性一般，容量幾乎無限。
ajax 請求
ajax 請求一般分成 4 個步驟。
1、創建 ajax 對象
在創建對象時，有兼容問題：
var oAjax = new XMLHttpRequest(); //for ie6 以上
var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6
合並上面的代碼：
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
2、連接服務器
在這里會用到 open() 方法。open() 方法有三個參數，第一個參數是連接方法即 GET 和 POST，第二個參數是 URL 即所要讀取數據的地址，第三個參數是否異步，它是個布爾值，true 為異步，false 為同步。
oAjax.open('GET', url, true);
3、發送請求
send() 方法。
oAjax.send();
4、接收返回值
onreadystatechange 事件。當請求被發送到服務器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState：請求狀態，返回的是整數（0-4）。
0（未初始化）：還沒有調用 open() 方法。
1（載入）：已調用 send() 方法，正在發送請求。
2（載入完成）：send() 方法完成，已收到全部響應內容。
3（解析）：正在解析響應內容。
4（完成）：響應內容解析完成，可以在客戶端調用。
status：請求結果，返回 200 或者 404。
200 => 成功。
404 => 失敗。
responseText：返回內容，即我們所需要讀取的數據。需要注意的是：responseText 返回的是字符串。
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
fnSucc(oAjax.responseText);
}else{
if(fnFaild){
fnFaild();
}
}
}
};
將以上代碼進行封裝：
//1.創建對象
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.連接服務器
oAjax.open('GET', url, true); //open(方法, url, 是否異步)
//3.發送請求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange = function(){ //OnReadyStateChange事件
if(oAjax.readyState == 4){ //4為完成
if(oAjax.status == 200){ //200為成功
fnSucc(oAjax.responseText)
}else{
if(fnFaild){
fnFaild();
}
}
}
};
}
最后附上實例：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ajax基礎</title>
</head>
<body>
點擊按鈕的時候，讀取abc.txt<input id="btn" type="button" value="讀取"/><br/>
<div id="con"></div>
</body>
</html>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oCon = document.getElementById('con');
oBtn.onclick = function(){
ajax('abc.txt',function(str){
oCon.innerHTML = str;
});
}
}
</script>
abc.txt 內容：
這是ajax調用的內容1。 這是ajax調用的內容2。 這是ajax調用的內容3。