How do I handle AJAX and real-time updates in WebX?

[admin]

@ai In my application I need to refresh data without reloading the entire page. For example, a dashboard that updates sales numbers every 30 seconds, or a form that validates input on the server without submitting. Does WebX support AJAX? How does it work with the Harbour code?

[xBasePHPai]

AJAX and Real-Time Updates in WebX

Yes, WebX fully supports AJAX for real-time data refresh without page reloads. You have two main approaches:

1. TAjax Class (Built-in)

WebX includes a dedicated TAjax class for handling asynchronous requests directly from your xBase code:

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oAjax, nSales := 0
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   DEFINE WINDOW oWnd TITLE "Sales Dashboard"
   
   @ 100, 50 SAY "Current Sales: " TO oWnd
   @ 100, 200 SAY nSales TO oWnd NAME "lblSales"
   
   @ 160, 50 BUTTON "Refresh Now" TO oWnd SIZE 150, 40 ;
      ACTION RefreshSales(oWnd)
   
   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

FUNCTION RefreshSales(oWnd)
   LOCAL oAjax
   
   oAjax := TAjax():New()
   oAjax:SetURL("/cgi-bin/myapp.exe?action=getsales")
   oAjax:SetMethod("GET")
   oAjax:OnSuccess := {|cResponse| UpdateDashboard(oWnd, cResponse)}
   oAjax:OnError := {|cError| MsgAlert("Error: " + cError)}
   oAjax:Send()
RETURN NIL

FUNCTION UpdateDashboard(oWnd, cData)
   LOCAL nSales := Val(cData)
   oWnd:GetControl("lblSales"):SetText(cData)
RETURN NIL

2. TTimer for Automatic Polling

For automatic 30-second refreshes (like your dashboard example), use TTimer:

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oTimer
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   DEFINE WINDOW oWnd TITLE "Auto-Refresh Dashboard"
   
   @ 100, 50 SAY "Sales (updates every 30s): " TO oWnd
   @ 100, 350 SAY "0" TO oWnd NAME "lblSales"
   
   // Create timer that fires every 30 seconds (30000 ms)
   oTimer := TTimer():New(oWnd, 30000, {|| RefreshSales(oWnd)})
   oTimer:Activate()
   
   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

FUNCTION RefreshSales(oWnd)
   LOCAL oAjax
   
   oAjax := TAjax():New()
   oAjax:SetURL("/cgi-bin/myapp.exe?action=getsales")
   oAjax:SetMethod("GET")
   oAjax:OnSuccess := {|cResponse| oWnd:GetControl("lblSales"):SetText(cResponse)}
   oAjax:Send()
RETURN NIL

3. Server-Side Validation (Form Input)

For real-time form validation without submitting:

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, cEmail := Space(100)
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   DEFINE WINDOW oWnd TITLE "User Registration"
   
   @ 100, 50 SAY "Email:" TO oWnd
   @ 100, 150 GET cEmail TO oWnd SIZE 300 ;
      ON CHANGE ValidateEmail(oWnd, cEmail)
   
   @ 100, 500 SAY "" TO oWnd NAME "lblValidation"
   
   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

FUNCTION ValidateEmail(oWnd, cEmail)
   LOCAL oAjax, oLabel
   
   IF Len(Trim(cEmail)) < 3
      RETURN
   ENDIF
   
   oAjax := TAjax():New()
   oAjax:SetURL("/cgi-bin/myapp.exe?action=checkemail&email=" + cEmail)
   oAjax:SetMethod("GET")
   oAjax:OnSuccess := {|cResponse| ;
      oWnd:GetControl("lblValidation"):SetText(cResponse) }
   oAjax:Send()
RETURN NIL

4. TWebSocket for True Real-Time (Advanced)

For continuous streaming (stock tickers, live notifications), use TWebSocket:

Code: Select all

oWebSocket := TWebSocket():New("ws://localhost:8080/stream")
oWebSocket:OnMessage := {|cMsg| UpdateDisplay(cMsg)}
oWebSocket:Connect()

How It Works with Your xBase Code

• You write standard xBase/FiveWin syntax
• WebXPHP.exe compiles it to HTML5/CSS3/JavaScript
• AJAX calls are generated as JavaScript XMLHttpRequest or Fetch API
• Server-side handler receives the request, executes your xBase logic, returns data
• JavaScript updates the DOM without reloading the page
• No separate JavaScript coding needed -- it's all generated from your xBase

Key Points

• TAjax handles both GET and POST requests
• TTimer can trigger AJAX calls on intervals
• TWebSocket for bidirectional real-time communication (chat, notifications, live feeds)
• All classes work across all 6 deployment modes (CGI, FastCGI, mod_WebX, WebXServer, WebXPHP, mod_harbour)
• No need to write JavaScript manually -- WebX generates it for you

For more examples and advanced patterns, see the WebX documentation or contact [url=mailto:MayaBuilders@gmail.com]MayaBuilders@gmail.com[/url] for guidance.

---
Generated by WebX AI Assistant