閒來無事，學一下原生ajax。之前只知道ajax是非同步，一直用的也是jQuery的ajax，不曾知道其原理。無奈最近閒的蛋疼。

copy一段別人的程式碼:

<script type="text/javascript">
function ajax(){
    var XHR=null;  

    //第一步：建立XMLHttpRequest物件
    if (window.XMLHttpRequest) {  
        XHR = new XMLHttpRequest();  // 非IE核心  
    } else if (window.ActiveXObject) {  
        XHR = new
 
 ActiveXObject("Microsoft.XMLHTTP");   // IE核心,這裡早期IE的版本寫法不同,具體可以查詢下  
    } else {  
        XHR = null;  
    }  

    //第二步：傳送請求
    if(XHR){  
        XHR.open("GET", "/test/ajax");  //"/test/ajax"test為專案名稱、ajax為方法名稱
    //第三步：
        XHR.onreadystatechange = function () { 

            // readyState值說明  
            // 0,初始化,XHR物件已經建立,還未執行open  
 

            // 1,載入,已經呼叫open方法,但是還沒傳送請求  
            // 2,載入完成,請求已經發送完成  
            // 3,互動,可以接收到部分資料  

            // status值說明  
            // 200:成功  
            // 404:沒有發現檔案、查詢或URl  
            // 500:伺服器產生內部錯誤  
            if (XHR.readyState == 4 && XHR.status == 200) {  //注①
                // 這裡可以對返回的內容做處理  
 

                // 一般會返回JSON或XML資料格式  
                console.log("XHR.responseText-->"+XHR.responseText);  
                // 主動釋放,JS本身也會回收的  
                XHR = null;  
            }  
        };  
        XHR.send();  
    }

}
</script>

呼叫

<a onclick="ajax();">ajax</a>

後臺：

@RequestMapping("/ajax")
    public @ResponseBody Company ajax() {
        Company company=new Company();
        company.setAddr("公司地址");
        company.setCompanyLogoImageUrl("公司logo");
        return company;
    }

後臺返回資料：

{
"addr": "公司地址",
"lng": 0,
"lat": 0,
"amount": 0,
"companyLogoImageUrl": "公司logo"
}

注：
①：如果是本地環境，可能會出現XHR.status == 0這種情況
②：NS_ERROR_UNEXPECTED如出現此錯誤則是跨域問題
第一次把url設定成：http:127.0.0.1/test/ajax，時出現此錯誤

關鍵詞：Ajax中XMLHttpRequest物件的status為0時的解決方法