recursal/MDN huggingface dataset:
IDBDatabase.deleteObjectStore()
===============================

**`deleteObjectStore()`** 方法从 `IDBDatabase` 中销毁指定名称的对象存储，及这个对象存储所包含的任何索引。

与 `IDBDatabase.createObjectStore` 一样，此方法*只能*在`versionchange` (en-US)事务中调用。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

dbInstance.deleteObjectStore(name);
```

### 参数

`name`

将要删除的对象存储的名字

### 异常

此方法可能会引发下列 `DOMException` 异常：

| Exception | Description |
| --- | --- |
| `InvalidStateError` | Occurs if the method was not called from a `versionchange` transaction callback. For older WebKit browsers, you must call first. |
| `TransactionInactiveError` | Occurs if a request is made on a source database that doesn't exist (e.g. has been deleted or removed.) In Firefox previous to version 41, an `InvalidStateError` was raised in this case as well, which was misleading; this has now been fixed (see Firefox bug 1176165.) |
| `NotFoundError` | You are trying to delete an object store that does not exist. Names are case sensitive. |

示例
--


```js
var dbName = "sampleDB";
var dbVersion = 2;
var request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function (e) {
  var db = request.result;
  if (e.oldVersion < 1) {
    db.createObjectStore("store1");
  }

  if (e.oldVersion < 2) {
    db.deleteObjectStore("store1");
    db.createObjectStore("store2");
  }

  // etc. for version < 3, 4...
};
```

Specification
-------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-deleteobjectstore① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (view example live.)
IDBDatabase.createObjectStore()
===============================

`IDBDatabase` 接口的 **`createObjectStore()`** 方法创建并返回一个新的 object store 或 index。

此方法接受一个参数作为 store 的名称，也接受一个可选的参数对象让你可以定义重要的可选属性。你可以用这个属性唯一的标识此 store 中的每个对象。因为参数是一个标识符，所以 store 中的每一个对象都应有此属性并保证此属性唯一。

此方法只能在 `versionchange` (en-US) 事务中被调用。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

var objectStore = IDBDatabase.createObjectStore(name);
var objectStore = IDBDatabase.createObjectStore(name, options);
```

### 参数

name

被创建的 object store 的名称。请注意创建空名称的 object store 是被允许的。

optionalParameters 可选

可选的对象，它的属性是此方法的可选参数，其中包括以下的属性：

| Attribute | Description |
| --- | --- |
| `keyPath` | key path (en-US) 被用在新的 object store 上。如果为空或未指定，object store 创建时将没有 key path，而是使用 out-of-line keys (en-US) 。你也能传一个数组作为 `keyPath` 。 |
| `autoIncrement` | 如果为 `true`, object store 有一个 key generator (en-US). 默认为 `false`。 |

未知参数将被忽略。

### 返回值

`IDBObjectStore`

新创建的 object store 对象。

### 异常

This method may raise a 此方法可能会抛出一个 `DOMException` 带有以下所列其中一种类型的 `DOMError` ：

| Exception | Description |
| --- | --- |
| `InvalidStateError` | 在非`versionchange`事务中调用时发生。在一些旧版本的 Webkit 浏览器，你必须先调用方法。 |
| `TransactionInactiveError` | 如果对不存在的源数据库发出请求（例如，已被删除的）。此外，在 Firefox 版本小于 41 中，会抛出误导性的 `InvalidStateError` 错误，这一问题现已修复（请参阅 Firefox bug 1176165）。 |
| `ConstraintError` | 数据库中已存同名的对象存储（名字区分大小写） |
| `InvalidAccessError` | 如果 `autoIncrement` 设置为 true，并且 keyPath 是空字符串或包含空字符串的数组。 |

Example
-------


