1. ajax的介紹

1.1 含義

ajax 的全稱是AsynchronousJavaScriptand XML
簡單理解下:ajax就是非同步的js和服務端的資料

1.2 組成

非同步的js:事件,物件等
其他js:資料處理和解析的js
伺服器的載體:xhr物件
服務端的資料:json,xhr,html,txt等字元型資料

1.3 作用

它作為前端向後端傳送資料請求的重要手段,可以實現網頁無重新整理載入資料.

1.4 利弊

與傳統的form表單的get和post方式相比較,ajax的優點很明顯

優點:1.提升載入速度,實現區域性載入
     2.節省效能,能很好提升使用者體驗

當然,事物都是相對的,缺點如下

缺點:1.破壞了瀏覽器的前進後退功能
     2.破壞了seo的網路優化

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

2. ajax的書寫

2.1.1 ajax的GET請求方式

GET請求的資料會附在URL之後， 以 ? 分割URL和傳輸資料， 引數之間以 & 相連

//1.建立xhr物件
var xhr = new XMLHttpRequest();
//2.xhr的傳送方式:get  
xhr.open("GET", url, true)
//引數1:請求方式
//引數2:url是後端檔案所在伺服器的位置
//引數3:非同步true;同步false
//3.監聽xhr物件的狀態
xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //客戶端狀態碼為4:響應內容解析完成,可以呼叫
            //服務端的狀態碼為200:交易成功
            console.log(xhr.responseTxt)
            //返回響應資訊
        }
        //4.傳送資訊
        xhr.send();
 

2.1.2 小bug

以上是最基本的ajax程式碼,有兩處小bug, 在封裝過程中會解決

bug1:傳的引數為空時,會報錯
bug2:瀏覽器的快取干擾使得資料無法重新整理

2.1.3 ajax的Get方式封裝

//接收三個引數:後端檔案地址,回撥函式和資料(物件格式)
function ajaxGet(url, callback, data) {
    //1.解析傳送的資料
    data = data || {};
    //修復bug1:引數為空變為空物件
    var str = "";
    for (var i in data) {
        str += `${i}=${data[i]}&`;
        //拼接get的資料格式
    }
    //2.拼接url
    var d = new Date();
    url = url + "?" + str + "__sjc=" + d.getTime();
    //修復bug2:拼接一個不會重複的時間戳,欺騙快取;
    //時間戳的命名應該儘量複雜,防止後端讀取到.
    //3. 準備ajax
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    }
    xhr.send();
}
 

2.2.1 ajax的POST請求方式

ajax的POST和GET的結構大體相同,但有以下三點區別

區別1:post傳送資料位置是send()內,而不是拼接在url後
區別2:open的請求方式變為POST
區別3:send會原樣傳送資料,為確保後端能識別,必須設定資料格式為表單格式

2.2.1 ajax的POST方式封裝

function ajaxPost(url, callback, data) {
    data = data || {};
    var str = "";
    for (var i in data) {
        str += `${i}=${data[i]}&`;
    }
    //不必拼接時間戳
    var xhr = new XMLHttpRequest();
    //區別2
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    }
    //區別3:傳送前設定資料格式
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //區別1:資料傳送在send內
    xhr.send(str);
}