JavaScript trong Trình Duyệt Web

Dòng Thời Gian JavaScript Trên Trình Duyệt

Trình duyệt tạo đối tượng Document và bắt đầu phân tích trang web, thêm các Element và Text node vào tài liệu sau khi phân tích các phần tử HTML và nội dung văn bản của chúng. Ở giai đoạn này, thuộc tính Document.readystate có giá trị là "loading".
Khi bộ phân tích HTML gặp phải các phần tử không có thuộc tính async và defer, nó sẽ thêm các phần tử đó vào tài liệu, sau đó thực thi các tập lệnh bên trong hoặc bên ngoài. Các tập lệnh này được thực thi đồng bộ và trình phân tích sẽ tạm dừng khi tải xuống (nếu cần) và thực thi các tập lệnh, vì JavaScript là đơn luồng. Điều này cho phép các tập lệnh sử dụng Document.write() để chèn văn bản vào dòng chảy đầu ra.
Khi trình phân tích gặp các phần tử có thuộc tính async, nó bắt đầu tải xuống tập lệnh và tiếp tục phân tích tài liệu. Tập lệnh sẽ được thực thi ngay khi tải xong nhưng trình phân tích không chờ đợi việc tải xuống, các tập lệnh không đồng bộ bị cấm sử dụng phương thức document.write().
Khi tài liệu hoàn thành phân tích, thuộc tính document.readyState chuyển sang trạng thái "interactive".
Tất cả các tập lệnh có thuộc tính defer sẽ được thực thi theo thứ tự xuất hiện trong tài liệu. Các tập lệnh không đồng bộ cũng có thể được thực thi tại thời điểm này, các tập lệnh bị trì hoãn có thể truy cập tài liệu hoàn chỉnh nhưng bị cấm sử dụng document.write().
Trình duyệt kích hoạt sự kiện DOMContentLoaded trên đối tượng Document, điều này đánh dấu sự chuyển đổi từ giai đoạn thực thi tập lệnh đồng bộ sang giai đoạn xử lý sự kiện bất đồng bộ. Tuy nhiên, cần lưu ý rằng vẫn có thể có các tập lệnh không đồng bộ chưa hoàn thành.
Tại thời điểm này, tài liệu đã được phân tích hoàn toàn, nhưng trình duyệt vẫn đang chờ các nội dung khác như hình ảnh tải về. Khi tất cả nội dung hoàn thành tải và tất cả các tập lệnh không đồng bộ tải về và thực thi, thuộc tính document.readyState thay đổi thành "complete", trình duyệt kích hoạt sự kiện load trên đối tượng Windows.
Từ thời điểm này trở đi, các sự kiện bất đồng bộ sẽ được gọi để phản hồi với các sự kiện nhập liệu người dùng, sự kiện mạng, hết thời gian đếm ngược, v.v.

        $.ajax({
            url: "http://127.0.0.1:8001/test_json",
            async: false,
            type: 'GET',
            dataType: 'json',
            success: function(data){console.log('success', data)},
            error: function (data) {console.log('error', data)}
        })

Để giải quyết vấn đề này:

Sử dụng kỹ thuật JSONP (JSON with Padding): Sử dụng thẻ và thuộc tính src để yêu cầu API từ máy chủ từ xa.

    <script>
        var callbackHandler = function(data){
            console.log("Dữ liệu trả về từ máy chủ:", data);
        };

        function getContent(){
            var url = "http://127.0.0.1:8001/test_json?callback=callbackHandler";  
            var script = document.createElement('script');
            script.setAttribute('src', url);
            document.getElementsByTagName('head')[0].appendChild(script);
        }
    </script>

Server 127.0.0.1:8001

def test_jsonp(request):
    func = request.GET.get('callback')  
    content = '%s(100000)' % (func,)  
    return HttpResponse(content)

Tóm tắt các bước:

Tạo thẻ động và đặt thuộc tính src, chỉ định API và hàm callback.
Máy chủ nhận yêu cầu và gói dữ liệu vào hàm callback và trả về.
Thực thi hàm callback với dữ liệu được gói từ máy chủ.

jQuery giúp chúng ta dễ dàng hơn bằng cách bao bọc JSONP.

    <script>
        var callbackHandler = function(data){
            console.log("Dữ liệu trả về từ máy chủ:", data);
        };

        function getContent(){
            $.ajax({
                url: "http://127.0.0.1:8001/test_json",
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'callbackHandler'
            })
        }
    </script>

