Forum > Pas2JS

http post and get requests

(1/1)

prof7bit:
Because nobody dared to ask before I will do it now: I need to be able to do GET and POST requests.

I have found an example using await() and window.fetch() and this works for issuing GET requests, but now I also need something for POST requests and I can't find any example.

There is also a TJSXMLHttpRequest class but I cannot even figure out how to create an instance of it because of its obscure constructor arguments.

Are there any examples of POST and GET using TJSXMLHttpRequest? Or even better an example of using POST with window.fetch(), or still better some convenient pascal-ish wrapper API that hides away all these javascrip-ish procedures and just gives me a simple function to call?


PascalDragon:
This is based on some code I have (I've not tested it as-is):


--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure PostData(aData: String);var  xhr: TJSXMLHttpRequest;   procedure AfterLoad(aEvent: TEventListenerEvent);  begin    if xhr.Status = 200 then      Writeln('Ok')    else      Writeln('Error: ', xhr.Status);  end; begin  xhr := TJSXMLHttpRequest.new;  xhr.addEventListener('load', @AfterLoad);  xhr.open('POST', '/myapp/myapi');  xhr.send(aData);end; 
Please note that the AfterLoad will be executed asynchronously and that PostData will return right after the send while the request is still being executed.

dbannon:
https://github.com/tomboy-notes/tomboy-ng/blob/master/source/transgithub.pas

line 1329 has a function that does both PUT and POST.

line 1276 does a GET

Davo

prof7bit:

--- Quote from: PascalDragon on October 26, 2021, 09:08:47 am ---This is based on some code I have (I've not tested it as-is):


--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure PostData(aData: String);var  xhr: TJSXMLHttpRequest;   procedure AfterLoad(aEvent: TEventListenerEvent);  begin    if xhr.Status = 200 then      Writeln('Ok')    else      Writeln('Error: ', xhr.Status);  end; begin  xhr := TJSXMLHttpRequest.new;  xhr.addEventListener('load', @AfterLoad);  xhr.open('POST', '/myapp/myapi');  xhr.send(aData);end; 
Please note that the AfterLoad will be executed asynchronously and that PostData will return right after the send while the request is still being executed.

--- End quote ---

Thank you!

But I wonder: How does it keep the local stack frame alive to access the local variable when the function returns immediately? Is the nested function translated into a closure that will keep a reference to the XHR variable (which would then not live on the stack at all)?

What other things are allowed here that would normally not work at all, like for example returning pointers to local variables, etc.? Are these things (and their limits) clearly defined as new features or do they just happen under certain circumstances (like here) as a side effect and nobody is talking about it?

PascalDragon:

--- Quote from: prof7bit on October 26, 2021, 12:46:41 pm ---But I wonder: How does it keep the local stack frame alive to access the local variable when the function returns immediately? Is the nested function translated into a closure that will keep a reference to the XHR variable (which would then not live on the stack at all)?
--- End quote ---

The JavaScript engine is dealing with all the life cycle management of the variables, but yes, they're essentially closures. Anonymous functions are supported by pas2js as well, so you can write this, too:


--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure PostData(aData: String);var  xhr: TJSXMLHttpRequest;begin  xhr := TJSXMLHttpRequest.new;  xhr.addEventListener('load', procedure(aEvent: TEventListenerEvent)    begin      if xhr.Status = 200 then        Writeln('Ok')      else        Writeln('Error: ', xhr.Status);    end);  xhr.open('POST', '/myapp/myapi');  xhr.send(aData);end;

--- Quote from: prof7bit on October 26, 2021, 12:46:41 pm ---What other things are allowed here that would normally not work at all, like for example returning pointers to local variables, etc.? Are these things (and their limits) clearly defined as new features or do they just happen under certain circumstances (like here) as a side effect and nobody is talking about it?

--- End quote ---

You can't have pointers in JavaScript and thus pas2js (at least not in the way you're thinking). Passing on references to classes, etc. is safe however, cause again, their life cycle is managed by the JS engine.

Navigation

[0] Message Index

Go to full version