Include dữ liệu từ file HTML bằng JavaScript

Thứ Sáu, 17/01/2020

Tram Ho

Giới thiệu

Xin chào các bạn, hôm nay mình sẽ giới thiệu tới các bạn một bài toán khác mình đã gặp trong dự án. Đó là xử lý include dữ liệu từ file HTML vào nội dung trang web bằng JavaScript. Hãy cùng mình phân tích yêu cầu nhé.

Yêu cầu

Khách hàng có xây dựng nhiều modules(mỗi module tương tự 1 trang web dịch vụ của KH) khác nhau và các modules này đều đang chạy đồng thời, tuy nhiên phần header/footer thì tất cả các modules đều giống nhau.
Vì thế phần header/footer này KH muốn tách ra thành 2 files riêng để tiện cho việc chỉnh sửa sau này (Khi có yêu cầu chỉnh sửa HTML/CSS/JS của header/footer thì chỉ cần sửa ở trong 2 files này thì tất cả các modules đều được cập nhât). Để đảm bảo CSS/JS của header/footer thì KH đã chọn giải pháp là viết CSS/JS internal.

Thực hiện

Với yêu cầu như trên thì mình sẽ xử lý như sau:

Viết mã HTML, đánh dấu vị trí để include header và footer
Viết mã JS để lấy dữ liệu từ file HTML của header/footer được chỉ định để chèn và vị trí đã đánh dấu
Cùng xem phần code mình đã thực hiện nhé

HTML

Mình đánh dấu vị trí header/footer như code phía dưới, và có truyền thêm class là include-html và attribute data-file là đường dẫn của file HTML mà mình cần include.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
...
    &lt;title&gt;My website&lt;/title&gt;
...
&lt;/head&gt;
&lt;body&gt;

&lt;div class="header-section include-html" data-file="myfolder/header.html"&gt;&lt;/div&gt;
&lt;div class="main-content"&gt;
    ...
    // content here
    ...
&lt;/div&gt;
&lt;div class="footer-section include-html" data-file="myfolder/footer.html"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

...

<title>My website</title>

...

</head>

<body>

...

// content here

...

</div>

</body>

</html>

Javascript

Mình sẽ thêm javascript internal trong file HTML ở trên và có chú thích ở trong các đoạn code

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
  <span class="token keyword">function</span> <span class="token function">includeHTML</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> i<span class="token punctuation">,</span> elem<span class="token punctuation">,</span> file<span class="token punctuation">,</span> xhttp<span class="token punctuation">;</span> <span class="token comment">// Khởi tạo các biến</span>

    <span class="token comment">// Lấy tất cả các thẻ có class là include-html (Như ở trên mình định nghĩa 2 thẻ để include header/footer)</span>
    <span class="token keyword">var</span> includeFiles <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'include-html'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token comment">// Duyệt vòng lặp từ mảng phần tử ở trên</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> container<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      elem <span class="token operator">=</span> includeFiles<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// Gán biến elem bằng thẻ đang được duyệt</span>
      file <span class="token operator">=</span> elem<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"data-file"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Gán biến file là attribute của thẻ đang được duyệt</span>

      <span class="token keyword">if</span> <span class="token punctuation">(</span>file<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Kiểm tra nếu tồn tại attribute này thì thực hiện tiếp</span>
        xhttp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Khởi tạo request</span>
        xhttp<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// Lắng nghe event khi request kết thúc</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// Nếu status là 200 (thành công) thì set nội dung của file vào thẻ đang được duyệt</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>elem<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>responseText<span class="token punctuation">;</span><span class="token punctuation">}</span>

            <span class="token comment">// Nếu status 404 (lỗi) thì hiển thị nội dung lỗi không thấy component</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">404</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>elem<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Component not found."</span><span class="token punctuation">;</span><span class="token punctuation">}</span>

            <span class="token comment">// Sau khi duyệt xong thẻ này thì xoá class include-html </span>
            elem<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">"include-html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">// Gọi lại function includeHTML để duyệt tất cả các thẻ có class include-html còn lại</span>
            <span class="token function">includeHTML</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token comment">// Tạo và gửi request</span>
        xhttp<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span> file<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhttp<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token comment">// Thoát function</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token function">includeHTML</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

function includeHTML() {

var i, elem, file, xhttp; // Khởi tạo các biến

// Lấy tất cả các thẻ có class là include-html (Như ở trên mình định nghĩa 2 thẻ để include header/footer)

var includeFiles = document.getElementsByClassName('include-html');

// Duyệt vòng lặp từ mảng phần tử ở trên

for (i = 0; i < container.length; i++) {

elem = includeFiles[i]; // Gán biến elem bằng thẻ đang được duyệt

file = elem.getAttribute("data-file"); // Gán biến file là attribute của thẻ đang được duyệt

if (file) { // Kiểm tra nếu tồn tại attribute này thì thực hiện tiếp

xhttp = new XMLHttpRequest(); // Khởi tạo request

xhttp.onreadystatechange = function() {

// Lắng nghe event khi request kết thúc

if (this.readyState == 4) {

// Nếu status là 200 (thành công) thì set nội dung của file vào thẻ đang được duyệt

if (this.status == 200) {elem.innerHTML = this.responseText;}

// Nếu status 404 (lỗi) thì hiển thị nội dung lỗi không thấy component

if (this.status == 404) {elem.innerHTML = "Component not found.";}

// Sau khi duyệt xong thẻ này thì xoá class include-html

elem.classList.remove("include-html");

// Gọi lại function includeHTML để duyệt tất cả các thẻ có class include-html còn lại

includeHTML();

}

// Tạo và gửi request

xhttp.open("GET", file, true);

xhttp.send();

return; // Thoát function

}

};

includeHTML();

</script>

Kết luận

Trên đây là bài toán mình đã gặp và cách xử lý, cảm ơn các bạn đã theo dõi bài viết này. Hi vọng nó là 1 case study để các bạn tham khảo .

Nguồn tham khảo

w3school

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Include dữ liệu từ file HTML bằng JavaScript

Giới thiệu

Yêu cầu

Thực hiện

HTML

Javascript

Kết luận

Nguồn tham khảo

VinFast Lux A2.0 giá chưa tới 500 triệu đồng - Ưu đãi cuối cùng dành cho xe xăng 'made in Vietnam'

Asus ROG Flow X13, laptop 13 inch hiệu năng cực "trâu" với AMD Ryzen 7

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript