in reply to Perl AJAX jQuery, js file

before you dive into code you perhaps need to define your requirement or rather decide how much you want to expand in the future. You show GET but surely some manager can tell you "hey POST is the way to go!". How about JSON (possibly nested) data? How about image uploads? What about the result from the ajax response? You specify result as HTML but what about when you want to indicate error? Is sending back an HTML error message enough or does your javascript success: need to act on an error code?

To test ajax'ing back to site, what you wrote is enough. Just place it inside your HTML file which contains the button and div2log elements (I assume you don't want a js file, since you use the script tags).

The good news is that you can skip jQuery completely because you can find pure-js ajax functionality (search for XHR) and satisfy your cheetah-fast requirement. And you can also on the back-end write something which takes in a JSON POST data and makes it perl data structure with images and all if needed. And also responds back by sending a JSON with error-code, data and html-content sections. And while you are at it, test it for unicode support too - don't leave that too late. Surely some manager will kink on the idea sooner or later.

bw, bliako

Replies are listed 'Best First'.
Re^2: Perl AJAX jQuery, js file
by monx663 (Sexton) on Jan 11, 2021 at 22:22 UTC
    Great input, Bliako

    I know what you mean about jQuery not being essential and I had seen some examples of using XHR, which I understand is the Javascript way of handling AJAX and JSON.
    The reason I included jQuery in my question here, is that I was reading its documentation last night and I came across some very cool things one can do with jQuery. Like built-in HTML effects and some browser/form events handlers that would add a great "this CMS feels like a desktop app" feeling to my project

    I know I said that I like to streamline things, but... Nothing wrong with waiting for your friend to shave her armpits. :p

    Regarding your reference to GET/POST, I actually had that issue in my mind last night. I assume that the maximum GET data size of 750bytes(?) still applies to AJAX calls.
    So, yes, I am thinking of favouring POST, which would allow me to send images to the server as well. I already successfully uploaded some images over AJAX but JSON encapsulating an image seems so cruel! I mean, as if base64 wasn't bad enough!
[reply]

      Actually XHR stands for XMLHttpRequest (and https://en.wikipedia.org/wiki/XMLHttpRequest). So I *guess* whatever you send, e.g. JSON, is wrapped inside an XML envelope.

      Also be advised that you do not need (depending on Browser+version) to have a Form created already in HTML in order to ajax images over. In your ajax'er function you can create the Form on the fly and add File objects (e.g. images) and JSON and all in a way similar to hash. But you definetely do not need to ASCII-fy your binary data as you can use a Blob . I do not know how they send that Blob. But, logically thinking, since they wrap it inside an XML envelope all will be ASCII-fied. Sorry for ... oh I am lost in all these zoological metaphors you used.

      This may also be of help https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

      Just to drive my last post's point home: Create one js function to do all the ajax'ing you will ever need, with nested data structures (as JSON) and binary or other file uploads. Add all the error handling code there and of course, since it is all asynchronous you need to be prepared to supply function pointers to handling success and failure. On the server side, create a POST data "untangler" which will handle all that your ajax can send and return a complex (hash) data back with status code, data and html-or-text-or-both message. Make sure you test unicode support (e.g. for error messages or data-input or db-data-out-to-browser) through these two functions. I found Mojolicious helpful for the server-side. And as people say here, benchmark it before making any assumptions. And for the browser-side I prefered to build my AJAX function from pure-js in its own little library (js file) which now I use for all my needs. All I needed was online.

      BTW, AJAX is an acronym for Asynchronous JavaScript And XML but Ajax was the legendary greek hero maddened by some immature bunch of Gods and committed suicide out of shame, famously depicted by Exekias in this fine art specimen . And let's not go into football but Omonoia famously beat Ajax 4-0 in 1979 with a Bulgarian coach (another legend: Arsov) and all-native footballers. (allow me, oh fellow Monks, the post-festive, over-locked-down delirium).

      bw, bliako

[reply]
[d/l]

In Section Seekers of Perl Wisdom