How to maintain ajax in page status
Apr 02, 2018 am 09:27 AMThis time I will show you how to maintain ajax in the page state, and what are the things to note . The following is a practical case, let's take a look.
For traditional pages, the browser accesses the The traditional status is saved in the address bar, such as: www.abc.com/search?s=abc&id=23&page=3If this method is used, the browser will refresh the page. If you use anchors, the browser will not refresh. Specifically, when you click on the page to request data, the value after "#" in the address bar will be changed. We turn to the fourth pageFor example:abc.com/search#s=abc&id=23&page=4
This is not enough. If the user clicks " Forward" and "Back", the page content will not change accordingly. I used atimer to solve the problem based on what others have done online.
/** * URL Watcher(require jQuery) * 监测url的变化 * useage: * UrlWatcher.init(50); * UrlWatcher.AddListener(function(url,isFirstLoad){ * FrontEngine.generateFront(); * }); * */ var UrlWatcher = { "init": function (waittime) { this.UrlArray = [window.location.href];//set current url as default this.ListenerArray = []; this.ResetWaitTime(waittime); }, "AddListener": function (listener) {//add a process function this.ListenerArray.push(listener || function () {}); }, "DeleteListener": function () { this.ListenerArray = []; }, "ResetWaitTime": function (time) {//start timer if (this.IntervalHandle) {window.clearInterval(this.IntervalHandle); } this.WaitTime = time || 1000; this.IntervalHandle = window.setInterval(this.ListenerCall.setThis(this), this.WaitTime); }, "ListenerCall": function () { var self = this, url = window.location.href; if (self.UrlArray[self.UrlArray.length - 1] === url) {return; } window.clearInterval(this.IntervalHandle); $.each(this.ListenerArray, function (c, listener) { listener(url, self.UrlArray.length === 0); }); this.UrlArray.push(url); this.ResetWaitTime(this.WaitTime); } };
document.documentMode.
if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) { // 浏览器支持onhashchange事件 indow.onhashchange = hashChangeFire; // TODO,对应新的hash执行的操作函数 } else { // 不支持则用定时器检测的办法 setInterval(function() { var ischanged = isHashChanged(); // TODO,检测hash值或其中某一段是否更改的函数 if(ischanged) { hashChangeFire(); // TODO,对应新的hash执行的操作函数 } }, 150); }
How to implement real-time editing of tables with PHP+Ajax
How to use Ajax to dynamically load data Function
The above is the detailed content of How to maintain ajax in page status. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Connection status in standby: Disconnected, reason: NIC Compliance

How to solve the 403 error encountered by jQuery AJAX request

How to solve jQuery AJAX request 403 error

How to get variables from PHP method using Ajax?

Detailed explanation of the five states of Java threads and state transition rules

How to solve the problem of jQuery AJAX error 403?

PHP vs. Ajax: Solutions for creating dynamically loaded content
