From 83509c9065cc743eb8ab2f68623a225538dd8dfb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO <mfujimot@gmail.com> Date: Thu, 23 Nov 2023 01:06:56 +0900 Subject: [PATCH] =?UTF-8?q?#17051=20=E3=81=AE=E5=A4=89=E6=9B=B4=E7=B5=90?= =?UTF-8?q?=E6=9E=9C=E3=82=92=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/_redirects.txt | 22 +- files/ja/_wikihistory.json | 25 - .../fetching_data/index.md | 56 --- .../working_with_the_history_api/index.md | 431 ------------------ .../htmldialogelement/cancel_event/index.md | 94 ---- 5 files changed, 11 insertions(+), 617 deletions(-) delete mode 100644 files/ja/conflicting/learn/javascript/client-side_web_apis/fetching_data/index.md delete mode 100644 files/ja/conflicting/web/api/history_api/working_with_the_history_api/index.md delete mode 100644 files/ja/orphaned/web/api/htmldialogelement/cancel_event/index.md diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 09b1274fd4a7f8..133f6a8c275bd2 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -4,11 +4,11 @@ # yarn content add-redirect <fromURL> <toURL> # # FROM-URL TO-URL -/ja/docs/AJAX /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data -/ja/docs/AJAX/Community /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data -/ja/docs/AJAX/Getting_Started /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data -/ja/docs/AJAX:Community /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data -/ja/docs/AJAX:Getting_Started /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data +/ja/docs/AJAX /ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data +/ja/docs/AJAX/Community /ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data +/ja/docs/AJAX/Getting_Started /ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data +/ja/docs/AJAX:Community /ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data +/ja/docs/AJAX:Getting_Started /ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data /ja/docs/API /ja/docs/Web/API /ja/docs/API/Document /ja/docs/Web/API/Document /ja/docs/API/Document/Document /ja/docs/Web/API/Document/Document @@ -2835,7 +2835,7 @@ /ja/docs/Web/API/GlobalFetch /ja/docs/Web/API/fetch /ja/docs/Web/API/GlobalFetch/fetch /ja/docs/Web/API/fetch /ja/docs/Web/API/HTMLContentElement /ja/docs/Web/API/HTMLSlotElement -/ja/docs/Web/API/HTMLDialogElement/cancel_event /ja/docs/orphaned/Web/API/HTMLDialogElement/cancel_event +/ja/docs/Web/API/HTMLDialogElement/cancel_event /ja/docs/Web/API/HTMLDialogElement /ja/docs/Web/API/HTMLElement/animationcancel_event /ja/docs/Web/API/Element/animationcancel_event /ja/docs/Web/API/HTMLElement/animationend_event /ja/docs/Web/API/Element/animationend_event /ja/docs/Web/API/HTMLElement/animationiteration_event /ja/docs/Web/API/Element/animationiteration_event @@ -2910,7 +2910,7 @@ /ja/docs/Web/API/HTMLTableRowElement.insertCell /ja/docs/Web/API/HTMLTableRowElement/insertCell /ja/docs/Web/API/HTMLTableRowElement.rowIndex /ja/docs/Web/API/HTMLTableRowElement/rowIndex /ja/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items /ja/docs/orphaned/Web/API/HTML_Drag_and_Drop_API/Multiple_items -/ja/docs/Web/API/History_API/Example /ja/docs/conflicting/Web/API/History_API/Working_with_the_History_API +/ja/docs/Web/API/History_API/Example /ja/docs/Web/API/History_API/Working_with_the_History_API /ja/docs/Web/API/IDBDatabase.close /ja/docs/Web/API/IDBDatabase/close /ja/docs/Web/API/IDBDatabase.createObjectStore /ja/docs/Web/API/IDBDatabase/createObjectStore /ja/docs/Web/API/IDBDatabase.name /ja/docs/Web/API/IDBDatabase/name @@ -3879,9 +3879,9 @@ /ja/docs/Web/Events/vrdisplaydisconnected /ja/docs/Web/API/Window/vrdisplaydisconnect_event /ja/docs/Web/Events/vrdisplaypresentchange /ja/docs/Web/API/Window/vrdisplaypresentchange_event /ja/docs/Web/Events/waiting /ja/docs/Web/API/HTMLMediaElement/waiting_event -/ja/docs/Web/Guide/AJAX /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data -/ja/docs/Web/Guide/AJAX/Community /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data -/ja/docs/Web/Guide/AJAX/Getting_Started /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data +/ja/docs/Web/Guide/AJAX /ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data +/ja/docs/Web/Guide/AJAX/Community /ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data +/ja/docs/Web/Guide/AJAX/Getting_Started /ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data /ja/docs/Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support /ja/docs/Mozilla/Firefox/Releases/3/WAI_ARIA_Live_Regions_API_Support /ja/docs/Web/Guide/API/Gamepad /ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API /ja/docs/Web/Guide/API/Vibration /ja/docs/Web/API/Vibration_API @@ -3925,7 +3925,7 @@ /ja/docs/Web/Guide/DOM/Events/Touch_events /ja/docs/Web/API/Touch_events /ja/docs/Web/Guide/DOM/Events/Touch_events/Supporting_both_TouchEvent_and_MouseEvent /ja/docs/Web/API/Pointer_events /ja/docs/Web/Guide/DOM/Manipulating_the_browser_history /ja/docs/Web/API/History_API -/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example /ja/docs/conflicting/Web/API/History_API/Working_with_the_History_API +/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example /ja/docs/Web/API/History_API/Working_with_the_History_API /ja/docs/Web/Guide/DOM/Manipulating_the_browser_history/Working_with_the_History_API /ja/docs/Web/API/History_API/Working_with_the_History_API /ja/docs/Web/Guide/DOM/Using_full_screen_mode /ja/docs/Web/API/Fullscreen_API /ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM /ja/docs/Web/API/Document_Object_Model/Whitespace diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index f195bc30f15b9d..92cb1d8dd743f4 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -30185,23 +30185,6 @@ "modified": "2019-03-18T20:53:07.981Z", "contributors": ["mfuji09"] }, - "conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data": { - "modified": "2020-08-12T11:49:11.332Z", - "contributors": [ - "mfuji09", - "silverskyvicto", - "chrisdavidmills", - "fscholz", - "ethertank", - "Potappo", - "Mgjbot", - "Summit677", - "Marsf", - "Shimono", - "Taken Bot", - "Dria" - ] - }, "conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript": { "modified": "2020-12-06T14:17:48.495Z", "contributors": [ @@ -30394,10 +30377,6 @@ "modified": "2020-10-15T22:18:26.930Z", "contributors": ["Wind1808"] }, - "conflicting/Web/API/History_API/Working_with_the_History_API": { - "modified": "2020-02-15T02:40:44.391Z", - "contributors": ["mfuji09", "silverskyvicto"] - }, "conflicting/Web/API/SyncEvent": { "modified": "2020-10-15T22:32:47.070Z", "contributors": ["eltociear"] @@ -30571,10 +30550,6 @@ "modified": "2020-10-15T22:28:00.883Z", "contributors": ["mfuji09"] }, - "orphaned/Web/API/HTMLDialogElement/cancel_event": { - "modified": "2020-10-15T22:28:07.370Z", - "contributors": ["mfuji09"] - }, "orphaned/Web/API/HTMLElement/contextMenu": { "modified": "2020-10-15T22:22:28.350Z", "contributors": ["Wind1808"] diff --git a/files/ja/conflicting/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/ja/conflicting/learn/javascript/client-side_web_apis/fetching_data/index.md deleted file mode 100644 index f724014d899c6a..00000000000000 --- a/files/ja/conflicting/learn/javascript/client-side_web_apis/fetching_data/index.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: AJAX -slug: conflicting/Learn/JavaScript/Client-side_web_APIs/Fetching_data -original_slug: Web/Guide/AJAX ---- - -## [はじめに](/ja/docs/Web/Guide/AJAX/Getting_Started) - -**A**synchronous **J**avaScript **a**nd **X**ML (AJAX) はそれ自体がある種の技術というわけではありませんが、 Jesse James Garrett によって 2005 年に作られた言葉で、既存の技術同士を組み合わせた新しいアプローチを意味します。組み合わされる技術は、[HTML](/ja/docs/Web/HTML), [XHTML](/ja/docs/Glossary/XHTML), [CSS](/ja/docs/Web/CSS), [JavaScript](/ja/docs/Web/JavaScript), [DOM](/ja/docs/Web/API/Document_Object_Model), [XML](/ja/docs/Web/XML), [XSLT](/ja/docs/Web/XSLT), そして最も重要なものは {{domxref("XMLHttpRequest")}} オブジェクトです。 -これらの技術が AJAX のモデルで組み合わされると、ウェブアプリケーションはより早く、表示されているページ全てを再読み込みすることなく、ユーザーインターフェイスを逐次更新できるようになります。そして、アプリケーションにより早い表示、より良い応答性をもたらします。 - -Ajax の X は XML を表していますが、 {{glossary("JSON")}} の方がより軽く JavaScript の一部であることなど数多くの利点があるため、今日では XML よりもよく使われています。 JSON と XML はどちらも Ajax モデルの情報をパッケージ化するために使用されます。 - -## ドキュメント - -- [はじめに](/ja/docs/Web/Guide/AJAX/Getting_Started) - - : この記事では AJAX の基本について説明し、始めるために 2 つの簡単な実例を紹介します。 -- [`XMLHttpRequest` API の使用](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) - - - : {{domxref("XMLHttpRequest")}} API は、Ajax のコアです。この記事では、次のような Ajax 技術の使用方法について説明します。 - - - [サーバーのレスポンスの分析と操作](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#handling_responses) - - [リクエストの進捗のモニタリング](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#monitoring_progress) - - [フォームの送信とバイナリーファイルのアップロード](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#submitting_forms_and_uploading_files) – _純粋な Ajax_、もしくは {{domxref("FormData")}} オブジェクトを使用します - - [ウェブワーカー](/ja/docs/Web/API/Worker)内部における Ajax の使用 - -- [Fetch API](/ja/docs/Web/API/Fetch_API) - - : Fetch API はリソースをフェッチするためのインターフェイスを提供します。 {{domxref("XMLHTTPRequest")}} を使用した人なら誰にでも馴染みのあるように見えますが、この API はより強力で柔軟な機能セットを提供します。 -- [Server-sent イベント](/ja/docs/Web/API/Server-sent_events) - - : 伝統的に、ウェブページは新しいデータを受信するためにサーバーにリクエストを送信しなければなりません。つまり、ページはサーバーにデータを要求します。サーバーが送信したイベントでは、サーバーがメッセージをウェブページにプッシュすることで、いつでもウェブページに新しいデータを送信することができます。これらの着信メッセージは、ウェブページ内の*[イベント](/ja/docs/Web/API/Event)+データ*として扱うことができます。[サーバー送信イベントの使用](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)を参照してください。 -- [_純粋な Ajax_ ナビゲーションサンプル](/ja/docs/Web/API/History_API/Example) - - : この記事では、_純粋な Ajax_ ウェブサイトの 3 つのページから構成された実用的な (最小限の) 例を提供します。 -- [バイナリーデータの送信と受信](/ja/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data) - - : `XMLHttpRequest` オブジェクトの `responseType` プロパティを設定して、予想されるレスポンスタイプをサーバーから変更することができます。可能な値は空文字列 (デフォルト), `arraybuffer`, `blob`, `document`, `json`, `text` です。`response` のプロパティには、 `responseType` に従って `ArrayBuffer`, `Blob`, `Document`, `JSON`、または string のようなエンティティ本文が含まれます。この記事では、Ajax の I/O 技術をいくつか紹介します。 -- [XML](/ja/docs/Web/XML) - - : **Extensible Markup Language (XML)** は、特定の目的のマークアップ言語を作成する W3C 推奨の汎用マークアップ言語です。これは SGML の単純化されたサブセットであり、多くの異なる種類のデータを記述することができます。その主な目的は、異なるシステム、特にインターネットを介して接続されたシステム間でのデータの共有を容易にすることです。 -- [XML の解釈とシリアライズ](/ja/docs/Web/Guide/Parsing_and_serializing_XML) - - : 文字列、ファイル、または JavaScript を使用して XML 文書を解釈する方法、XML 文書を文字列、Javascript Object Tree (JXON) またはファイルにシリアル化する方法 -- [XPath](/ja/docs/Web/XPath) - - : XPath は **X**ML **Path** Language (XML パス言語) の略で、[XML](/ja/docs/Web/XML) 文書のさまざまな部分をアドレス指定する (指す) 柔軟な方法を提供する非 XML 構文を使用します。これと同様に、ドキュメント内のアドレス指定されたノードをテストしてパターンに一致するかどうかを判断することもできます。 -- {{domxref("FileReader")}} API - - : `FileReader` API を使用すると、ウェブアプリケーションがユーザーのコンピューターに格納されているファイル (または生データバッファ) の内容を非同期に読み取ることができ、読み取るファイルまたはデータを {{domxref("File")}} または {{domxref("Blob")}} オブジェクトで特定します。 File オブジェクトはユーザーが {{HTMLElement("input")}} 要素を使用して選択した結果として返される {{domxref("FileList")}} オブジェクト、ドラッグ&ドロップ操作の {{domxref("DataTransfer")}} オブジェクト、 {{domxref("HTMLCanvasElement")}} の `mozGetAsFile()` API から取得することができます。 -- [XMLHttpRequest における HTML](/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) - - : W3C の [XMLHttpRequest](https://xhr.spec.whatwg.org/) 仕様書では、もともと XML の解析のみに対応していた {{domxref("XMLHttpRequest")}} に HTML 解析の対応が追加されています。この機能を使用すると、ウェブアプリケーションは `XMLHttpRequest` を使用して解析された DOM として HTML リソースを取得できます。 - -## ツール - -- [axios](https://github.com/axios/axios) - - : {{jsxref("Promise")}} ベースの {{glossary("HTTP")}} クライアントで、内部的に `XMLHttpRequest` を使用しています。 - -## 関連情報 - -- [Ajax: ウェブアプリケーションへの新しいアプローチ](https://pdfs.semanticscholar.org/c440/ae765ff19ddd3deda24a92ac39cef9570f1e.pdf) - - : Adaptive Path の Jesse James Garrett は 2005 年 2 月にこの記事を書いて、 Ajax とその関連概念を紹介しました。 -- [XMLHttpRequest の仕様書](https://xhr.spec.whatwg.org/) - - : WHATWG ライブ標準 diff --git a/files/ja/conflicting/web/api/history_api/working_with_the_history_api/index.md b/files/ja/conflicting/web/api/history_api/working_with_the_history_api/index.md deleted file mode 100644 index 842573d84c870c..00000000000000 --- a/files/ja/conflicting/web/api/history_api/working_with_the_history_api/index.md +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: Ajax ナビゲーションの例 -slug: conflicting/Web/API/History_API/Working_with_the_History_API -original_slug: Web/API/History_API/Example ---- - -これは 3 つのページ (first_page.php、second_page.php、third_page.php) で構成された AJAX ウェブサイトの例です。どのように動作するかを確認するには、以下のファイル (または git clone [https://github.com/giabao/mdn-ajax-nav-example.git](https://github.com/giabao/mdn-ajax-nav-example)) を作成してください。 - -> **メモ:** このメカニズム内の {{HTMLElement("form")}} 要素を完全に統合するには、[フォームの送信とファイルのアップロード](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#フォームの送信とファイルのアップロード)の段落を見てください。 - -**first_page.php**: - -```php -<?php - $page_title = "First page"; - - $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - $as_json = true; - ob_start(); - } else { -?> -<!DOCTYPE html> -<html lang="en-US"> -<head> -<?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; -?> -</head> - -<body> - -<?php include "include/before_content.php"; ?> - -<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> - -<div id="ajax-content"> -<?php } ?> - - <p>This is the content of <strong>first_page.php</strong>.</p> - -<?php - if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); - } else { -?> -</div> - -<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> - -<?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } -?> -``` - -**second_page.php**: - -```php -<?php - $page_title = "Second page"; - - $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - $as_json = true; - ob_start(); - } else { -?> -<!DOCTYPE html> -<html lang="en-US"> -<head> -<?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; -?> -</head> - -<body> - -<?php include "include/before_content.php"; ?> - -<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> - -<div id="ajax-content"> -<?php } ?> - - <p>This is the content of <strong>second_page.php</strong>.</p> - -<?php - if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); - } else { -?> -</div> - -<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> - -<?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } -?> -``` - -**third_page.php**: - -```php -<?php - $page_title = "Third page"; - $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a PHP variable.</p>"; - - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - echo json_encode(array("page" => $page_title, "content" => $page_content)); - } else { -?> -<!DOCTYPE html> -<html lang="en-US"> -<head> -<?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; -?> -</head> - -<body> - -<?php include "include/before_content.php"; ?> - -<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> - -<div id="ajax-content"> -<?php echo $page_content; ?> -</div> - -<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> - -<?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } -?> -``` - -**css/style.css**: - -```css -#ajax-loader { - position: fixed; - display: table; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -#ajax-loader > div { - display: table-cell; - width: 100%; - height: 100%; - vertical-align: middle; - text-align: center; - background-color: #000000; - opacity: 0.65; -} -``` - -**include/after_content.php**: - -```php -<p>This is the footer. It is shared between all Ajax pages.</p> -``` - -**include/before_content.php**: - -```php -<p> -[ <a class="ajax-nav" href="first_page.php">First example</a> -| <a class="ajax-nav" href="second_page.php">Second example</a> -| <a class="ajax-nav" href="third_page.php">Third example</a> -| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ] -</p> -``` - -**include/header.php**: - -```html -<meta charset="UTF-8" /> -<script src="js/ajax_nav.js"></script> -<link rel="stylesheet" href="css/style.css" /> -``` - -**js/ajax_nav.js**: - -```js -"use strict"; - -const ajaxRequest = new (function () { - let req; - let isLoading = false; - let updateURL = false; - - /* customizable constants */ - const targetId = "ajax-content"; - const viewKey = "view_as"; - const ajaxClass = "ajax-nav"; - - /* not customizable constants */ - const searchRegex = /\?.*$/; - const hostRegex = /^[^?]*\?*&*/; - const viewRegex = new RegExp(`&${viewKey}\\=[^&]*|&*$`, "i"); - const endQstMarkRegex = /\?$/; - const loadingBox = document.createElement("div"); - const cover = document.createElement("div"); - const loadingImg = new Image(); - const pageInfo = { - title: null, - url: location.href, - }; - /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ - const HTTP_STATUS = { - 100: "Continue", - 101: "Switching Protocols", - 102: "Processing", - 200: "OK", - 201: "Created", - 202: "Accepted", - 203: "Non-Authoritative Information", - 204: "No Content", - 205: "Reset Content", - 206: "Partial Content", - 207: "Multi-Status", - 208: "Already Reported", - 226: "IM Used", - 300: "Multiple Choices", - 301: "Moved Permanently", - 302: "Found", - 303: "See Other", - 304: "Not Modified", - 305: "Use Proxy", - 306: "Reserved", - 307: "Temporary Redirect", - 308: "Permanent Redirect", - 400: "Bad Request", - 401: "Unauthorized", - 402: "Payment Required", - 403: "Forbidden", - 404: "Not Found", - 405: "Method Not Allowed", - 406: "Not Acceptable", - 407: "Proxy Authentication Required", - 408: "Request Timeout", - 409: "Conflict", - 410: "Gone", - 411: "Length Required", - 412: "Precondition Failed", - 413: "Request Entity Too Large", - 414: "Request-URI Too Long", - 415: "Unsupported Media Type", - 416: "Requested Range Not Satisfiable", - 417: "Expectation Failed", - 422: "Unprocessable Entity", - 423: "Locked", - 424: "Failed Dependency", - 425: "Unassigned", - 426: "Upgrade Required", - 427: "Unassigned", - 428: "Precondition Required", - 429: "Too Many Requests", - 430: "Unassigned", - 431: "Request Header Fields Too Large", - 500: "Internal Server Error", - 501: "Not Implemented", - 502: "Bad Gateway", - 503: "Service Unavailable", - 504: "Gateway Timeout", - 505: "HTTP Version Not Supported", - 506: "Variant Also Negotiates (Experimental)", - 507: "Insufficient Storage", - 508: "Loop Detected", - 509: "Unassigned", - 510: "Not Extended", - 511: "Network Authentication Required", - }; - - function closeReq() { - loadingBox.parentNode && document.body.removeChild(loadingBox); - isLoading = false; - } - - function abortReq() { - if (!isLoading) { - return; - } - req.abort(); - closeReq(); - } - - function ajaxError() { - alert("Unknown error."); - } - - function ajaxLoad() { - let msg; - const status = this.status; - switch (status) { - case 200: - msg = JSON.parse(this.responseText); - document.title = pageInfo.title = msg.page; - document.getElementById(targetId).innerHTML = msg.content; - if (updateURL) { - history.pushState(pageInfo, pageInfo.title, pageInfo.url); - updateURL = false; - } - break; - default: - msg = `${status}: ${HTTP_STATUS[status] || "Unknown"}`; - switch (Math.floor(status / 100)) { - /* - case 1: - // Informational 1xx - console.log("Information code " + vMsg); - break; - case 2: - // Successful 2xx - console.log("Successful code " + vMsg); - break; - case 3: - // Redirection 3xx - console.log("Redirection code " + vMsg); - break; - */ - case 4: - /* Client Error 4xx */ - alert(`Client Error #${msg}`); - break; - case 5: - /* Server Error 5xx */ - alert(`Server Error #${msg}`); - break; - default: - /* Unknown status */ - ajaxError(); - } - } - closeReq(); - } - - function filterURL(url, viewMode) { - return ( - url.replace(searchRegex, "") + - `?${url - .replace(hostRegex, "&") - .replace(viewRegex, viewMode ? `&${viewKey}=${viewMode}` : "") - .slice(1)}`.replace(endQstMarkRegex, "") - ); - } - - function getPage(page) { - if (isLoading) { - return; - } - req = new XMLHttpRequest(); - isLoading = true; - req.onload = ajaxLoad; - req.onerror = ajaxError; - if (page) { - pageInfo.url = filterURL(page, null); - } - req.open("get", filterURL(pageInfo.url, "json"), true); - req.send(); - loadingBox.parentNode || document.body.appendChild(loadingBox); - } - - function requestPage(url) { - if (history.pushState) { - updateURL = true; - getPage(url); - } else { - /* Ajax navigation is not supported */ - location.assign(url); - } - } - - function processLink() { - if (this.className === ajaxClass) { - requestPage(this.href); - return false; - } - return true; - } - - function init() { - pageInfo.title = document.title; - history.replaceState(pageInfo, pageInfo.title, pageInfo.url); - for (const link of document.links) { - link.onclick = processLink; - } - } - - loadingBox.id = "ajax-loader"; - cover.onclick = abortReq; - loadingImg.src = - "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; - cover.appendChild(loadingImg); - loadingBox.appendChild(cover); - - onpopstate = (event) => { - updateURL = false; - pageInfo.title = event.state.title; - pageInfo.url = event.state.url; - getPage(); - }; - - window.addEventListener("load", init, false); - - // Public methods - - this.open = requestPage; - this.stop = abortReq; - this.rebuildLinks = init; -})(); -``` - -詳細は、[履歴 API の操作](/ja/docs/Web/API/History_API/Working_with_the_History_API)を参照してください。 - -## 関連情報 - -- {{ domxref("window.history") }} -- {{domxref("Window/popstate_event", "popstate")}} イベント diff --git a/files/ja/orphaned/web/api/htmldialogelement/cancel_event/index.md b/files/ja/orphaned/web/api/htmldialogelement/cancel_event/index.md deleted file mode 100644 index 9c96fae7297655..00000000000000 --- a/files/ja/orphaned/web/api/htmldialogelement/cancel_event/index.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: "HTMLDialogElement: cancel イベント" -slug: orphaned/Web/API/HTMLDialogElement/cancel_event -original_slug: Web/API/HTMLDialogElement/cancel_event ---- - -{{APIRef}} - -**`cancel`** イベントは、ユーザーが現在開いているダイアログを閉じるようブラウザーに指示したときに {{HTMLElement("dialog")}} に発生します。ブラウザーはユーザーが <kbd>Esc</kbd> キーを押した時にこのイベントを発生させます。 - -このイベントはバブリングしません。 - -`<dialog>` を <kbd>Esc</kbd> キーで閉じると、`cancel` イベントと {{domxref("HTMLDialogElement/close_event", "close")}} イベントの両方が発行されます。 - -## 構文 - -このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。 - -```js -addEventListener("cancel", (event) => {}); - -oncancel = (event) => {}; -``` - -## イベント型 - -一般的な {{domxref("Event")}} です。 - -## 例 - -### ライブ例 - -#### HTML - -```html -<dialog class="example-dialog"> - <button class="close" type="reset">Close</button> -</dialog> - -<button class="open-dialog">Open dialog</button> - -<div class="result"></div> -``` - -```css hidden -button, -div { - margin: 0.5rem; -} -``` - -#### JavaScript - -```js -const result = document.querySelector(".result"); - -const dialog = document.querySelector(".example-dialog"); - -dialog.addEventListener("cancel", (event) => { - result.textContent = "dialog was canceled"; -}); - -const openDialog = document.querySelector(".open-dialog"); -openDialog.addEventListener("click", () => { - if (typeof dialog.showModal === "function") { - dialog.showModal(); - result.textContent = ""; - } else { - result.textContent = "The dialog API is not supported by this browser"; - } -}); - -const closeButton = document.querySelector(".close"); -closeButton.addEventListener("click", () => { - dialog.close(); -}); -``` - -#### 結果 - -{{ EmbedLiveSample('Live_example', '100%', '100px') }} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- HTML {{HTMLElement("dialog")}} element -- {{domxref("HTMLDialogElement/close_event", "close")}}