前端開發 | Ajax請求數據

1.前言

越發的覺得學安全要涉及很多方面，以前一直覺得要走一個方向，就很少去關注甚至可以避開其它方向。然而…就算是二進制安全也要涉及到web知識。就比如上次面試被問到Zoom漏洞可能是怎麼被利用的…今天看一篇文章的時候提到了Ajax請求數據，學習新知識！

2.什麼是Ajax

Ajax(Asynchronous JavaScript and XML)即異步的JavaScript和XML技術。指的是一套綜合了多項技術的瀏覽器端網頁開發技術。

Ajax可以通過和服務器的交互實現網頁中部分信息的更新，這就使得我們在只需要進行少數數據更新的情況下，避免整個網頁數據的再次加載，提升了開發性能。

舉例而言：在某網站填寫表單的時候(以新用戶註冊爲例)，當你填完表單來到最後一步填寫驗證碼的時候，驗證碼看不清楚你刷新了一下驗證碼，結果整個表單也隨之刷新…在這個時候，我們就需要使用Ajax這種部分內容刷新的請求方式去進行數據請求，從而達到更加高效快捷的更新網頁內容的效果。

3.Ajax請求

1.關於使用原生的Ajax進行數據請求

<button onclick="getDataByAjax()">點擊請求數據</button>
<div id="myDiv"></div>
<script type="text/javascript">
function getDataByAjax() {
    var xmlHttp;
    // 設置瀏覽器兼容－創建 XMLHttpRequest 對象
    if (window.XMLHttpRequest) { 
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlHttp = new XMLHttpRequest();
    } else { 
          // code for IE6, IE5
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // onreadystatechange 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) 
        {   
             document.getElementById("myDiv").innerHTML = xmlhttp.responseText; 
        }
    }
     // 設置請求類型(get/post), url, 以及是否爲異步請求async
      xmlHttp.open("GET", "你的請求路徑－url", true);
      xmlHttp.send(); // 發送請求
}
</script>

以上就是通過原生方式進行Ajax請求數據的方法，其中：
readyState: 存有 XMLHttpRequest 的狀態。他有0-4五種取值。
0: 請求未初始化 1: 服務器連接已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成、且響應已就緒。
status: 響應狀態碼（200表示成功，404表示頁面未找到）

2.jQuery中使用Ajax請求數據

           $.ajax({
                type: "get", // 請求類型（get/post）
                url: "你的請求路徑－url", 
                async: true, // 是否異步
                dataType: "json", // 設置數據類型
                success: function (data){
                    // 請求成功後的回調方法，進行數據賦值、顯示等操作
                },
                error: function (errorMsg){
                    // 請求失敗
                    alert("請求失敗");
                }
            });

前端開發之Ajax請求數據