03 Web全栈浏览器内置对象/事件/ajax

在浏览器中，有许多内置的对象和事件，可以帮助我们进行Web开发。其中，最常用的可能就是window对象和XMLHttpRequest（Ajax）。

window对象

window对象是BOM（Browser Object Model）的核心，它表示浏览器窗口，所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。




// 打开一个新的浏览器窗口
window.open('http://www.example.com/');
 
// 关闭当前窗口
window.close();
 
// 弹出一个警告框
window.alert('这是一个警告框');
 
// 写入日志到浏览器的控制台
window.console.log('这是控制台日志');

浏览器事件

浏览器事件是由用户在浏览器操作时自动触发的，比如点击、滚动、输入等。




// 当文档加载完成时执行
window.onload = function() {
    console.log('文档加载完成');
};
 
// 当窗口大小发生变化时执行
window.onresize = function() {
    console.log('窗口大小已更改');
};
 
// 当用户点击鼠标右键时执行
window.oncontextmenu = function(event) {
    console.log('鼠标右键被点击');
    // 阻止默认的右键菜单
    event.preventDefault();
};

XMLHttpRequest（Ajax）

XMLHttpRequest是浏览器提供的一种机制，允许网页向服务器请求额外的数据而不刷新页面。




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL以及是否异步处理
xhr.open('GET', 'http://www.example.com/api/data', true);
 
// 设置请求完成的处理函数
xhr.onreadystatechange = function() {
    // 请求完成并且响应状态码为200
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('请求成功:', xhr.responseText);
    }
};
 
// 发送请求
xhr.send();

以上代码演示了如何使用window对象和浏览器事件，以及如何使用XMLHttpRequest进行Ajax请求。这些是Web开发中非常基础且重要的概念。

03 Web全栈浏览器内置对象/事件/ajax

评论已关闭

推荐阅读