【知了堂學習筆記】Ajax簡單封裝

學習Ajax時，雖然只是簡單學習，可是其中有get與post提交的方式，使用起來也沒有特別方便，因此將Ajax簡單封裝一下

首先須要瞭解Ajax的原理以及執行步驟，

a1 頁面 發生事件

1 建立xhr對象

2 打開ajax連接通道，連接服務器，配置信息和參數

3 發送數據到服務器

4 設置回調函數

5 服務器接收請求跟數據，處理請求， 作出響應

6 回調函數接收數據，執行回調函數

7 更新頁面

接下來就是Ajax的封裝

function ajax(method, url, postData, opt) {//方法，地址（get與post不一樣），屬性值，元素
    var xhr = null;
    //open方法 建立一個新的http請求，並指定此請求的方法、URL以及驗證信息
    if (window.XMLHttpRequest) {//XMLHttpRequest可擴展超文本傳輸請求
        xhr = new XMLHttpRequest;//現代瀏覽器
    } else if (windou.ActiveXObject) {
        //ActiveXObject對象是啓用並返回 Automation 對象的引用,
        xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie
    }
    if (method == "get") {
        xml.open(method, url + postData, true);//例：url="/checkUserFn?username=",postData=username //方法，地址+屬性值，異步
        xhr.send(null);//發送空值
    }
    else {
        xhr.open(method, url, true);//例：url=checkUserFn
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", "charset=utf-8");
        //發送表單格式的數據,charset=utf-8可帶可不帶（x-www-form-urlencoded）值對大小寫不敏感
        // xhr.setRequestHeader("Content-type","application/json; charset=utf-8");//發送json格式的數據
        // xhr.setRequestHeader("Content-type", "text/plain; charset=utf-8");//不指定Content-type時，此是默認值
        // xhr.setRequestHeader("Content-type", "text/html; charset=utf-8");//發送html文本
        xhr.send(postData);//向服務器發送請求; 例（"username="+username）
    }
    xhr.onreadystatechange = function () {
        //存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
        if (xhr.readyState == 4 && xhr.status == 200) {
            //readyState存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。==4表示接收完畢了
            // 0: 請求未初始化 1: 服務器鏈接已創建 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
            // xhr.status表示處理的結果是OK的
            opt.innerHTML = xhr.responseText;//ajax請求加載完成以後才能正確獲取responseText的值
        }
    }
}
//缺陷，不能打亂傳參數的順序

　　其中須要注意的是get與post的傳輸方式不一樣，發送文件的方式也不一樣。

中間本身有想法可是思路不太清晰，感謝https://www.cnblogs.com/cythia/p/6978323.html 這位博主的博客讓我理清了思路，有不足的地方還但願指正

想要學習更多知識，能夠關注知了堂 http://www.zhiliaotang.com/portal.php