前言

最近写博客真的是太痛苦了，倒不是写博客本身，而是写完之后往多个平台发布的过程，一不注意就是十多分钟往上的时间消耗。VDl拜客生活常识网

为了解决这个问题，之前立项的“解决自媒体一键多平台发布”项目必须得立刻着手完善了，争取早日让自己从发布这件事情上解脱出来专心写文章。VDl拜客生活常识网

【hxsfx的JavaScript库】这个系列基本上是为“一键多平台发布”项目打基础用的。之所以把各个功能模块拆分出来，是为了尽量让小伙伴能够复制即用（在兼容性方面，因为个人能力的原因，几乎只会兼容Chrome浏览器）。VDl拜客生活常识网

VDl拜客生活常识网

hxsfx.ajax库

（一）介绍

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML），开发hxsfx.ajax库的主要目的就是希望通过异步加载HTML，从而尽量避免直接在js中写HTML来刷新页面内容。VDl拜客生活常识网

hxsfx.ajax这个库与jquery的ajax功能基本一致，不过短时间内应该是写不到人家那么完善的。哈哈~VDl拜客生活常识网

各位小伙伴别问，为什么不用jquery的ajax而要自己再写一个呢？VDl拜客生活常识网

问就是，博主喜欢造轮子。开玩笑了~VDl拜客生活常识网

其实原因是为了减少三方库的依赖，达到对项目的全面掌控。VDl拜客生活常识网

项目地址：https://github.com/hxsfx/hxsfx_web_toolsVDl拜客生活常识网

（二）代码

要自己开发一个ajax库，需要借助Web API接口中的XMLHttpRequest（XHR）对象。VDl拜客生活常识网

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。VDl拜客生活常识网

1、在window对象上新建一个hxsfx对象，本系列的所有库基本都会在hxsfx对象之中：

//hxsfx.js
(function () {
    window.hxsfx = {};
})();

2、在hxsfx对象的基础上新建一个ajax对象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
    };
})();

3、在ajax对象中新建loadHTML方法，设置两个参数，分别是ele准备加载HTML的容器元素和url加载HTML的地址：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
        }
    };
})();

4、在loadHTML方法中新建XMLHttpRequest对象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            const httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange = function () {
                //为了让代码更健壮，使用try...catch来捕获返回状态判断和处理HTML代码的异常
                try {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
                        if (httpRequest.status === 200) {
                              //在这处理返回的HTML
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")请求出错】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")异常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

5、为了解决加载HTML缓存的问题，将loadHTML方法中传入的URL参数后面加上一个时间戳：

相关阅读: