JavaScript库hxsfx.ajax之解决动态加载HTML

言

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

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

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

hxsfx.ajax库

（一）介绍

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

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

各位小伙伴别问，为什么不用jquery的ajax而要自己再写一个呢？

问就是，博主喜欢造轮子。开玩笑了~

其实原因是为了减少三方库的依赖，达到对项目的全面掌控。

项目地址：https://github.com/hxsfx/hxsfx_web_tools

（二）代码

要自己开发一个ajax库，需要借助Web API接口中的XMLHttpRequest（XHR）对象。

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

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参数后面加上一个时间戳：

//ajax.js
//时间戳用来解决加载页面缓存的问题
var urlTimeStamp = "timeStamp=" + new Date().getTime();
url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;

6、【重点】在这处理返回的HTML时，如果直接将HTML加载到容器中，会出现HTML中Javascript代码不执行的问题。解决这个问题，需要将加载的script标签替换为script元素：

//ajax.js
ele.innerHTML = httpRequest.responseText;
var scriptElements = ele.getElementsByTagName("script");
for (var i = 0; i < scriptElements.length; i++) {
    var scriptElement = document.createElement("script");
    scriptElement.setAttribute("type", "text/javascript");
    var src = scriptElements[i].getAttribute("src");
    if (src) {
        //因为加载的src路径是之前相对加载HTML页面的，需要修改为当前页面的引用路径
        src = url.substring(0, url.lastIndexOf('/') + 1)  + src;
        src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
        scriptElement.setAttribute("src", src);
    }
    var scriptContent = scriptElements[i].innerHTML;
    if (scriptContent) {
        scriptElement.innerHTML = scriptContent;
    }
    //用生成的script元素去替换html中的script标签，以此来激活script代码
    ele.replaceChild(scriptElement, scriptElements[i]);
}

7、最后ajax.js完整代码：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            //时间戳用来解决加载页面缓存的问题
            var urlTimeStamp = "timeStamp=" + new Date().getTime();
            url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
            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) {
                            ele.innerHTML = httpRequest.responseText;
                            var scriptElements = ele.getElementsByTagName("script");
                            for (var i = 0; i < scriptElements.length; i++) {
                                var scriptElement = document.createElement("script");
                                scriptElement.setAttribute("type", "text/javascript");
                                var src = scriptElements[i].getAttribute("src");
                                if (src) {
                                    //因为加载的src路径是之前相对加载HTML页面的，需要修改为当前页
                                    src = url.substring(0, url.lastIndexOf('/') + 1) + src;
                                    src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
                                    scriptElement.setAttribute("src", src);
                                }
                                var scriptContent = scriptElements[i].innerHTML;
                                if (scriptContent) {
                                    scriptElement.innerHTML = scriptContent;
                                }
                                //用生成的script元素去替换html中的script标签，以此来激活script代
                                ele.replaceChild(scriptElement, scriptElements[i]);
                            }
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")请求出错】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")异常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

（三）调用文档

1、将hxsfx.js和ajax.js放入Scripts文件夹中的hxsfx文件夹

2、在Scripts文件夹同级目录新建index.html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>js库测试</title>
    <script src="Scripts/hxsfx/hxsfx.js"></script>
    <script src="Scripts/hxsfx/ajax.js"></script>
    <script>
        window.onload = function () {
                //调用ajax中的loadHTML方法
            window.hxsfx.ajax.loadHTML(document.getElementById("ContentContainer"), "Views/test/testPage.html");
        };
    </script>
</head>
<body>
    <div id="ContentContainer"></div>
</body>
</html>

3、在Scripts文件夹同级目录，首先新建Views文件夹，接着其中新建test文件夹，最后在test文件夹中新建testPage.html

<style>
    div#TestPageContainer {
        height: 300px;
        width: 300px;
        background-color: #F0F0F0;
    }
</style>
<script src="../../Scripts/hxsfx/test/test.js"></script>
<script>
    function updateBackgroundColor() {
        try {
            var backgroundColor = '#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'));
            document.getElementById("TestPageContainer").style.backgroundColor = backgroundColor;
        }
        catch (ex) {
            console.log(ex.message);
        }
    }
</script>
<div id="TestPageContainer">
    <button onclick="updateBackgroundColor()">更改背景色</button>
    <button onclick="modifyPFontColor()">更改下面一句话的字体颜色</button>
    <p id="P">这儿是一句话。</p>
</div>

最后

以上内容只是hxsfx.ajax库的开始，后续的内容更新小伙伴可以通过访问Github项目地址进行获取。

ndroid高阶开发专栏

Java高级开发进阶专栏

TCP连接的三次握手和四次挥手

一文搞懂DNS域名解析的详细流程

高并发与负载均衡：Nginx的反向代理和负载均衡

一文搞懂TCP/IP协议及Web基础知识

一文搞懂HTTP协议的核心知识点

一文掌握 HTTP协议报文包含的信息类型

一文搞懂HTTP协议返回结果的HTTP状态码

