初级前端JS部分整理(3)

tech2025-09-26  2

BOM(浏览器对象模型)

提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。

window 对象: JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性; alert(‘提示信息’)confirm(“确认信息”)prompt(“弹出输入框”)open(“url地址”,“打开的方式(可以是-self或-black)”,“新窗口的大小”)close() 关闭当前的网页。window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸setTimeout(函数,时间) 只执行一次setInterval(函数,时间) 无限执行clearTimeout/clearInterval(定时器名称) 清除定时器 document 对象:文档对象 可视区尺寸: document.documentElement.clientWidthdocument.documentElement.clientHeight 滚动条滚动距离: document.documentElement.clientScrollTopdocument.documentElement.clientScrollLeft 解决Chrome兼容性问题

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft = document.documentElement.scrollTop||document.body.scrollLeft;

location 对象:浏览器当前URL信息; location.herf = ‘url地址’hash 返回#号后面的字符串,不包含散列,则返回空字符串。host 返回服务器名称和端口号pathname 返回目录和文件名。 /project/test.htmlsearch 返回?号后面的所有值。port 返回URL中的指定的端口号,如URL中不包含端口号返回空字符串portocol 返回页面使用的协议。 http:或https: navigator 对象:浏览器本身信息; navigator.platform:操作系统类型;navigator.userAgent:浏览器设定的User-Agent字符串。navigator.appName:浏览器名称;navigator.appVersion:浏览器版本;navigator.language:浏览器设置的语言;userAgent是最常用的属性,用来完成浏览器判断。 screen 对象:客户端屏幕信息; screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。 history 对象:浏览器访问历史信息; history.back() - 加载历史列表中的前一个 URL。返回上一页。history.forward() - 加载历史列表中的下一个 URL。返回下一页。go(“参数”) -1表示上一页,1表示下一页。

AJAX

ajax工作原理

浏览器发生事件---->创建XMLHttpRequest 对象(异步的与服务器交换数据)---->发送HttpRequest---->服务器处理HttpRequest---->创建响应并将数据返回浏览器---->浏览器使用返回的数据并更新页面

向服务器发送请求

open() :open(method,url,async)

// 规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步)

send() :send(string)

//将请求发送到服务器。 string:仅用于 POST 请求

get/post差异

GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制 GET 请求只应当用于取回数据

POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求

CORS (跨域资源共享)

参考:阮一峰CORS详解

浏览器直接发出CORS请求。在头信息之中,增加一个Origin字段。 Origin字段用来说明,本次请求来自哪个源。服务器根据这个值,决定是否同意这次请求。服务器返回一个正常的http回应。浏览器查看回应的头信息没有包含Access-Control-Allow-Origin字段,检查自己是否所处其中。若不在其中,抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。若在其中,则CORS请求成功。

浏览器将CORS请求分为两类: 简单请求和非简单请求。

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。在正式通信之前,增加一次HTTP查询请求,称为"预检"请求。

预检请求的请求方法是OPTIONS,请求的头信息包括两个特殊字段:

Access-Control-Request-Method 该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法。Access-Control-Request-Headers 该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段。

服务器回应的其他CORS相关字段:

Access-Control-Allow-Methods 该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。Access-Control-Allow-Headers 如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。Access-Control-Max-Age 该字段可选,用来指定本次预检请求的有效期,单位为秒。在此期间,不用发出另一条预检请求。
最新回复(0)