```js
// 打开一个数据库
var request = window.indexedDB.open("toDoList", 4);

// This handler is called when a new version of the database
// is created, either when one has not been created before
// or when a new version number is submitted by calling
// window.indexedDB.open().
// This handler is only supported in recent browsers.
request.onupgradeneeded = function (event) {
  var db = event.target.result;

  db.onerror = function (event) {
    note.innerHTML += "<li>Error loading database.</li>";
  };

  // Create an objectStore for this database

  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

  // define what data items the objectStore will contain

  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });

  objectStore.createIndex("notified", "notified", { unique: false });

  note.innerHTML += "<li>Object store created.</li>";
};
```

Specification
-------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-createobjectstore① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (view example live.)
IDBDatabase.onversionchange
===========================

`IDBDatabase` 中的 **`onversionchange`** 事件处理器能处理版本更新事件，此事件能在任意地方 (很可能在同一台计算机上的另一个窗口/选项卡中) 导致数据库结构更改（`IDBOpenDBRequest.onupgradeneeded` (en-US) 事件 或 `IDBFactory.deleteDatabase` (en-US) 事件）的时候被触发。

**`onversionchange`** 与 `versionchange` 是不相同的事件（但两者是有关联的）。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

IDBDatabase.onversionchange = function(event) { ... }
```

举例
--

本例展示了一个创建新对象仓库的 `IDBOpenDBRequest.onupgradeneeded` (en-US) 代码块；代码中包含用于处理失败操作的 `onerror` 和 `onabort` 函数，以及一个 onversionchange 函数用以在数据库结构被改变时通知用户。


```js
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  db.onerror = function(event) {
    note.innerHTML += '<li>Error opening database.</li>';
  };

  db.onabort = function(event) {
    note.innerHTML += '<li>Database opening aborted!</li>';
  };

  // 给这个数据库创建对象仓库

  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

  // 定义对象仓库中包含的数据项

  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });

  objectStore.createIndex("notified", "notified", { unique: false });

  note.innerHTML += '<li>Object store created.</li>';

  db.onversionchange = function(event) {
    note.innerHTML += '<li>a database change has occurred; you should refresh this
                       browser window, or close it down and use the other open version of
                       this application, wherever it exists.</li>';
  };
};
```

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

更多参考
----

* 使用 IndexedDB
* 开始了解事务：`IDBDatabase`
* 使用事务：`IDBTransaction`
* 设置键值范围：`IDBKeyRange`
* 检索与修改数据：`IDBObjectStore`
* 使用游标：`IDBCursor`
* 参考用例：To-do Notifications (view example live.)
* `versionchange` 事件
HTMLInputElement.setSelectionRange()
====================================

**`HTMLInputElement.setSelectionRange`** 方法用于设定`<input>` 或 `<textarea>` 元素中当前选中文本的起始和结束位置。

在较新的浏览器中，你可以通过一个可选的 selectionDirection 来指定文本选中的方向。比如通过点击和拖动从结束位置往起始位置选中一个字符串。

每次调用这个这个方法都会更新 `HTMLInputElement` 的 `selectionStart`, `selectionEnd` 和 `selectionDirection` 属性。

要注意的是，在 WHATWG forms spec 中，`selectionStart`, `selectionEnd` 属性和 `setSelectionRange` 方法只能应用于类型为文本、搜索、链接、电话号码和密码的输入。Chrome 从版本 33 开始会在访问其余类型的这些属性和方法时抛出异常。例如，输入类型为数字时会抛出：“不能从'HTMLInputElement'中读取'selectionStart'属性：输入元素的类型 ('number') 不支持选择（Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection）”。

如果你希望**全选**输入元素中的文本，你可以使用 HTMLInputElement.select() 方法。

语法
--
```

element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
```

### 参数

如果 `selectionEnd` 小于 `selectionStart`，则二者都会被看作 `selectionEnd`。

* `selectionStart`
    + : 被选中的第一个字符的位置索引，从 0 开始。如果这个值比元素的 `value` 长度还大，则会被看作 `value` 最后一个位置的索引。
* `selectionEnd`
    + : 被选中的最后一个字符的 *下一个* 位置索引。如果这个值比元素的 value 长度还大，则会被看作 value 最后一个位置的索引。
* `selectionDirection` 可选
    + : 一个表示选择方向的字符串，可能的值有：
* `"forward"`
* `"backward"`
* `"none"` 默认值，表示方向未知或不相关。
示例
--

在这个示例中，按下按钮以选择文本框中第三、四、五个字符（即“Mozilla”中的“zil”）。

### HTML
```

