AJAX and Synchronous Requests example

FreeFAT

unread,

Jul 6, 2017, 8:04:24 AM7/6/17

to Fat-Free Framework

Hi everyone,

I've read about Ajax in fatfree (https://fatfreeframework.com/3.6/routing-engine#AJAXandSynchronousRequests) and didn't see anywhere an example of it.

Who can show some example? Who did it?

There is written about ajax route


$f3->route('GET /example [ajax]','Page->getFragment');
$f3->route('GET /example [sync]','Page->getFull');


; routes.ini style


POST /formsubmit [ajax] = Form->process_post_via_ajax

Who did with ajax and sync routes something?

Thanks.

FreeFAT

unread,

Jul 6, 2017, 8:11:05 AM7/6/17

to Fat-Free Framework

What kind of code must be in Page->getFragment and how Page->getFull will continue work with data??

What should be in both methods?

ved

unread,

Jul 6, 2017, 8:49:04 AM7/6/17

to Fat-Free Framework

Hi, not exactly sure what exactly the issue is but that's just an example that loosely states that:

If you access "/example" normally (not with ajax/xhr) then the getFull method of the Page class will get loaded. (this could, for example, show the entire example page, with headers, footers, etc)

If you access "/example" with ajax/xhr then the get getFragment method of the Page class will get loaded. (this could, for example, just show the main content and exclude any headers, footers, etc).

So, that same url can redirect to different methods depending if it's a sync or ajax request.

An alternative way to do the same thing with a single route/method would be something like:

$f3->route('GET /example','Page->getPage');

class Page
{
    public function getPage($f3)
    {
        if($f3->get('AJAX') {
            // show the page when requested with ajax
        } else {
            // show the full page when requested normally
        }
    }
}

Hope it helps.

xfra35

unread,

Jul 6, 2017, 8:56:32 AM7/6/17

to Fat-Free Framework

Imagine you have a page displaying a list of products, with a filter form.

The first call will get the full HTML code (the one starting with <!DOCTYPE html>).

The subsequent ajax calls will be triggered every time a filter critera is modified and get only the list of products HTML code.

First call output (Page->getFull):

<!DOCTYPE html>
<html>
<head>
..
</head>
<body>
  <h1>List of products</h1>
  <ul id="products">
    <li>product 1</li>
    <li>product 2</li>
    etc.
  </ul>
</body>
</html>

Second call output (Page->getFragment):

<li>product 1</li>
<li>product 5</li>
etc.

FreeFAT

unread,

Jul 6, 2017, 9:20:23 AM7/6/17

to Fat-Free Framework

I'm interested in AJAX case, I mean will everything run WITHOUT PAGE REFRESHING using ajax sync rotes?

четверг, 6 июля 2017 г., 16:56:32 UTC+4 пользователь xfra35 написал:

FreeFAT

unread,

Jul 6, 2017, 9:35:42 AM7/6/17

to Fat-Free Framework

I did this:

function ajaxtest(){
        $f3 = $this->f3;
        if($f3->get('AJAX')) {
            $f3->set('ajax1', 'Test');
        }
    }

    function ajaxsync(){
        $f3 = $this->f3;
        $aa = $f3->get('ajax1');
        $f3->set('ajax2', "$aa - ajax");
        echo $f3->get('ajax2');
    }   

My route.ini

GET /ajax/test [ajax]=Forms->ajaxtest
GET /ajax/test [sync]=Forms->ajaxsync

It should return Test - ajax ...... BUT DIDN'T

.... what I didn't understand? What is wrong?

ved

unread,

Jul 6, 2017, 10:07:48 AM7/6/17

to Fat-Free Framework

Well, you seem to not be completely clear about what ajax is or how it works.

But ok, here's something to remember: Ajax/xhr is basically just a regular http request that's usually done using javascript on the client side (instead of, for example, inputting the url in the browser's address bar)

Thinking that you need to use F3 in a way that's specific to ajax is not the way to think about it. F3 just responds to http requests. What F3 does give us developers is a way to differentiate ajax from sync requests and respond to those requests accordingly (if needed!) either using the route params (sync,ajax) or leveraging the AJAX hive variable that will be "1" if it's an ajax request.

I suggest that if you're just starting out, just ignore these ajax/sync and AJAX parameters because you don't need any of them to develop an ajax application. Just create normal methods on F3 and call them with javascript as needed.

As for your example:

When accessing normally (without ajax) F3 will call the ajaxsync method. That method is getting an f3 variable called "ajax1" that doesn't exist because it isn't defined on that method. You're setting it on the ajaxtest method that isn't getting called because it's not an ajax request. So that should output just: " - ajax"

If you do an ajax request to your example, then F3 will call the ajaxtest method. That method is doing an extra superfulous check on the AJAX variable. This is unnecessary since you already defined on the router that ajax requests should go to that method. Then you set the ajax1 variable with Test. And that's pretty much it. Nothing else get's echoed because the echo statement is on the ajaxsync method that only gets called when the request is not ajax.

So again, I suggest you forget about those ajax parameters on F3's side until you really need them.

FreeFAT

unread,

Jul 6, 2017, 10:17:11 AM7/6/17

to Fat-Free Framework

if you're just starting out ... NO NO ... I didn't started yesterday))))

