Ajax

Ajax最早產生與2005年，Ajax表示Asynchronous JavaScript andXML（異步JavaScript和XML），但是它不是像HTML、JavaScript或CSS這樣的正式的技術，而是表示一些技術的混合交互的一個術語，它使我們可以獲取和顯示新的內容不必載入一個新的web頁面，增強用戶體驗，更有桌面程序的感覺。 

Ajax請求步驟

• 創建 XMLHttpRequest 對象

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();//標準
}else{
    xhr = new ActiveXObject("Microsoft");//IE6
}

• 準備發送

xhr.open(method,url,async);

/*
參數一：請求方式（get獲取數據；post提交數據）
參數二：請求地址
參數三：同步或者異步標誌位，默認是true表示異步，false表示同步
/*

/*
如果是get請求那麼請求參數必須在url中傳遞
encodeURI()用來對中文參數進行編碼，防止亂碼
*/
var param = 'username='+uname+'&password='+pw;
xhr.open('get','03get.php?'+encodeURI(param),true);

/*
post請求參數通過send傳遞，不需要通過encodeURI()轉碼
必須設置請求頭信息
*/
var param = 'username='+uname+'&password='+pw;
xhr.open('post','04post.php',false);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

• 執行發送動作

xhr.send(null);//get請求這裏需要添加null參數

xhr.send(param);//post請求參數在這裏傳遞，並且不需要轉碼

• 指定回調函數

// 該函數調用的條件就是readyState狀態發生變化（不包括從0變爲1）
xhr.onreadystatechange = function(){
    /*
    readyState:
    2 瀏覽器已經收到了服務器響應的數據
    3 正在解析數據
    4 數據已經解析完成，可以使用了
    */

    if(xhr.readyState == 4){    
    // 4表示服務器返回的數據已經可以使用了，但是這個數據不一定是正常的
        if(xhr.status == 200){    
        // 200表示服務器返回的數據是正常的，不是200的話表示數據是錯誤的 200表示響應成功 404    
           沒有找到請求的資源 500服務器端錯誤
            alert(xhr.responseText);
        }
    }
}

響應數據格式

• xml
• json
• responseXML
• responseText

原理

單線程+事件隊列機制

例子

• 定時函數

setTimeout()

setInterval()

• 事件函數

btn.onclick=function(){}

• Ajax回調函數

xhr.onreadystatechange = function()