常用Web Apis总结

2 个月前 · 来自专栏 web渗透测试

唐朝的鱼

什么是web api

Web API 顾名思义，是可以使用 HTTP 协议访问的 Web API。它是一个概念而不是一项技术。我们可以使用不同的技术（例如 JavaScript、Python等）构建 Web API，是一种允许不同软件应用程序之间进行通信的工具。js引擎中内置了window对象，我们常常用他来操作界面，如：

```js
window.alert(
  `相等吗？ 
  ${window.prompt === prompt}
  ${window.alert === alert}
  ${window.confirm === confirm} `)

同时还提供有：

history（历史对象back、go、forward）；
location（当前网址href、reload）；
localstorage（本地键值对数据库关闭不丢失数据：setitem、clear、getItem）
sessionstorage关闭后数据丢书的回话机制
close关闭窗口
open打开窗口

DOM对象模型

在前端开发中，我们常常使用 DOM （Document Object Model）操作网页的结构和内容，而使用 Web API 与服务器进行数据交互。

通过选择不同的对象，展示不同的内容

```js
// 根据id属性获取元素对象 
document.getElementById('password') 
// 返回 body元素对象 
document.body
// 返回 head元素对象 
document.head 
// 返回 当前窗口的标题 
document.title 
// 返回 当前窗口的url地址 
document.URL
```

能实现的功能有：

* 获取按钮等控件querySelector('#go')
* 注册事件处理addEventListener
* 获取网页内容控件（元素a、p、textarea）中的value属性
* 添加元素insertAdjacentHtml
* 删除元素remove、outerHtml=""
* 改变内容：innertest、style.color
* 控制元素是否显示display = none
* 和服务器通信http/socket
* 浏览器存储
* 本地文件访问
* 定位

元素通用属性

继承关系如下：

EventTarget <- Node <- Document <- Element <- HTMLElement <- HTMLAnchorElement

从根节点出发，包含的属性和功能有：

* EventTarge

包含addEventListener/removeEventListener

* Node

* childNode子节点对象

* textContent获取所有文本内容

* parentElement父节点对象

* Dcoument

* querySelector

* querySelectorAll

* createElement

* Element

* id

* children子元素（只读）

* innerHtml内部

* outerHtml整个

* getElementByxx

* querySelector

* closet最近上一级（可含自身）

* after添加弟弟节点

* before添加哥哥节点

* append追加儿子节点

* insertAdjacentHtml直接创建

* remove=outerHtml

* getAttribute获取属性

* setAttribute设置属性

* removeAttribute删除属性

* HTMLElement

* innerText

* outerText

* focus

* click

* style

元素自身属性

* a（HtmlAnchorElement）有href、protocol、host、origin属性

* button（HtmlButtonElement）有disable属性

* img（HtmlImageElement）有src、alt、height、width属性

* input（HtmlInputElement）有value、name、type、disable属性

事件处理

* 注册事件处理：addEventListener

```js
// 鼠标点击事件
element.addEventListener("click", handleFunc )
// 键盘事件
element.addEventListener("keydown", handleFunc )
```

* html内联方式，写在节点内部，不推荐

* 谁注册谁响应，也可以注册针对整个网页的处理函数

```js
document.addEventListener("keydown", salaryStats);
```

* onload属性，针对加载完后执行的JavaScript代码

```js
window.onload = () => { // 执行代码 };
```

* 事件处理顺序

红色向下依次为捕获阶段，目标阶段和冒泡阶段。

JQuery库

JQuery本身是一个构造函数，里面是一个css选择器。符号$等价于JQuery，方便简写。

* 安装

```
// 下载jquery.js文件后保存到远程服务器上，使用标签script加载
<head> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> </head>
```

* 添加appendto、prependto、insertBefore、insertAfter

* 删除$('xx').remove()

* 属性操作

* 获取attr（）

* 设置attr（x，y）

* 删除removeAttr（）

* style设置$(this).css('color', 'red')

* 构建异步消息：

```js
$.get('/api/mgr/signin')
$.post('/api/mgr/signin',
        username:'byhy',
        password:'abc'
// 或者
$.get({        
  url : '/api/mgr/signin',  
$.post({     
  url : '/api/mgr/signin', 
  data: {
    username:'byhy',
    password:'abc',
```

* 解析响应消息：

```js
$.ajax({
  url: '/api/mgr/signin',        
  type: 'POST', 
  data: 'username=byhy&password=88888888',
  // 正确返回
  success: function(data, textStatus, xhr) { 
    // 获取状态码
    console.log(textStatus);
    // 获取所有消息头
    console.log(xhr.getAllResponseHeaders());
    // 获取某个消息头
    console.log(xhr.getResponseHeader("content-length"));