本文講述在前端開發(fā)過程中涉及到網(wǎng)絡(luò)數(shù)據(jù)請求時候的相關(guān)內(nèi)容。以Ajax請求為中心進(jìn)行展開。

首先、簡單的介紹一下什么是Ajax、以及為什么要使用他。
Ajax： Asynchronous JavaScript and XML，簡言之就是異步 JavaScript 和 XML。

他可以通過和服務(wù)器的交互實現(xiàn)網(wǎng)頁中部分信息的更新，這就使得我們在只需要進(jìn)行少數(shù)數(shù)據(jù)更新的情況下，避免整個網(wǎng)頁數(shù)據(jù)的再次加載，提升了開發(fā)性能。

舉個例子就是說；現(xiàn)在你要注冊一個網(wǎng)站，成為正式用戶，然后有一大堆的信息錄入表等你填寫，這個時候你已經(jīng)填了好多內(nèi)容了，有個地方需要你輸入驗證碼，然后呢，你表示看不清楚想要換一張驗證碼，這個時候，如果用普通的數(shù)據(jù)刷新請求方式去處理獲取新的驗證碼的話，隨之而來的問題就是，驗證碼雖然刷新了，但是你之前好不容易填寫的一堆個人信息也被刷新了，沒了，是不是很無語，所以，這種情況下，我們就需要使用Ajax這種部分內(nèi)容刷新的請求方式去進(jìn)行數(shù)據(jù)請求，從而達(dá)到更加高效快捷的更新網(wǎng)頁內(nèi)容的效果。

那么、接下來我們就來看看具體的在代碼中該如何書寫請求。
1.關(guān)于適用原生的Ajax進(jìn)行數(shù)據(jù)請求。

<button onclick="getDataByAjax()">點擊請求數(shù)據(jù)</button>
<div id="myDiv"></div>
<script type="text/javascript">
function getDataByAjax() {
    var xmlHttp;
    // 設(shè)置瀏覽器兼容－創(chuàng)建 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 存儲函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時，就會調(diào)用該函數(shù)
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) 
        {   
             document.getElementById("myDiv").innerHTML = xmlhttp.responseText; 
        }
    }
     // 設(shè)置請求類型(get/post), url, 以及是否為異步請求async
      xmlHttp.open("GET", "你的請求路徑－url", true);
      xmlHttp.send(); // 發(fā)送請求
}
</script>

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

2.jQuery中使用Ajax請求數(shù)據(jù)。

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

以上就是jQuery中使用Ajax進(jìn)行數(shù)據(jù)請求的方式，相比于第一種而言，很顯然簡潔了許多，但是需要主要dataType這個參數(shù)的設(shè)置需要和你請求的數(shù)據(jù)的類型保持一致。

希望我的文章能對大家有所幫助，以上內(nèi)容，如有不對或不足之處，還望大神不吝指正，十分感謝！

我是姣爺，我在簡書，加油。