1

I am so much curious about this technology, I want to know how Facebook, Twitter, and many websites reload their page after clicking on a link without any refreshing?

I search about this on google but did not find any helpful information, In this Quora article. Someone says that they use WebSocket API or AJAX to request anything like that.

So, What this technique/ technology name?

  • 1
    *"But my question is if they use the ajax technique then it should appear on the developer tools network area, But I did not see any request from ajax on this section."* It should and does, for me. They both use XHR and `fetch` and other things. Perhaps you're filtering? There are lots of filter options in most network panels. – T.J. Crowder Apr 10 '20 at 12:21
  • @T.J Crowder, So you are sure that they used ajax nothing else? –  Apr 10 '20 at 12:26
  • If you mean, you're clicking something and the page changes but you don't see any network activity, that's just DOM manipulation, adding and removing elements, changing their visibility, etc. More: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model – T.J. Crowder Apr 10 '20 at 12:26
  • I don't know what you mean by "nothing else." – T.J. Crowder Apr 10 '20 at 12:26
  • To doing this stuff(page reload) they used ajax? –  Apr 10 '20 at 12:27
  • 1
    @WebDesigner please have a look into the link I've shared you in my answer. You will see the code there behind the scenes what mimics "page reload" you are talking about :-) – volna Apr 10 '20 at 12:31
  • 1
    They use ajax to load content. They use DOM manipulation to show it. Here's a basic DOM manipulation example: https://jsfiddle.net/tjcrowder/u3hnxb87/ – T.J. Crowder Apr 10 '20 at 12:42
  • 1
    @T.J.Crowder, You are right, I had some problem in my network panel actually not the problem, I stopped some features of this. When I reload the page it take many request as expected. Thanks for your code. –  Apr 10 '20 at 12:53
  • @T.J.Crowder, But Facebook and twitter are so fast when they load new document objects, It may be for their big data server or network system –  Apr 10 '20 at 12:54

2 Answers2

1

Mostly all modern websites are powered with FE frameworks like React, Angular, Vue and many others the main feature of which is dynamically construct DOM in response to user actions without the need of page reload.

One of the the power tool of these specific frameworks are routers. That pretty much reconstruct the page from the blueprint stored on FE side

Please have a look on the working demo of React Router: https://codesandbox.io/s/nn8x24vm60

P.S: Pretty much JS hides/removes specific elements in the DOM and replaces them with the expected ones when user navigates using specific router links (which can look like normal link for other developer inspects DOM, unless you really inspect attached Event Listeners)

volna
  • 2,452
  • 4
  • 25
  • 61
  • 1
    One wise man once said. Every time one developer decides to implement new solution, new framework is born :-) – volna Apr 10 '20 at 12:39
  • There is one part router which is implemented when hash changes. So window.onhashchange would be the simple way to listen to the changes and rerender DOM accordingly. You would also appreciate learning more about Virtual and Shadow DOMs to understand better where UI is being stored. – volna Apr 10 '20 at 12:40
  • This article might answer your question https://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url – volna Apr 10 '20 at 12:41
  • Thanks for your help, I need to study more and more. It may fix my problem! –  Apr 10 '20 at 12:48
  • Welcome man, I also felt a need to understand more of what I am using (external code) and still have... so I understand you :-) – volna Apr 10 '20 at 12:48
  • if you free, can you talk with me on Facebook(if you have it)? –  Apr 10 '20 at 12:55
  • I have no social networks man :-) but feel free to ask here :-) – volna Apr 10 '20 at 12:56
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211358/discussion-between-web-designer-and-volna). –  Apr 10 '20 at 12:57
  • click on continue to start the chat –  Apr 10 '20 at 13:01
0

Yes, they use web socket or any other similar implementation. Web socket is different from HTTP in that allows bidirectional data transfer with low latency and uses a full duplex communication rather than a half-duplex as used in HTTP.

Hence users can receive data without refreshing the page. Some implementations use a technique called handshake and polling (currently used by Twitter) to make data readily available without any page refreshing by instantiating a connection between connected peers. You can read more on Wikipedia WebSocket Hope this was helpful.

Johan Tchassem
  • 11
  • 4