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