'///////////////////////////////////////////////////////
' Mainstream program code.
'
memclear
let myRetMsg = "" 'initialize, holds returned message!
let retSerDat$ = "" 'initialize, holds returned serial data!
let sdc = 0 'initialize, controls arrival of serial data!
cls
wprint "<!DOCTYPE html>"
wprint "<html><head><meta charset='UTF-8'>"
wprint "<body>"
wprint "<h2>AJAX Demo with ESP Basic</h2>"
wprint "<button type='button' onclick='runAjax()'>Request Data</button>"
wprint "<p id='demo'>Data = B l a n k</p>"
wprint "<script>"
wprint "function runAjax() {"
wprint " var xhttp = new XMLHttpRequest();"
wprint " xhttp.onreadystatechange = function() {"
wprint " if (xhttp.readyState == 4 && xhttp.status == 200) {"
wprint " document.getElementById('demo').innerHTML = xhttp.responseText;"
wprint " }"
wprint " };"
wprint " xhttp.open('GET', 'msg?Param=Request', true);"
wprint " xhttp.send();"
wprint "}"
wprint "</script>"
wprint "</body>"
wprint "</html>"
print
msgbranch [espMsgResponse] 'define handler for MSG URL feature!
serial2begin 19200,14,12 'setup soft implemented Serial2 port!
serial2branch [serial2in] 'define handler for receiving Serial2 port data!
wait
'///////////////////////////////////////////////////////
' MSG URL Handler code.
'
[espMsgResponse]
msgget "Param" sendSerDat
serial2println sendSerDat 'send the request to Serial2 port!
do 'although we run an endless loop here, one can simply implement a timeout mechanism!
loop until sdc > 0 'waiting for the arrival of serial data!
let sdc = 0
let myRetMsg = "Data to/from Serial2 Port= " & sendSerDat & " / " & retSerDat$
msgreturn myRetMsg
wait
'///////////////////////////////////////////////////////
' Serial2 Port Handler code for data receival.
'
[serial2in]
serial2input retSerDat$ 'receive serial data!
let sdc = 1 'signal that serial data received!
return
Pressing "Request Data" button starts a XMLHttpRequest, which ends up in MSG URL Handler code. Inside it, we send a "Request" text out from Serial2 port.
Using a terminal program (like RealTerm), I receive the request and by pressing a button send "Reply" text to Serial2 port. Serial2 Port Handler code receives the reply text, then sets a flag (sdc) to allow program to continue down inside the MSG URL Handler code. Which in turn runs "msgreturn" instruction.
Return from MSG URL Handler triggers "document.getElementById('demo').innerHTML = xhttp.responseText;" statement to run. This updates data on the screen. This is the way of how "Ajax" works.
Inside the MSG URL Handler code, "do loop" runs endless. This is because, I reply the request to Serial2 port manually. Normally a program will receive the request and reply it very shortly. So it is obvious that a timeout must be implemented, and when it occurs an appropriate warning or error reply should be returned. One can simply implement this timeout code to his/her own needs and taste.
I prepared some small screenshots to betterly describe the matter. However somehow could not paste them here. If you like, I can prepare a sort of article, featuring screenhoots, I can email it to you. So, you can include it in examples on ESP Basic web site. I think it is worth to be included there.