原生XHR的甜甜圈时光

说实话，hen多人一提到Ajax就直接跑去装库。

哈哈，我可不这么玩。

咱们今天就来聊聊Zui原始的那个XMLHttpRequest，怎么用它搞定页面局部刷新。

先别急，先喝口水。

一、XHR到底是个啥子玩意儿

其实它就是浏览器自带的一个小盒子，Neng帮你发HTTP请求。

对，你没听错，就是原生的，没有任何第三方依赖。

那我们先把它实例化：

const xhr = new XMLHttpRequest;

哎呀，不对不对，应该是new XMLHttpRequest。

二、打开通道——open方法

要想让盒子动起来必须先.open一下。

参数顺序是：方法、URL、是否异步。

xhr.open; // true 表示异步

记得这里的URLZui好是相对路径，省得跨域坑爹。

三、监听状态变化——onreadystatechange

XHR有五个readyState，你Ke以随时监控它们。

xhr.onreadystatechange = function  {
    console.log;
    if  { // DONE
        if  {
            const data = JSON.parse;
            // 渲染到页面
            document.getElementById.innerText = JSON.stringify;
        } else {
            console.error;
        }
    }
};

四、发送请求——send方法

GET请求直接.send就行了POST的话就得把数据塞进去。

// GET
xhr.send;
// POST 示例
const payload = JSON.stringify;
xhr.setRequestHeader;
xhr.send;

手把手写个Demo——从零到一的完整流程

先在HTML里放个占位元素：

再写个app.js

// 实例化 XHR
const xhr = new XMLHttpRequest;
// 打开通道
xhr.open;
// 状态监听
xhr.onreadystatechange = function  {
    if  {
        if  {
            const list = JSON.parse;
            document.getElementById.innerHTML =
                list.map.join;
        } else {
            console.error;
        }
    }
};
// 发起请求
xhr.send;

搞定！打开页面你会kan到列表自动渲染出来。害，这么简单你居然还在用jQuery？你懂的。

进阶玩法：进度条与错误重试

If you want to show progress, you can listen to .onprogress.

xhr.onprogress = function  {
    if  {
        const percent = Math.round * 100);
        console.log;
    }
};

还有一个小技巧：当网络卡顿时Ke以自动重试三次。

let attempts = 0;
function loadData {
    attempts++;
    const xhr = new XMLHttpRequest;
    xhr.open;
    xhr.onload = function  {
        if  {
            console.log;
        } else if  {
            console.warn;
            loadData;
        } else {
            console.error;
        }
    };
    xhr.onerror = function  {
        if  loadData;
    };
    xhr.send;
}
loadData;

常见坑点速查表

CORS跨域：服务器必须加上`Access-Control-Allow-Origin`头，否则浏览器会拦住你的请求；害，那时候你只Neng换成JSONP或者后端代理了。

MIME类型：返回JSON一定要`Content-Type: application/json`，否则`JSON.parse`会报错。

`async`属性：一定要设为true，否则页面会卡死，好像回到了上世纪网速时代。

`readyState`判断：别只kan4，有时候想在接收头部时Zuo点事，用2也行。

为什么百度不收录？— 小插曲解答时间

Crap，我刚才想说别忘了SEO，其实hen多兄弟写完Ajax页面后发现搜索引擎抓不到内容，就慌了神。咱就是说这里有几个原因：

#1 内容是动态渲染的：AJAX在客户端执行，爬虫默认只kan初始HTML。除非你使用SSR或预渲染，否则搜索引擎只Nengkan到空白占位符。

#2 没有合理的fallback：BaiduBotRu果遇到JS错误，会直接放弃抓取。给出noscript块或服务端渲染版Ke以缓解这个问题。

#3 robots.txt误拦："Disallow: /"会把整个站点屏蔽，包括AJAX接口。检查一下你的robots配置吧，哈哈，这种失误常见得hen！

#4 响应时间太长：Baidu对加载时间比较敏感，Ru果XHR耗时超过几秒，它可Neng直接超时放弃抓取。优化接口响应速度或者使用缓存Neng提升收录率。

答案：

AJAX本身不是罪魁，只是搜索引擎需要可视化内容；提供预渲染或SSR即可解决；另外注意robots和响应时间，不然真的被踢出搜索结果啦！

实战小技巧合集

- 想调试？打开Chrome DevTools的Network面板，kan下请求和响应头，一眼就Neng发现问题所在。说实话，这一步省了我无数debug时间。

- 想兼容IE9？记得加上.onload && .onerror && .onreadystatechange全套事件处理，否则老IE根本不给力。哈哈，我之前就是忘记这一步，被老板骂到吐血……呃，不对不对，是笑死我自己了 😂.

- 想让代码geng整洁？Ke以把XHR封装成一个函数返回Promise，然后配合async/await使用，这样kan起来像同步代码，却仍保持异步特性：

function ajax {
    return new Promise => {
        const xhr = new XMLHttpRequest;
        xhr.open;
        if  {
            xhr.setRequestHeader;
            data = JSON.stringify;
        }
        xhr.onload =  => ? resolve:reject;
        xhr.onerror =  => reject);
        xhr.send;
    });
}
// 用法示例
 => {
    try{
       const resp = await ajax;
       console.log);
    }catch{ console.error; }
});

- 小提醒：Ru果你真的要上传大文件，用FormData配合XHR的upload事件Ke以实时显示进度条。这玩意儿比fetch还靠谱，因为upload事件是专门给XHR准备的。嗯…好像有点绕，不过实际项目里用一次就明白了。

——别忘记初心

AJAX本质上就是“让页面局部geng新”。用原生XHR，你Nenggeng清楚每一步发生了啥，也geng容易定位bug。以后碰到奇怪的问题，先打开控制台kankanreadyState和status，再回头审视代码逻辑——这就是我多年摸索出来的经验之谈啦！哈哈，有空记得给我点个赞呀~ 咱们下次再聊别的话题吧，拜拜！ 🎉

---