菜鳥MIS的Coding日記

程式結構

document.getElementById('btn').addEventListener('click', function () {
            var result = document.getElementById('result');
            var xhr = new XMLHttpRequest();//建立XMLHttpRequest物件
            xhr.onreadystatechange = function () {//onreadystatechange是當通訊狀態改變時候會觸發的事件
               if (xhr.readyState == 4) {//readyState為通訊狀態，4代表已取得資料
                    if (xhr.status == 200) {//status代表回應狀態，200代表OK
                        result.textContent = xhr.responseText;
                        return;
                    } else {
                        result.textContent = 'ERROR';
                    }
                } else {
                    result.textContent = '正在處理...';
                }
            };
/*open方法代表初始化請求，send方法代表送出HTTP請求，通常只有在POST才使用*/
            xhr.open('GET', 'https://localhost/Home/ReName?name=' + encodeURIComponent(document.getElementById('name').value), true);
            xhr.send(null);
        }, false);

使用XMLHttpRequest事件定義通訊處理

document.getElementById('btn').addEventListener('click', function () {
            var result = document.getElementById('result');
            var xhr = new XMLHttpRequest();
            xhr.addEventListener('loadstart', function () {//loadstart代表發送請求
                result.textContent = '通訊中';
            });
            xhr.addEventListener('load', function () {//load代表請求成功
                result.textContent = xhr.responseText;
            });
            xhr.addEventListener('error', function () {//error代表請求失敗
                result.textContent = '伺服器錯誤';
            });
            xhr.addEventListener('loadend', function () {//loadend代表請求結束(無論是否成功)
                alert('Ajax請求結束!');
            })
            xhr.open('GET', 'https://localhost/Home/ReName?name=' + encodeURIComponent(document.getElementById('name').value), true);
            xhr.send(null);
        }, false);

 使用POST請求資料

 document.getElementById('btn').addEventListener('click', function () {
            var result = document.getElementById('result');
            var xhr = new XMLHttpRequest();
            xhr.addEventListener('loadstart', function () {
                result.textContent = '通訊中';
            });
            xhr.addEventListener('load', function () {
                result.textContent = xhr.responseText;
            });
            xhr.addEventListener('error', function () {
                result.textContent = '伺服器錯誤';
            });
            xhr.addEventListener('loadend', function () {
                alert('Ajax請求結束!');
            })
            xhr.open('POST', 'https://localhost/Home/ReName');//方法改為POST
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');//表示請求資料的型態，若沒有設定content-type可能會發生資料無法正確送出
            xhr.send('name=' +encodeURIComponent(document.getElementById('name').value));//因為是POST方法所以參數使用send方法傳遞
        }, false);