XMLHttpRequest eller jQuery Ajax

[Oltronix]

Är det någon som använder XMLHttpRequest och allt det medför för att få dynamsik uppdatering av delar av websida? Att använda jQuery Ajax rutiner verkar vara lite enklare.
Finns det någon fördel att använda XMLHttpRequest framför jQuery Ajax?

Jag har ägnat ett antal timmar för få till och förstå XMLHttpRequest-lösning. Kanske har det vart till någon nytta. Ev att jag borde använt jQueery Ajax istället. Jag får väl börja att bygga om mitt test med jQuery Ajax.

Så länge får jag ängna mig att vara nöjd med att jag kan konternuerligt uppdatera klockan och mätdata samt även fundera på varför jag får det att fungera i Firefox och inte i Chrome. Explorer har jag inte testat ännu.

[johano]

jQuery använder ju XMLHttpRequest "under ytan" för de browsers som stöder det, för gamla IE används istället det ActiveX-objekt som gör i princip samma sak.

Om du inte vill hålla på och dribbla med kod för att hantera alla olika browsers, kör med jQuery!

/j

[XorXaX]

Som johano skriver. Använd jQuery, då får du allt browserberoende bök gratis.

Jag var i samma sits som dig för några år sedan, men upptäckte sen jQuery och har inte tittat tillbaka.

[Oltronix]

"jQuery använder ju XMLHttpRequest "under ytan" för de browsers som stöder det"
Jo jag vet men jag hade inget bra ord för att beskriva vad jag ville säga.
Jag tänkte testa några olika browsers. Firefox för linux och Firefox och IE för Windows. Ev även browsers på IOS och Android. Server och mätdat från en Raspbian-miljö.

PS
Jag hittade även Server-Sent Events för HTML-5
https://www.w3schools.com/html/html5_se ... events.asp
Det är kanske ett enklare alternativ till dynamsikt uppdatering

[sodjan]

"Server-Sent Events för HTML-5" är väl det som officiellt kallas WebSocket.
https://sv.wikipedia.org/wiki/Websocket
https://en.wikipedia.org/wiki/WebSocket

Och visst är det nog enklare att använda ett framework som jQuery.
Vi håller på med en webb applikation där vi kör mot Python script
som skickar tillbaka data för att dynamiskt uppdatera webb sidor.
Fungerar bra, 12-13 ms från händelsen i browsern till att fälten
är uppdaterade på skärmen. Inkl. databas sökningen på servern.

[Oltronix]

Vi håller på med en webb applikation där vi kör mot Python script

Utan jQuery Ajax?

[Oltronix]

...samt även fundera på varför jag får det att fungera i Firefox och inte i Chrome.

Hmm Det fungerar med Chrome när jag kör på en webserver över nätet, men inte när jag kör lokalt utan webserver på burken, Ubuntu. Dock fungerar Firefox att köra lokalt på samma burk

edit:
Fungerar även på Chrome och IE på W7 mot webserver.

[sodjan]

> Utan jQuery Ajax?

Nej. Det är jQuery som hanterar händelsen "klick" på en knapp
och gör Ajax anropet till servern med ett värde från 2 textrutor
Värdet används för en databassökning och resultatet skickas
tillbaka till browsern och funktionen som hanterar Ajax-svaret
skriver till en annan textruta. 12-13 ms från klicket till att
svarsrutan uppdateras. Eller "samtidigt" med de mått som
en vanlig användare använder...

Aja, Det är bara en enkel proof-of-concept utan speciellt mycket
felhantering eller liknande. Och inga hemligheter så håll till godo...

Python scriptet som kör det hela. Det är alltså samma script som dels
laddar själva sidan och som sen "svarar" på de två ajax anropen. Så klart
lite klumpigt att skriva HTML koden på det där sättet, men det är som sagt
bara en enkel test (min första kod med ajax anrop, för övrigt).

Kod: Markera allt

import cgi
import os, sys
import cgitb; cgitb.enable()
import wasd
import datetime
import vms.starlet
import rdb

curs_iteminfo = rdb.statement("""
select MK010T_BANA, MK010T_KEY_DATUM, MK010T_TILLV_STATUS,
       MK010T_PACK_STATUS, MK010T_TILLV_DATUM, MK010T_TILLV_TID,
       MK010T_PACK_DATUM, MK010T_PACK_TID, MK010T_PACKORDERNR,
       MK010T_RAORDER, MK010T_HULAND, MK010T_MQSTATUS, MK010T_MQDATUM
  from mk010t
 where MK010T_ARTIKELNR = ? and MK010T_SERIENR = ?""")

