原生js Ajax - gaocong－IT工程師數位筆記本

文章出處

var objXMLHttp;
/**
 * 進行createXMLHttpRequest對象的創建，由于不同的瀏覽器廠商對于XMLHttpRequest的支持不一樣，因此創建的時候需要根據不同的瀏覽器進行創建
 * */
function createXMLHttpRequest(){
    //對于Firefox,Opera等遵守DOM 2規范的瀏覽器
    if(window.XMLHttpRequest){
        objXMLHttp = new XMLHttpRequest();
    }
    //對于IE瀏覽器
    else{
        //將IE瀏覽器不同的XMLHttp實現聲明為數組
        var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
        //依次對每個XMLHttp創建XMLHttpRequest對象
        for(var i = 0; n< MSXML.length; i++){
            try{
                //微軟發布的是ActiveX控件
                objXMLHttp = new ActiveXObject(MSXML[i]);
                //如果正常創建XMLHttpRequest對象就使用break跳出循環
                break;
            }catch(e){
                alert("創建XMLHttpRequest對象失敗");
            }
        }
    }    
}
/**
 * 通過post方式提交
 * */
function postSend(){
    var value = document.getElementById("content").value;
    alert(value);
    //初始化XMLHttpRequest對象
    createXMLHttpRequest();
    //創建請求的URL
    var url = "ajaxServlet"
    //打開與服務器的連接，使用post方式
    objXMLHttp.open("POST", url, true);
    //post方式需要設置請求消息頭
    objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //設置處理響應的回調函數
    objXMLHttp.onreadystatechange = processResponse;
    //發送請求并設置參數，參數的設置為param=value的形式
    objXMLHttp.send("value="+value);
}
/**
 * 通過GET請求
 * */
function getSend(){
    var value = document.getElementById("content").value;
    //alert(value);
    //初始化XMLHttpRequest對象
    createXMLHttpRequest();
    alert("創建成功");
    //創建請求的URL,get方式采用url拼接參數
    var url = "ajaxServlet?value="+value;
    objXMLHttp.open("GET", url, true);
    //設置處理響應的回調函數
    objXMLHttp.onreadystatechange = processResponse;
    objXMLHttp.send(null);
}
/**
 * 設定的回調函數
 * */
function processResponse(){
    //響應完成且響應正常
    if(objXMLHttp.readyState == 1){
        alert("XMLHttpRequest對象開始發送請求");
    }else if(objXMLHttp.readyState == 2){
        alert("XMLHttpRequest對象的請求發送完成");
    }else if(objXMLHttp.readyState == 3){
        alert("XMLHttpRequest對象開始讀取服務器的響應");
    }else if(objXMLHttp.readyState == 4){
        alert("XMLHttpRequest對象讀取服務器響應結束");
        if(objXMLHttp.status == 200){
            //信息已經成功返回，開始處理信息
            //先捕獲下所有的請求頭
            var headers = objXMLHttp.getAllResponseHeaders();
            alert("所有的請求頭= "+headers);
            //得到服務器返回的信息
            var infor = objXMLHttp.responseText;
            alert("服務器端的響應 = "+infor);
        }else{
            alert("所請求的服務器端出了問題");
        }
    }
}