WebSocket và CORS sẽ được bổ sung sau.

Đối tượng Window

Xem xét kiến trúc của trình duyệt, đối tượng Window chứa đối tượng Document, đại diện cho nội dung của cửa sổ. Đối tượng Window cũng quản lý các hoạt động ở cấp độ trình duyệt.

Bộ Đếm Thời Gian

Hàm setTimeout() và setInterval() có thể đăng ký các hàm được gọi một lần hoặc lặp lại sau một khoảng thời gian xác định.

function sayHello() {
    console.log("Xin chào thế giới");
}

setTimeout(sayHello, 1000); 
let helloInterval = setInterval(sayHello, 1000); 
setTimeout(function(){ clearInterval(helloInterval); }, 10000);

Định Vị và Điều Hướng Trong Trình Duyệt

Thuộc tính location của đối tượng window tham chiếu đến đối tượng Location, đại diện cho URL của tài liệu hiển thị trong cửa sổ và định nghĩa các phương pháp để tải tài liệu mới.

window.location.href
"https://www.example.com"

Các thuộc tính khác của đối tượng Location như protocol, host, hostname, port, pathname và search đại diện cho các phần khác nhau của URL.

Ví dụ về phân tích tham số URL:

function parseUrlArgs() {
    let args = {};
    let query = location.search.substring(1);
    let pairs = query.split('&');
    for (let i = 0; i < pairs.length; i++) {
        let pos = pairs[i].indexOf('=');
        if (pos === -1) continue;
        let name = pairs[i].substring(0, pos);
        let value = decodeURIComponent(pairs[i].substring(pos + 1));
        args[name] = value;
    }
    return args;
}

Tải Tài Liệu Mới

Phương thức assign() của đối tượng Location có thể tải và hiển thị tài liệu từ URL được chỉ định.

location.assign("http://example.com");

Lịch Sử Duyệt Web

Đối tượng History tham chiếu đến lịch sử duyệt web của cửa sổ. Phương thức back(), forward() và go() tương ứng với nút quay lại, tiến và di chuyển qua lại trong lịch sử duyệt web.

window.history.go(-3);  
window.history.back();  
window.history.forward();

Thông Tin Trình Duyệt và Màn Hình

Đối tượng Navigator chứa thông tin về nhà sản xuất và phiên bản trình duyệt.

window.navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36"

Đối tượng Screen chứa thông tin về kích thước màn hình và số lượng màu có sẵn.

Hộp Đối Thoại

Đối tượng Window cung cấp các phương thức alert(), confirm() và prompt() để hiển thị các hộp thoại với người dùng.

Sử Dụng jQuery

jQuery cung cấp các phương thức mạnh mẽ để chọn và thao tác với các phần tử HTML.

// Lấy phần tử bằng ID
let element = $('#elementId');

// Lấy phần tử bằng lớp CSS
let elements = $('.className');

// Lấy phần tử bằng tên thẻ
let spans = $('span');

Thiết Lập và Lấy Thuộc Tính

let image = $('img').first();
let width = parseInt(image.attr('width'));
image.attr('class', 'shuaige');

Tạo và Xóa Nút

Tạo một nút bằng cách sử dụng createElement():

let newElement = document.createElement('div');
newElement.textContent = 'Nội dung';
document.body.appendChild(newElement);

Xóa một nút:

newElement.remove();

Hiệu Ứng và Hoạt Hình

jQuery cung cấp các phương thức fadeIn(), fadeOut(), slideUp(), slideDown() để tạo hiệu ứng mờ dần và trượt lên/xuống.

$('#message').fadeIn();
$('#message').fadeOut();

Ajax trong jQuery

Phương thức load() của jQuery tải nội dung từ một URL và chèn nó vào từng phần tử được chọn.

$('#box').load('content.html');

Phương thức get() và post() gửi yêu cầu HTTP GET và POST tương ứng.

$.get('url', function(response) {
    console.log(response);
});

Phương thức ajax() cung cấp khả năng tùy chỉnh chi tiết yêu cầu Ajax.

$.ajax({
    type: 'POST',
    url: 'server.php',
    data: {key: 'value'},
    success: function(response) {
        console.log(response);
    }
});

Thẻ: JavaScript Trình Duyệt Web ajax jQuery Document Object Model

Đăng vào ngày 21 tháng 6 lúc 06:47

Thành phố Cuồng loạn

JavaScript trong Trình Duyệt Web

Thẻ Phổ Biến