<input type="text" id="text-box" size="20" value="Mozilla">
<button onclick="selectText()">Select text</button>
```

### JavaScript
```

function selectText() {
  const input = document.getElementById('text-box');
  input.focus();
  input.setSelectionRange(2, 5);
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-textarea/input-setselectionrange-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关内容
----

* `<input>`
* `<textarea>`
* `HTMLInputElement`
* `Selection`
HTMLInputElement.multiple
=========================

**`HTMLInputElement.multiple`** 属性表示一个 input 是否可以有多个值。目前只有火狐支持 `<input type="file">`存有多个值。

实例
--


```js
// fileInput is a <input type=file multiple>
let fileInput = document.getElementById("myfileinput");

if (fileInput.multiple == true) {
  for (let i = 0; i < fileInput.files.length; i++) {
    // Loop fileInput.files
  }

  // Only one file available
} else {
  let file = fileInput.files.item(0);
}
```

See also
--------

* FileList
* Bug 523771 - Support <input type=file multiple>
Specification
-------------

* The multiple attribute (HTML 5 working draft)
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLInputElement.labels
=======================

**`HTMLInputElement.labels`** 为只读属性，它返回一个`NodeList` 实例，绑定当前的`<input>` 节点的`<label>` 元素。

语法
--
```

var labelElements = input.labels;
```

### Return value

`NodeList` 包含 `<label>` 元素和 `<input>` 元素。

示例
--

### HTML


```html
<label id="label1" for="test">Label 1</label>
<input id="test" />
<label id="label2" for="test">Label 2</label>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", function () {
  const input = document.getElementById("test");
  for (var i = 0; i < input.labels.length; i++) {
    console.log(input.labels[i].textContent); // "Label 1" and "Label 2"
  }
});
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
GlobalEventHandlers.onselectionchange
=====================================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`GlobalEventHandlers.onselectionchange`** 属性表示当一个 `selectstart` 事件被触发，比如在页面上选中文字变化时，会执行绑定的事件处理器

语法
--
```

obj.onselectionchange = function;
```

示例
--


```js
var selection;

document.onselectionchange = function () {
  console.log("New selection made");
  selection = document.getSelection();
};
```


完整例子请参阅Key quote generator demo.

规范
--

| Specification |
| --- |
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLInputElement.select()
=========================

**`HTMLInputElement.select()`** 方法选中一个 `<textarea>` 元素或者一个带有 text 字段的 `<input>` 元素里的所有内容。

语法
--
```

element.select()
```

示例
--

点击这个例子的按钮以选中所有在`<input>`元素中的文字

HTML


```html
<input type="text" id="text-box" size="20" value="Hello world!" />
<button onclick="selectText()">Select text</button>
```


JavaScript


```js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.select();
}
```

### 结果

注意
--

调用 `element.select()` 并不一定会使得该 input 元素被 focused，所以它经常和 `HTMLElement.focus()` (en-US) 一起使用。

规范
--

| Specification |
| --- |
| HTML Standard # dom-textarea/input-select |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关链接
----

* `<input>`
* `<textarea>`
* `HTMLInputElement`
* `HTMLInputElement.setSelectionRange`
HTMLInputElement：webkitdirectory 属性
===================================

**`HTMLInputElement.webkitdirectory`** 是一个反应了 HTML 属性 `webkitdirectory` 的属性，其指示 `<input>` 元素应该让用户选择文件目录而非文件。在选择文件目录后，该目录及其整个内容层次结构将包含在所选项目集内。可以使用 `webkitEntries` (en-US) 属性获取选定的文件系统条目。

**备注：** 该属性在规范中被称为 `webkitEntries` 的原因是，其起源于 Google Chrome 特定的 API。它有可能会被重命名。

值
-

一个布尔值；如果设置为 `true`，则 `<input>` 元素只允许选择目录；如果设置为 `false`，则只允许选择文件。

理解结果
----

在用户进行选择后，`files` 里的每个 `File` 对象都会将其 `File.webkitRelativePath` 属性设置为所选目录内文件所在的相对路径。例如，考虑以下文件系统：

* PhotoAlbums
    + Birthdays
        - Jamie's 1st birthday
            * PIC1000.jpg
            * PIC1004.jpg
            * PIC1044.jpg
        - Don's 40th birthday
            * PIC2343.jpg
            * PIC2344.jpg
            * PIC2355.jpg
            * PIC2356.jpg
    + Vacations
        - Mars
            * PIC5533.jpg
            * PIC5534.jpg
            * PIC5556.jpg
            * PIC5684.jpg
            * PIC5712.jpg

如果用户选择了 `PhotoAlbums`，则文件列表上将会包含上面列出的每个文件（而不包含目录）的 `File` 对象。条目 `PIC2343.jpg` 的 `webkitRelativePath` 属性值将会是 `PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg`。即使 `FileList` 是扁平的，这也使得知道层次结构成为可能。

**备注：** 在 *Chromium < 72* 的版本中，`webkitRelativePath` 的行为表现有所不同。有关更多详细信息，请参见此 bug。

示例
--

这个示例提供了一个目录选择器，它允许用户选择一个或多个目录。当触发 `change` 事件时，将生成并显示所选目录层次结构中包含的所有文件的列表。

### HTML


```html
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>
```

### JavaScript


```js
document.getElementById("filepicker").addEventListener(
  "change",
  (event) => {
    let output = document.getElementById("listing");
    for (const file of event.target.files) {
      let item = document.createElement("li");
      item.textContent = file.webkitRelativePath;
      output.appendChild(item);
    }
  },
  false,
);
```

### 结果

规范
--

| Specification |
| --- |
| File and Directory Entries API # dom-htmlinputelement-webkitdirectory |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件和目录条目 API
* `HTMLInputElement.webkitEntries` (en-US)
* `File.webkitRelativePath`
HTMLInputElement: invalid event
===============================

若一个可提交元素在检查有效性时，不符合对它的约束条件，则会触发 **`invalid`** 事件。

|  |  |
| --- | --- |
| 冒泡 | 否 |
| 可取消 | 是 |
| 接口 | `Event` |
| 事件处理程序属性 | `GlobalEventHandlers.oninvalid` |

这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 `invalid` 事件。对可提交元素有效性的检查是在提交父元素 `<form>` 之前或调用父元素 `<form>` 或元素自己的 `checkValidity()` 方法之后。

这个事件不会在 `blur` 事件中触发。

示例
--

如果表单提交时有无效值，检查可提交元素时发现了错误，则 `invalid` 事件会在那个无效元素上触发。在这个例子中，当输入无效值触发 `invalid` 事件时，这个无效值被记录下来。

### HTML


```html
<form action="#">
  <ul>
    <li>
      <label
 >Enter an integer between 1 and 10:
        <input type="number" min="1" max="10" required
 /></label>
    </li>
    <li><input type="submit" value="submit" /></li>
  </ul>