Just please show me some working example to understand of fatfree's ajax idea. I do wish some example.

I couldn't catch the AJAX moment. Help me please.

Thanks.

четверг, 6 июля 2017 г., 18:07:48 UTC+4 пользователь ved написал:

ved

unread,

Jul 6, 2017, 10:53:47 AM7/6/17

to f3-fra...@googlegroups.com

As I've just stated, there's no such thing as "Fatfree's ajax idea". Ajax has nothing to do with F3. The only thing that F3 has is a way for you to detect if a request is made by ajax or not.

That is all. You don't need anything from F3 in order to develop an ajax app.

If you want an example, xfra35's example above explains perfectly what one can do using F3's ajax detection, but that's just some functionality to ease development.

You can do your own ajax detection using plain PHP by detecting if the http request has a header called "X-Requested-With" with a value of "XMLHttpRequest". (which is exactly what F3 does)

Maybe if you state exactly you're trying to accomplish or what kind of ajax requests you want to make maybe we can help further.

FreeFAT

unread,

Jul 6, 2017, 11:04:52 AM7/6/17

to Fat-Free Framework

I just want to see in someone's little example what kind of things is possible to do with ajax route.

Just only some example.... No one did it?

ved

unread,

Jul 6, 2017, 11:12:20 AM7/6/17

to Fat-Free Framework

Really? xfra35's example above is exactly such example.

But ok, here's another example:

$f3->route('GET /example [ajax]', function() {
  echo 'this is an ajax request';
});


$f3->route('GET /example [sync]', function() {
  echo 'this is a regular request';
});

FreeFAT

unread,

Jul 6, 2017, 11:32:57 AM7/6/17

to Fat-Free Framework

As I understand calling in browser domain.com/example address it will run ONLY [sync] route passing the [ajax] because it is not XHR request. Am I right?

Then to run [ajax] we need some jquery code? Yes?

четверг, 6 июля 2017 г., 19:12:20 UTC+4 пользователь ved написал:

ved

unread,

Jul 6, 2017, 11:47:37 AM7/6/17

to Fat-Free Framework

Yes, exactly.

JQuery or any other javascript library or even plain javascript should work.

In that case F3 would respond with the ajax route.

FreeFAT

unread,

Jul 6, 2017, 11:53:20 AM7/6/17

to Fat-Free Framework

oh, now I understand ...

let's imagine that we have an project where using the same ROUTE ADDRESS we get different ways:

the key moment is writing next to GET or POST route the key ajax or sync and then F3 knows about difference of these two routes and if it was called by javascript or etc it will call ajax route otherwise in normal case it will call sync route.

Now I understand beauty of routes. Using the same form of routes and just only adding ajax or sync key you can manage of route calling.

Thank you all.

четверг, 6 июля 2017 г., 19:47:37 UTC+4 пользователь ved написал:

ved

unread,

Jul 6, 2017, 12:22:19 PM7/6/17

to Fat-Free Framework

Yes, that's it.

Also, as I've stated before, sometimes it can also be useful to just process both ajax and sync on the same method.

In that case, you can just use a regular route (without any [sync] or [ajax] tags) and then just check $f3->get('AJAX') and if it's true then it's an ajax request.

Good luck.

Reply all

Reply to author

Forward