一文搞懂 HTTP协议的报文首部

作为网络专栏的开篇导文，本文概况介绍下经典案例：从输入一个网址到浏览器显示页面的全过程。

步骤概要介绍如下：

1、输入网址
2、DNS解析获取域名对应的IP地址
3、建立TCP连接
4、web浏览器向web服务器发送HTTP请求
5、服务器的永久重定向响应
6、浏览器跟踪重定向地址
7、web服务器做出应答
8、浏览器显示 HTML
9、浏览器发送请求获取其他嵌入在 HTML 中的资源
10、web服务器关闭TCP连接

1、输入网址

当在浏览器中输入网址时，浏览器其实就已在智能匹配 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。

对于 google的chrome 的浏览器，他甚至会直接从缓存中把网页展示出来，就是说，你还没有按下 enter，页面就出来了。

2、DNS解析获取域名对应的IP地址

请求一旦发起，浏览器首先要做的事情就是解析这个域名。

1、一般来说，浏览器会首先查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。
2、如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS服务器。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。
3、查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
4、根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程。
5、本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。
6、最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

3、建立TCP连接

在HTTP工作开始之前，web浏览器首先要通过网络与web服务器建立连接，该连接是通过TCP来完成的。

PS1：为什么要先建立TCP呢？

因为HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能进行更高层次协议的连接，因此要先建立TCP连接，一般TCP连接的端口号是80

PS2：扩展知识点：

TCP连接的三次握手和断开的四次挥手参照站内文章：TCP 三次握手和四次挥手

4、web浏览器向web服务器发送HTTP请求

建立了TCP连接之后，web浏览器就会向web服务器发起一个http请求。

一个典型的 http request header 一般需要包括请求的方法，例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一般的浏览器只能发起 GET 或者 POST 请求。

客户端向服务器发起http请求的时候，会有一些请求信息，请求信息包含三个部分：

请求方法URI协议/版本
请求头(Request Header)
请求正文：

下面是一个完整的HTTP请求例子：

GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate

username=jinqiao&password=1234

4.1、请求行

请求的第一行是“方法URL议/版本”：GET/sample.jsp HTTP/1.1

4.2、请求头(Request Header)

请求头包含许多有关的客户端环境和请求正文的有用信息。例如，请求头可以声明浏览器所用的语言，请求正文的长度等。

Accept:image/gif.image/jpeg.*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)
Accept-Encoding:gzip,deflate.

4.3、请求正文

请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息：

username=jinqiao&password=1234

5、服务器的永久重定向响应

服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。

为什么服务器一定要重定向而不是直接发送用户想看的网页内容呢？其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像http://www.yy.com/和http://yy.com/，搜索引擎会认为它们是两个网站，结果造成每个搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。还有就是用不同的地址会造成缓存友好性变差，当一个页面有好几个名字时，它可能会在缓存里出现好几次。

重定向原因：

1、网站调整（如改变网页目录结构）；
2、网页被移到一个新地址；
3、网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

6、浏览器跟踪重定向地址

现在浏览器知道了 "http://www.google.com/"才是要访问的正确地址，所以它会发送另一个http请求。这里没有啥好说的

7、web服务器做出应答

经过前面的步骤，服务器收到了我们的请求，也处理我们的请求，到这一步，它会把它的处理结果返回，也就是返回一个HTPP响应。

HTTP响应与HTTP请求相似，HTTP响应也由3个部分构成，分别是：

状态行
响应头(Response Header)
响应正文

HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

＜html＞
＜head＞
＜title＞http＜/title＞
＜/head＞
＜body＞
＜!-- body goes here --＞
＜/body＞
＜/html＞

7.1、状态行：

状态行由协议版本、数字形式的状态代码、及相应的状态描述，各元素之间以空格分隔。

格式: HTTP-Version Status-Code Reason-Phrase CRLF

例如: HTTP/1.1 200 OK \r\n

-- 协议版本：是用http1.0还是其他版本

-- 状态描述：状态描述给出了关于状态代码的简短的文字描述。比如状态代码为200时的描述为 ok

-- 状态代码：状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。

状态代码具体协议定义如下：

1xx：信息性状态码，表示服务器已接收了客户端请求，客户端可继续发送请求。
100 Continue
101 Switching Protocols

2xx：成功状态码，表示服务器已成功接收到请求并进行处理。
200 OK 表示客户端请求成功
204 No Content 成功，但不返回任何实体的主体部分
206 Partial Content 成功执行了一个范围（Range）请求

3xx：重定向状态码，表示服务器要求客户端重定向。
301 Moved Permanently 永久性重定向，响应报文的Location首部应该有该资源的新URL
302 Found 临时性重定向，响应报文的Location首部给出的URL用来临时定位资源
303 See Other 请求的资源存在着另一个URI，客户端应使用GET方法定向获取请求的资源
304 Not Modified 服务器内容没有更新，可以直接读取浏览器缓存
307 Temporary Redirect 临时重定向。与302 Found含义一样。302禁止POST变换为GET，但实际使用时并不一定，307则更多浏览器可能会遵循这一标准，但也依赖于浏览器具体实现

