js原生ajax五步走

ajax給web領域帶來了無窮無盡的活力，而我的博客卻只有一個jquery的說明，這怎麼能行呢？不符合我的氣質！

ajax其實不復雜，一種技術的出現，是爲了大家更方便的實現功能的，而不是難倒開發者。

總結一下：①創建一個XMLHTTPRequest對象  ②利用open方法連接服務器（所謂的接口）  ③創建請求讀取完成的事件，執行設計的功能   ④利用send方法向服務器發送請求  ⑤操作dom 渲染頁面

        ajax
        // 1.創建對象
        let xmr=new XMLHttpRequest();
        // 2.連接服務器
        xmr.open();//5個參數  1 請求類型 2 請求路徑 3 同步、異步 4 5 用戶名 密碼
        // 3.創建請求讀取完成讀取事件（可以放在第二步）
        xmr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xmr.response)
                // 5.操作dom元素 渲染頁面
            }
        }
        // 4.給服務器發送請求
        xmr.send();//有參數寫（post） 無參數不寫（get）
  
       

實例：

           //讀取data.txt文件的數據  注意 vscode直接用瀏覽器打開的話存在了跨域問題，我查過，說是環境的缺陷，
           //webstorm完美運行，或者利用Live Server插件，在服務器執行解決，小夥伴們有此問題也可以私聊啊哈哈
            let xmr=new XMLHttpRequest();
            xmr.open('get','./data.txt');
            xmr.onreadystatechange=function(){
                if(xmr.readyState==4&&xmr.status==200){
                    console.log(xmr.response);
                }
            }
            xmr.send();

結果：