diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 4673d6fd85b29f..2dfc76f0de4d9f 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1617,7 +1617,7 @@ /zh-CN/docs/Web/API/HTMLTableElement.deleteTHead /zh-CN/docs/Web/API/HTMLTableElement/deleteTHead /zh-CN/docs/Web/API/HTMLVideoElement/autoPictureInPicture /zh-CN/docs/Web/API/HTMLVideoElement /zh-CN/docs/Web/API/Headers/getAll /zh-CN/docs/Web/API/Headers/get -/zh-CN/docs/Web/API/History_API/Example /zh-CN/docs/conflicting/Web/API/History_API/Working_with_the_History_API +/zh-CN/docs/Web/API/History_API/Example /zh-CN/docs/Web/API/History_API/Working_with_the_History_API /zh-CN/docs/Web/API/IDBCursor.direction /zh-CN/docs/Web/API/IDBCursor/direction /zh-CN/docs/Web/API/IDBDatabase/onversionchange /zh-CN/docs/Web/API/IDBDatabase/versionchange_event /zh-CN/docs/Web/API/IDBFactory.open /zh-CN/docs/Web/API/IDBFactory/open diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index eb1158ccf3a73a..ea4d243d1e45f5 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -32789,9 +32789,5 @@ "skyfore", "xgqfrms-GitHub" ] - }, - "conflicting/Web/API/History_API/Working_with_the_History_API": { - "modified": "2019-07-31T00:29:31.092Z", - "contributors": ["Shadowhiker", "xgqfrms"] } } diff --git a/files/zh-cn/conflicting/web/api/history_api/working_with_the_history_api/index.md b/files/zh-cn/conflicting/web/api/history_api/working_with_the_history_api/index.md deleted file mode 100644 index 3337ecd9320009..00000000000000 --- a/files/zh-cn/conflicting/web/api/history_api/working_with_the_history_api/index.md +++ /dev/null @@ -1,439 +0,0 @@ ---- -title: Ajax navigation example -slug: conflicting/Web/API/History_API/Working_with_the_History_API -original_slug: Web/API/History_API/Example ---- - -这是一个仅由三个页面组成的 AJAX 网站示例 (_first_page.php_, _second_page.php_ and _third_page.php_). 要查看其如何工作的，请创建以下文件 (或 git clone [https://github.com/giabao/mdn-ajax-nav-example.git](https://github.com/giabao/mdn-ajax-nav-example) ): - -> **备注：** 为了在该机制中很好地整合 {{HTMLElement("form")}} 元素 , 请看一下这段[提交表单和上传文件](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest#提交表单和上传文件)。 - -**first_page.php**: - -```php - - - - -" . $page_title . ""; -?> - - - - - - -

This paragraph is shown only when the navigation starts from first_page.php.

- -
- - -

This is the content of first_page.php.

- - $page_title, "content" => ob_get_clean())); - } else { -?> -
- -

This paragraph is shown only when the navigation starts from first_page.php.

- -\n"; - } -?> -``` - -**second_page.php**: - -```php - - - - -" . $page_title . ""; -?> - - - - - - -

This paragraph is shown only when the navigation starts from second_page.php.

- -
- - -

This is the content of second_page.php.

- - $page_title, "content" => ob_get_clean())); - } else { -?> -
- -

This paragraph is shown only when the navigation starts from second_page.php.

- -\n"; - } -?> -``` - -**third_page.php**: - -```php -This is the content of third_page.php. This content is stored into a php variable.

"; - - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - echo json_encode(array("page" => $page_title, "content" => $page_content)); - } else { -?> - - - -" . $page_title . ""; -?> - - - - - - -

This paragraph is shown only when the navigation starts from third_page.php.

- -
- -
- -

This paragraph is shown only when the navigation starts from third_page.php.

- -\n"; - } -?> -``` - -**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 -

This is the footer. It is shared between all ajax pages.

-``` - -**include/before_content.php**: - -```php -

-[ First example -| Second example -| Third example -| Unexisting page ] -

-``` - -**include/header.php**: - -```php - - - -``` - -**js/ajax_nav.js**: - -```js -"use strict"; - -const ajaxRequest = new (function () { - function closeReq() { - oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); - bIsLoading = false; - } - - function abortReq() { - if (!bIsLoading) { - return; - } - oReq.abort(); - closeReq(); - } - - function ajaxError() { - alert("Unknown error."); - } - - function ajaxLoad() { - var vMsg, - nStatus = this.status; - switch (nStatus) { - case 200: - vMsg = JSON.parse(this.responseText); - document.title = oPageInfo.title = vMsg.page; - document.getElementById(sTargetId).innerHTML = vMsg.content; - if (bUpdateURL) { - history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); - bUpdateURL = false; - } - break; - default: - vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); - switch (Math.floor(nStatus / 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 #" + vMsg); - break; - case 5: - /* Server Error 5xx */ - alert("Server Error #" + vMsg); - break; - default: - /* Unknown status */ - ajaxError(); - } - } - closeReq(); - } - - function filterURL(sURL, sViewMode) { - return ( - sURL.replace(rSearch, "") + - ( - "?" + - sURL - .replace(rHost, "&") - .replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "") - .slice(1) - ).replace(rEndQstMark, "") - ); - } - - function getPage(sPage) { - if (bIsLoading) { - return; - } - oReq = new XMLHttpRequest(); - bIsLoading = true; - oReq.onload = ajaxLoad; - oReq.onerror = ajaxError; - if (sPage) { - oPageInfo.url = filterURL(sPage, null); - } - oReq.open("get", filterURL(oPageInfo.url, "json"), true); - oReq.send(); - oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); - } - - function requestPage(sURL) { - if (history.pushState) { - bUpdateURL = true; - getPage(sURL); - } else { - /* Ajax navigation is not supported */ - location.assign(sURL); - } - } - - function processLink() { - if (this.className === sAjaxClass) { - requestPage(this.href); - return false; - } - return true; - } - - function init() { - oPageInfo.title = document.title; - history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url); - for ( - var oLink, nIdx = 0, nLen = document.links.length; - nIdx < nLen; - document.links[nIdx++].onclick = processLink - ); - } - - const /* customizable constants */ - sTargetId = "ajax-content", - sViewKey = "view_as", - sAjaxClass = "ajax-nav", - /* not customizable constants */ - rSearch = /\?.*$/, - rHost = /^[^\?]*\?*&*/, - rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), - rEndQstMark = /\?$/, - oLoadingBox = document.createElement("div"), - oCover = document.createElement("div"), - oLoadingImg = new Image(), - oPageInfo = { - title: null, - url: location.href, - }, - oHTTPStatus = - /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { - 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", - }; - - var oReq, - bIsLoading = false, - bUpdateURL = false; - - oLoadingBox.id = "ajax-loader"; - oCover.onclick = abortReq; - oLoadingImg.src = - "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; - oCover.appendChild(oLoadingImg); - oLoadingBox.appendChild(oCover); - - onpopstate = function (oEvent) { - bUpdateURL = false; - oPageInfo.title = oEvent.state.title; - oPageInfo.url = oEvent.state.url; - getPage(); - }; - - window.addEventListener - ? addEventListener("load", init, false) - : window.attachEvent - ? attachEvent("onload", init) - : (onload = init); - - // Public methods - - this.open = requestPage; - this.stop = abortReq; - this.rebuildLinks = init; -})(); -``` - -For more information, please see: [Manipulating the browser history](/zh-CN/docs/DOM/Manipulating_the_browser_history). - -## See also - -- {{ domxref("window.history") }} -- {{ domxref("window.onpopstate") }}