curs_upd_huland = rdb.statement("""
update mk010t set MK010T_HULAND = ?
 where MK010T_ARTIKELNR = ? and MK010T_SERIENR = ?""")


def load_main_page ():

    print 'content-type: text/html\n'
    print '<!DOCTYPE html>'
    print '<head>'
    print '<meta http-equiv="X-UA-Compatible" content="IE=edge" />'
    print '<title>Ajax test</title>'
    print '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">'

    print '<script src="/js/JQUERY-3_2_1.JS"></script>'

    print '<script>'

    print '$(document).ready(function(){'
    print ' '
    print '  $("#getinfo").click(function(){'
    print '    start_time = new Date().getTime()'
    print '    $.post("/hv-bin/rb_main_4.py",'
    print '      {func:"getinfo",'
    print '       qart: $("#artin").val(),'
    print '       qser: $("#serin").val()'
    print '      },'
    print '      function(result){'
    print '        let request_time = new Date().getTime() - start_time;'
    print '        $("#artben").html(result);'
    print '        $("#getinfo_runtime").html("Getinfo call time "+request_time+ " ms.");'
    print '    })'
    print '  });'
    print ' '
    print '  $("#updland").click(function(){'
    print '    start_time = new Date().getTime()'
    print '    $.post("/hv-bin/rb_main_4.py",'
    print '      {func:"updland",'
    print '       qland: $("#landin").val(),'
    print '       qart: $("#artin").val(),'
    print '       qser: $("#serin").val()'
    print '      },'
    print '      function(result){'
    print '        let request_time = new Date().getTime() - start_time;'
    print '        $("#getinfo").click();'
    print '        $("#updland_runtime").html("Updland call time "+request_time+ " ms.");'
    print '    })'
    print '  });'
    print ' '
    print '});</script>'

    print '</head><body>'

    print '<table border="0"><tr>'
    print '<td><br>Artno: <input type="text" id="artin" size="10">'
    print '<td><br>Serno: <input type="text" id="serin" size="11">'
    print '<td><br><button id="getinfo">Fetch</button>'
    print '</table>'

    print '<table border="0"><tr>'
    print '<td><br>RA land: <input type="text" id="landin" size="4">'
    print '<td><br><button id="updland">Upd</button>'
    print '</table>'

    print '<div id="artben"></div>'
    print '<div id="getinfo_runtime"></div>'
    print '<div id="updland_runtime"></div>'

    print '</body></html>'

def run_func_getinfo():

   rdb.read_only()
   curs_iteminfo.execute(form.getvalue('qart','err'), form.getvalue('qser','err'))
   r = curs_iteminfo.fetchall()
   rdb.commit()

   print 'Content-Type: text/html\n'
   print '<br>'

   for i in r:
     print '<table border="0">'
     print '<tr><td>Bana<td>', i[0], '<td>Key datum<td>', i[1]
     print '<tr><td>Metik rapp<td>', i[4], '/', i[5], '<td>Tillv stat<td>', i[2]
     print '<tr><td>Pack rapp<td>', i[6], '/', i[7], '<td>Pack stat<td>', i[3]
     print '<tr><td>Pack ord<td>', i[8], '<td>RA ord/land<td>', i[9] , '/', i[10]
     print '<tr><td>MQ datum<td>', i[12], '<td>MQ stat<td>', i[11]
     print '</table>'

   print '<br> '
   print "<br>Timestamp     : ", datetime.datetime.now()

def run_func_updland():

   rdb.read_write()
   curs_upd_huland.execute(form.getvalue('qland','err'),
                           form.getvalue('qart','err'),
                           form.getvalue('qser','err'))
   rdb.commit()

   print 'Content-Type: text/html\n'
   print '<br>'

def run_func_error():

    print 'Content-Type: text/html'
    print ''
    print '<br>Unknown func value.'


#
# Main processing starts here.
#

vms.starlet.setprn('WASD RB Srv')

rdb.attachDB('MK000DB_HV06')

if os.environ["REQUEST_METHOD"] == "POST":

    form = cgi.FieldStorage()
    if form.getvalue('func', 'error') == "getinfo":
      run_func_getinfo()
    elif form.getvalue('func', 'error') == "updland":
      run_func_updland()
    else:
      run_func_error()

if os.environ["REQUEST_METHOD"] == "GET":

    load_main_page()

Så här ser "source" ut i browsern, lite tydligare utan Python koden.

