AJAX
AJAX is Infy's most complex append mode and it comes in two very different versions, to make things even more complex. However, this is the append mode you'll want to use when you're dealing with Complex Websites. There's a lot going on under the hood with this mode, so it really warrants its own section.
Before reading this section, it's really recommended to first read and understand the following two sections:
- How to tell you're on an AJAX site - You'll want to at least know you're on an AJAX site (or SPA) to begin with
- Append Element Mode - AJAX uses the same concept of there being a "Page Element" and you'll want to at least be familiar with that
To discuss AJAX, we'll use Pixiv as the example website.
Here's an Example URL to follow along with:
https://www.pixiv.net/tags/オリジナル/illustrations?mode=safe
And here's an example demo showing the AJAX Native append mode working on Pixiv:
AJAX is only compatible with the "Click Element" action; it's assumed we are clicking a button and having the page append the elements itself. There are no links (though they may look like it), so do not use the more conventional "Next Link" action for this append mode (you'll get an error warning you to select the right action in case you forget).
You'll need to provide a path to the Click Element as you would normally for the next link. You have multiple options such as Auto Detect, the Element Picker, and you can manually enter or edit in a path yourself. Note that the Click Element is always highlighted on the page each time the path is edited, so you can visually see if it's picking the right one or not before you click ACCEPT (you may need to scroll the window so that Infy's UI Window isn't covering it up).
This is the default AJAX mode because it's the most stable and safest. This appends a hidden iframe on the page that continually clicks the next button and imports the elements to the page. It also scrolls the iframe very carefully to ensure that all images/media have fully lazy loaded before being imported to the page. You can observe what's really going on by going to Options > Extra and checking the Enable Debug Mode checkbox, then visiting the Example URL. You'll notice there's another page on the page you're on (this is the iframe) and it's doing a lot of strange things like scrolling itself continuously.
This is Infy's most advanced append mode, but it's so experimental, it's still in proof of concept status. It actually manipulates the website itself into providing infinite scrolling - natively. To understand how this append mode works, we need to quickly go over how AJAX sites work.
Typically, the workflow goes like this:
- The user clicks on the Next button
- The site then removes the current elements on the page and replaces them with the next page's elements
- The site then scrolls the user back to the top
(To be continued as time allows)