</form>
<p id="log"></p>
```

### JavaScript


```js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("invalid", logValue);

function logValue(e) {
  log.textContent += e.target.value;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # event-invalid |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* HTML `<form>` 元素
* 相关事件：`submit`
* CSS `:invalid` 伪类
select
======

**`select`** 选择某些文本时会触发事件。

该事件不适用于所有语言的所有元素。例如，在 HTML，`select`事件只能在表单<input type="text">和 `<textarea>`元素上触发。

General info
------------

| Interface | `UIEvent` if generated from a user interface,
 `Event` otherwise
  |
| Bubbles | Yes |
| Cancelable | No |
| Target | `Element` |
| Default Action | None |

属性
--

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` 只读  | `DOMString` | The type of event. |
| `bubbles` 只读  | `Boolean` (en-US) | Whether the event normally bubbles or not. |
| `cancelable` 只读  | `Boolean` (en-US) | Whether the event is cancellable or not. |
| `view` 只读  | `WindowProxy` | `document.defaultView` (`window` of the document) |
| `detail` 只读  | `long` (`float`) | 0. |

示例
--

### HTML


```html
<input value="Try selecting some text in this element." />
<p id="log"></p>
```

### JavaScript


```js
function logSelection(event) {
  const log = document.getElementById("log");
  const selection = event.target.value.substring(
    event.target.selectionStart,
    event.target.selectionEnd,
  );
  log.textContent = `You selected: ${selection}`;
}

const input = document.querySelector("input");
input.addEventListener("select", logSelection);
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # event-select |
| HTML Standard # handler-onselect |

参见
--

* `GlobalEventHandlers.onselect`
CountQueuingStrategy.size()
===========================

`CountQueuingStrategy` 接口的 **`size()`** 方法始终返回 `1`，因此队列的总大小是队列中所有分块的数量。

语法
--


```js
size()
```

### 参数

无。

### 返回值

`1`。

示例
--


```js
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });

const writableStream = new WritableStream(
  {
    // Implement the sink
    write(chunk) {
      // …
    },
    close() {
      // …
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size();
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-cqs-size② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `CountQueuingStrategy()` 构造函数
CountQueuingStrategy：highWaterMark 属性
=====================================

只读属性 **`CountQueuingStrategy.highWaterMark`** 返回在应用背压之前，内置队列可以包含的分块总数。

值
-

一个整数，表示分块的数量。

示例
--


```js
const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size(chunk);
console.log(`highWaterMark value: ${queuingStrategy.highWaterMark}$`);
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-cqs-high-water-mark① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `CountQueuingStrategy()` 构造函数
CountQueuingStrategy()
======================

**`CountQueuingStrategy()`** 构造函数创建并返回一个 `CountQueuingStrategy` 对象实例。

语法
--


```js
new CountQueuingStrategy(highWaterMark)
```

### 参数

`highWaterMark`

一个包含 `highWaterMark` 属性的对象。这个属性是一个非负整数，定义了在应用背压之前内部队列包含的分块的总数。

### 返回值

一个 `CountQueuingStrategy` 对象实例。

### 异常

无。

示例
--


```js
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });

const writableStream = new WritableStream(
  {
    // Implement the sink
    write(chunk) {
      // …
    },
    close() {
      // …
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size();
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-cqs-constructor① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `CountQueuingStrategy`
XMLHttpRequest.responseURL
==========================

只读属性 **`XMLHttpRequest.responseURL`** 返回响应的序列化 URL，如果 URL 为空则返回空字符串。如果 URL 有锚点，则位于 URL # 后面的内容会被删除。如果 URL 有重定向，`responseURL` 的值会是经过多次重定向后的最终 URL。

实例
--


```js
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/test", true);
xhr.onload = function () {
  console.log(xhr.responseURL); // http://example.com/test
};
xhr.send(null);
```

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-responseurl-attribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
loadstart
=========

当程序开始加载时，loadstart 事件将被触发。这个事件可以被 `XMLHttpRequest` 调用，也适用于 `<img>` 和 `<video>` 元素。

基本信息
----

规范文档

Progress

接口

ProgressEvent

冒泡

No

可取消

No

目标

Element

默认动作

None

属性
--

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` 只读  | `DOMString` | The type of event. |
| `bubbles` 只读  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` 只读  | `Boolean` | Whether the event is cancellable or not. |
| `lengthComputable` 只读  | `Boolean` | Specifies whether or not the total size of the transfer is known. Read only. |
| `loaded` 只读  | unsigned long (long) | The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only. |
| `total` 只读  | unsigned long (long) | The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only. |

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-loadstart |
| XMLHttpRequest Standard # handler-xhr-onloadstart |

参见
--

* 相关事件：`loadend`、`load`、`progress`、`error`、`abort`
* 监测进度
XMLHttpRequest.response
=======================

`XMLHttpRequest` 的 **`response`** 属性返回响应的正文。返回的类型为 `ArrayBuffer`、`Blob`、`Document`、JavaScript `Object` 或字符串中的一个。这取决于请求的 `responseType` 属性。

值
-

一个对象，其类型取决于 `responseType` 的值。你可以尝试设置 `responseType` 的值，以便请求特定的类型的数据。 `responseType` 要在调用 `open()` 初始化请求之后以及在调用 `send()` 发送请求到服务器之前设置。

如果请求尚未完成或未成功，则取值是 `null`。例外的，读取文本数据时如果将 `responseType` 的值设置成 `"text"` 或空字符串（`""`）而请求状态还是 `LOADING` `readyState`（3）时，`response` 包含到目前为止该请求已经取得的内容。

示例
--

此示例提供了一个方法——`load()`，它可以从服务器加载和处理页面。它通过创建一个 `XMLHttpRequest` 对象并为 `readystatechange` 事件创建一个监听器。这样的话，当 `readyState` 变成 `DONE`（4）时就会获取 `response` 并将其传递给 `load()` 中提供的回调函数。

返回的内容会被作为原始文本数据处理（因为这里没有覆盖 `responseType` 的默认值）。


```js
const url = "somePage.html"; // 一个本地页面

function load(url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      callback(xhr.response);
    }
  };

  xhr.open("GET", url, true);
  xhr.send("");
}
```

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-response-attribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 XMLHttpRequest
* 获取文本和 HTML/XML 数据：`XMLHttpRequest.responseText` 和 `XMLHttpRequest.responseXML`
XMLHttpRequest.setRequestHeader()
=================================

**XMLHttpRequest.setRequestHeader()** 是设置 HTTP 请求头部的方法。此方法必须在 `open()` 方法和 `send()` 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。

如果没有设置 `Accept` 属性，则此发送出`send()` 的值为此属性的默认值：`*/*`。

安全起见，有些请求头的值只能由 user agent 设置：forbidden header names 和forbidden response header names。

**备注：** 自定义一些 header 属性进行跨域请求时，可能会遇到"**not allowed by Access-Control-Allow-Headers in preflight response**"，你可能需要在你的服务端设置 "Access-Control-Allow-Headers"。

语法
--
```

myReq.setRequestHeader(header, value);
```

### 参数

`header`

属性的名称。

`value`

属性的值。

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-setrequestheader()-method |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参考
--

使用 XMLHttpRequest
XMLHttpRequest：withCredentials 属性
=================================

**`XMLHttpRequest.withCredentials`** 属性是一个布尔值，它指示了是否该使用类似 cookie、Authorization 标头或者 TLS 客户端证书等凭据进行跨站点访问控制（`Access-Control`）请求。设置 `withCredentials` 对同源请求是无效的。

此外，这个标志还用于指示何时在响应中忽略 cookie。默认值是 `false`。除非在发送 `XMLHttpRequest` 请求之前，将 `withCredentials` 设置为 `true`，否则来自不同域的 `XMLHttpRequest` 响应无法为自己的域设置 cookie 值。而通过设置 `withCredentials` 为 true 获得第三方 cookie，仍将遵循同源策略，因此请求的脚本无法通过 document.cookie 或者响应标头访问。

**备注：** 永远不会影响到同源请求。

**备注：** 不同域下的 `XmlHttpRequest` 响应，不论其 `Access-Control-` 标头设置什么值，都无法为它自身站点设置 Cookie 值，除非它在请求之前将 `withCredentials` 设为 true。

值
-

布尔值。

示例
--


```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.withCredentials = true;
xhr.send(null);
```

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-withcredentials-attribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.