Kod: Markera allt

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Ajax test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="/js/JQUERY-3_2_1.JS"></script>
<script>
$(document).ready(function(){
 
  $("#getinfo").click(function(){
    start_time = new Date().getTime()
    $.post("/hv-bin/rb_main_4.py",
      {func:"getinfo",
       qart: $("#artin").val(),
       qser: $("#serin").val()
      },
      function(result){
        let request_time = new Date().getTime() - start_time;
        $("#artben").html(result);
        $("#getinfo_runtime").html("Getinfo call time "+request_time+ " ms.");
    })
  });
 
  $("#updland").click(function(){
    start_time = new Date().getTime()
    $.post("/hv-bin/rb_main_4.py",
      {func:"updland",
       qland: $("#landin").val(),
       qart: $("#artin").val(),
       qser: $("#serin").val()
      },
      function(result){
        let request_time = new Date().getTime() - start_time;
        $("#getinfo").click();
        $("#updland_runtime").html("Updland call time "+request_time+ " ms.");
    })
  });
 
});</script>
</head><body>
<table border="0"><tr>
<td><br>Artno: <input type="text" id="artin" size="10">
<td><br>Serno: <input type="text" id="serin" size="11">
<td><br><button id="getinfo">Fetch</button>
</table>
<table border="0"><tr>
<td><br>RA land: <input type="text" id="landin" size="4">
<td><br><button id="updland">Upd</button>
</table>
<div id="artben"></div>
<div id="getinfo_runtime"></div>
<div id="updland_runtime"></div>
</body></html>

Och själva "testbilden" med timer värderna.

Skärmklipp.JPG

I testen kan man alltså hämta värden för ett artnr/sernr
och sedan uppdatera "land" tillbaka till databasen.

[Mr Andersson]

...samt även fundera på varför jag får det att fungera i Firefox och inte i Chrome.

Hmm Det fungerar med Chrome när jag kör på en webserver över nätet, men inte när jag kör lokalt utan webserver på burken, Ubuntu. Dock fungerar Firefox att köra lokalt på samma burk

edit:
Fungerar även på Chrome och IE på W7 mot webserver.

https://en.wikipedia.org/wiki/Same-origin_policy
Det är inte specat hur file:// ska hanteras i SOP. Chrome har valt att inte tillåta det alls.
Det går att stänga av säkerhetsfunktionerna i chrome om man verkligen vill men det är säkrare att köra t.ex. node eller någon annan server lokalt.

[Findecanor]

Vad du än väljer, gör så att websidan funkar med Javascript avstängt!

Javascript ska vara för lullull -- inte för grundläggande funktionalitet. Och affärslogik ska naturligtvis ligga på servern.

[sodjan]

Håller med angående affärslogiken, självklart ska det ligga centralt.
Men man kan alltså bygga dynamiska webb sidor utan att ha lite JS
som sköter det hela? Intressant, har du något exempel eller länkar?

[Oltronix]

sodjan: Snyggt!
Vad fördelarna att använda Python istället för tex PHP?
Varför använder du Python 2.x istället för 3.x?

Nästa steg för mig är att få en känsla (kunskap) så jag kan skilja vad är DOM, javascript och JQuery. De hänger ihop men jag tror att det är hälsosamt att veta vad som är vad.

ps
Vad använder ni för verktyg att debuga HTML, javascript. Kör jag PHP använder jag terminalen och kör "php script.php" och får felmedellande. I Firefox trycker jag F12 och får felmeddelanden. Andra tips?
Webbrowser har en tendens att svara med en blank sida när något är fel.

[hawkan]

Är absolut ingen auktoritet på detta. Men debugger använder jag firefox inbyggda, nås med Ctril-Shift-i Där finns de flesta om inte alla saker man förväntar sej av en debugger. Edit: Ja det kanske är den som kommer upp med F12.

Begränsa eller inte begränsa mängden Javascript? Kan vara kul att kolla på en applikation helt skriven i JavaScript här är en frontend till en fräs med en massa kul saker, rätt bra faktiskt http://chilipeppr.com/grbl

[sodjan]

> Vad fördelarna att använda Python istället för tex PHP?

Att vi har tillgång till Python men inte PHP.

> Varför använder du Python 2.x istället för 3.x?

För att vi inte har tillgång till trean.

> så jag kan skilja vad är DOM, javascript och JQuery.

JQuery är Javascript. JQuery är skrivet i Javascript. Men annars är det väl bara
att börja läsa, t.ex. https://learn.jquery.com/about-jquery/how-jquery-works/.

DOM är väl (i princip) bara att man har namn på objekt.

[Micke_s]

Kör med javascript, webläsare som inte stöder javascript idag är ingen marknadsandel att bry sig om..
De som har aktivt valt att slå av de har riktiga problem idag.

Dynamiska websidor är så mycket bättre än de som måste ladda om allt från servern varje gång.