4xx：客户端错误状态码，表示客户端的请求有非法内容。
400 Bad Request 表示客户端请求有语法错误，不能被服务器所理解
401 Unauthonzed 表示请求未经授权，该状态代码必须与 WWW-Authenticate 报头域一起使用
403 Forbidden 表示服务器收到请求，但是拒绝提供服务，通常会在响应正文中给出不提供服务的原因
404 Not Found 请求的资源不存在，例如，输入了错误的URL

5xx：服务器错误状态码，表示服务器未能正常处理客户端的请求而出现意外错误。
500 Internel Server Error 表示服务器发生不可预期的错误，导致无法完成客户端的请求
503 Service Unavailable 表示服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常

7.2、响应头：

响应头部：由关键字/值对组成，每行一对，关键字和值用英文冒号":"分隔。

Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

典型的响应头字段：

7.3、响应正文

包含着我们需要的一些具体信息，比如cookie，html,image，后端返回的请求数据等等。这里需要注意，响应正文和响应头之间有一行空格，表示响应头的信息到空格为止。

8、浏览器显示 HTML

在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了，浏览器是如何把页面呈现在屏幕上的呢？

不同浏览器可能解析的过程不太一样，这里我们只介绍webkit的渲染过程。下图对应的就是WebKit渲染的过程，这个过程包括：

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树：

9、浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

其实这个步骤可以并列在步骤8中，在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。比如我要获取外图片，CSS，JS文件等，类似于下面的链接：

图片：http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif

CSS式样表：http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css

JavaScript 文件：http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等...

不像动态页面，静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取，或者可以放到CDN中

10、web服务器关闭TCP连接

一般情况下，一旦web服务器向浏览器发送了请求数据后，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入这行代码：

connection:keep-alive

这样TCP连接将依然保持打开状态，浏览器可以继续通过相同的连接发送请求，保持连接，节省了为每个请求建立新连接所需要的的事件，同时节省了宽带

实际上，在HTTP 1.1 版本的新特性中有一点是：默认持久连接节省通信量，只要客户端、服务端任意一端没有明确断开TCP连接，可以发送多次HTTP请求。

版权说明：摘录到部分网络资源，如存在版权问题，请私信联系处理，谢谢！

关注头条号“编程家园”，后续陆续会有更多技术领域（包括并不限于Android进阶、Java进阶、Kotlin、网络、Flutter、Python等），以及架构、职业规划、职业思考等方面资料的免费分享，期待您的关注！

. HTML解析

当浏览器开始加载HTML文档时，它会从上到下解析HTML文件。在解析过程中，浏览器会构建DOM（文档对象模型）树。

2. 遇到外部链接（CSS、JavaScript）

当解析器遇到外部CSS链接（<link>标签）时，它通常会停止DOM构建，等待CSS文件下载并解析完成，因为CSS可能影响后续DOM元素的渲染。
当解析器遇到传统的JavaScript脚本（<script>标签）时，它也会停止DOM构建，等待脚本下载和执行完成，因为脚本可能会修改DOM。

3. defer async

defer属性：用于<script>标签，指示浏览器应该在继续构建DOM的同时异步下载脚本，但延迟执行直到整个文档解析完成。所有带defer的脚本将在DOMContentLoaded事件之前按顺序执行。
async属性：也用于<script>标签，指示浏览器异步下载脚本，并在脚本下载完成后立即执行，而不用等待HTML文档解析完成。async脚本的执行顺序不能保证。

4. DOMContentLoaded事件

当HTML文档被完全加载和解析时，不包括样式表、图片和iframe的加载，DOMContentLoaded事件将被触发。
如果脚本有defer属性，它们将在DOMContentLoaded事件之前按顺序执行。

5. 其他资源的加载

在DOMContentLoaded事件之后，浏览器会继续加载页面上的其他资源（如图片、样式表、iframe等）。

6. onload事件

当文档及其所有依赖资源（如样式表和图片）完全加载后，window对象的onload事件将被触发。
这标志着整个页面的加载过程结束。

7. JavaScript执行

在整个文档解析过程中，JavaScript（无论是内联的还是通过<script>标签引入的）可以被执行，具体取决于它的位置和是否使用了defer或async属性。
使用defer的脚本会在文档解析结束后按顺序执行，而async脚本则会在它们加载完成后尽快执行。

注意

使用async和defer可以提高页面加载性能，因为它们允许HTML解析和脚本下载并行进行。
JavaScript脚本的放置位置（在<head>或<body>）也会影响加载和执行的时机。通常推荐将脚本放在<body>标签的底部，以提高页面加载性能。

在线咨询

上一篇：如何来使用Html中的锚点连接
下一篇：科技：基于 HTML5 WebGL 的水泥工厂数据可视化系统

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商