Pjax no longer mysterious, hash, state that little thing

If the recent call to Wuhan's small partner, he said the signal is not good, then believe me, he certainly is not really bad signal, nor do not want to talk to you, but he may be in the refrigerator ... Wuhan's weather has always been moody, yes, the cock is full of gas, this year is the slightest indication of any adverse attack and the possibility, of course, I do not need to fuck that heart; Well, you see him as I can also, do not associate, quickly into the subject;

JS can go all the way from clown to White Swan, with the popularity of Ajax technology has a great relationship with the H5, ES6, Nodejs development and popularization, will continue to push the front-end to a new height, now JS status of the heyday Ah!

Use of backbone, Angular, react these frameworks are not unfamiliar to the front-end routing, and they are basically through the monitoring of hash changes to update and switch views, of course react also support browserhistory, That is Pjax's key pushstate, belongs to the category of H5, in addition to Bsie, compatibility is not much to say, Pjax=pushstate+ajax,ajax are not unfamiliar, then uncover the mystery of Pjax, understand Pushstate is, well, in order to maintain confidence , think so first;

If it is still unclear what Pjax is doing, then you have to say so: Change the URL (not hash), local refresh (AJAX);

If you still do not understand, it can only be because of the mindset, for the front end, generally know to change the URL (not hash), the page will be refreshed, and pushstate is to let you know, no! Change the URL can also only refresh the local!

It's not hard to realize Pjax, For example Jquery.pjax.js, already has the ready-made API for you to use directly, just recently inadvertently discovered several domestic sites already started to use the Pjax technology, the page experience is very good, and I just started react, do not want to use jquery together, had to build an AJAX wheel to use, and then naturally think of this The wheel should contain pjax, and then find himself too young, and of course the idea is good;

The implementation of Pjax mainly uses the H5 history of several api:pushstate (Data,str,url), Replacestate (Data,str,url), onpopstate events Onpopstate will be triggered by the user clicking on the browser's forward or backward or the program's History.go (s). At this point the value of history.state corresponds to the value of data in the pushstate, so it seems that data can be cached by the Ajax pull-over, but do not be happy too early, it has a size limit of--640k; anyway h5,localstorage enough!

Although said redux at first very difficult to understand, but really, this set of practices is very good, for example, can learn from the Redux State container mechanism, we also construct a container to save all pushstate when the data, the URL as a reference, while using Localstorage cache up, If you want to localstorage storage time to add a deadline, I think you can refer to: "Localstorage can also save login information"; action is to determine whether to support Pushstate, cancel the default jump of a link and other Pjax conversion actions Reducer is the first to determine whether the corresponding cache of the link address exists to determine whether an AJAX GET request that a link corresponding to the HREF, the returned data is saved or updated with Localstorage; dispatch (Action) The data will be filled to the corresponding Containor, the realization of their own certainly trouble, OK, or use jquery.pjax.js it;

Pushstate will write a record to the browser history, at the same time with the incoming URL to replace the current browser URL, then Pjax is actually to deceive, huaquanxiutui change URL, eventually Ajax, right? If you think so, then you are really naïve and lovely, because to the front end, what I want to do is to make a change of the URL, and then local refresh;

Since it is a modified URL, how to face the active refresh after 404 of the reality? So I said, to maintain confidence, of course, the next thing to do is the back-end, for the moment, the Pjax request is unified to the same as the page refresh when the GET request it (the specific request method requires the front-end negotiation), The front end adds a tag to the PJAX request to let the backend know that the Pjax request simply returns a fragment or JSON, which can be a setheader or request parameter with a pjax=1, The backend determines whether the tag returns a full page or a data JSON that returns local or local content, which ensures that the URL after Pjax is not 404 after it is refreshed;

1 //Pjax request with Pjax header2 $.ajax ({3Url:a.attr (' href ') | |Ajaxurl,4Type: ' GET ',5Headers:{pjax:true},6Successfunction(data) {7         //localstorage ...8History.pushstate ("', '", URL);9         //Containor FillTen     } One});

1 //Nodejs2App.get (Path,function(req,res,next) {3     varpjax=req.headers[' Pjax '];4     if(pjax) {5         //...6 Res.json ({7 data:page_content8         });9}Else{Ten         //... One res.send (page); A     } -});

It seems that, in fact, it is not so complicated, I think, not to IE789 have special requirements, can be considered to use, in order to be compatible can also first determine whether to support pushstate, decide whether to convert the link to pjax; this kind of thing front-end do too much, why not?

On this compatibility ... You si bu si sa

Originally from: Flower House (HTTP://WWW.FAMANODER.COM/BOKES/57AF514C21866ACC0F77CFC9)

Pjax no longer mysterious, hash, state that little thing