Avatar billede karl-koder Nybegynder
25. marts 2008 - 08:47 Der er 14 kommentarer og
1 løsning

Prototype og Ajax hvordan ?

Hejsa,

Er der nogen herinde der kan komme med et fungerende eksempel på hvordan man laver post/get af en formular ved hjælp at prototype og dette library's ajax funktionalitet ?

Jeg har ledt en del på nettet og det er ikke lykkedes mig at finde noget fungerende eksempel.
Avatar billede olebole Juniormester
25. marts 2008 - 13:07 #1
<ole>

Prototype bygger på tussegammel, invalid og uhensigtsmæssig kode - og har ikke meget med Ajax at gøre. Der findes masser af såkaldte Ajax-libraries, men mig bekendt desværre ikke et eneste, der er skrevet i ordentlig kode fra dette årtusinde  :o|

/mvh
</bole>
Avatar billede karl-koder Nybegynder
25. marts 2008 - 14:38 #2
Aha det lyder interessant eller kedeligt om man vil ;o), er der andre ting du kan forslå istedet ?
Avatar billede karl-koder Nybegynder
25. marts 2008 - 14:52 #3
Har du for øvrigt set den seneste udgave af prototype? For en som mig der ikke kender synderligt meget til javascript ser det rimiligt fornuftigt ud, men jeg kan jo tage fejl ;o)
Avatar billede olebole Juniormester
25. marts 2008 - 20:07 #4
Ja - og det gør du  :)

I JavaScript må en funktion ikke begynde med '$'. Prototype's mest centrale funktion hedder slet og ret $.

I Ajax bruger man DOM til manipulation af sidens DOM-træ. Prototype bruger innerHTML, som aldrig har været valid i nogen standard og derudover kan være yderst uhensigtsmæssig at bruge, hvis man nu eller senere vil bruge mere moderne scripting i sidens kode:
    http://dengodekode.dk/artikler/DOM/no_innerhtml.php

I modsætning til, hvad man skulle tro udfra meget af det vrøvl, der skrives om Ajax på nettet, kræver teknikken, at man er benhård i HTML, JavaScript, CSS og ikke mindst DOM. Samtidig skal man have stor erfaring i de forskellige browseres særheder.

Specielt IE har en garbage collection, der gør det meget kompliceret at kode sig uden om 'hukommelsestab' - memory leaks. Den har altid været en voldsom pine i nakken, men har sjældent givet de store problemer på alm. websider.
Med Ajax bliver tingene dog langt mere komplekse, fordi vi pludselig begynder at indsætte, skifte og nedlægge et hav af elementer i ét og samme dokument - i stedet for at navigere rundt mellem forskellige sider.

Det er også meget pudsigt, at skræmmende mange tutorials viser såkaldte Ajax eksempler med brug af GET. Explorer beslaglægger en vis mængde hukommelse ved hver GET-forespørgsel - og hukommelsen frigives ikke igen, når forespøgslen er færdig. Derfor bør man altid bruge POST ... men det er overordentligt svært at læse sig til på nettet  :o|
Avatar billede karl-koder Nybegynder
25. marts 2008 - 20:28 #5
olebole >>

Jeg kan se i denne artikel : http://www.dengodekode.dk/artikler/ajax/xmlhttprequest_wrapper.php som jeg formoder at du er forfatter til at du har lavet en ajax wrapper. Og efter lidt søgning her på siden fandt jeg også frem til lidt kode du har skrevet i diverse indlæg det har jeg prøvet at stykke lidt sammen ud fra, men skal have lidt hjælp til helt at fatte det, så her kommer noget kode (der er tale om asp.net i c# men det skulle jo betyde mindre) :

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script language="javascript" type="text/javascript">
            (function(){
                if (window.XMLHttpRequest) return;
                var o = null, s,
                a = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
                for (var i=0,j=a.length; i<j; i++) {
                    s=a[i];
                    try {
                        if (o=new ActiveXObject(s))  break;
                    }
                    catch(e){};
                }
                window.XMLHttpRequest = o ? function(){return new ActiveXObject(s)} : null;
                o = null;
            })();
        </script>
        <script language="javascript" type="text/javascript">
            var sUrl = "http://localhost:10999/Prototype/Post.aspx";

            function AjaxReq(sMethod, sUrl, oVars, fnCallBack)
            {
                var oHttp = new XMLHttpRequest();
                oHttp.open(sMethod, sUrl, true);
                oHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
                oHttp.onreadystatechange = _fnCallBack;
                var aQuery = [];
                for (var x in oVars) aQuery.push( encodeURIComponent(x) + "=" + encodeURIComponent(oVars[x]) );
                oHttp.send( aQuery.join("&") );
                aQuery = null;
               
                function _fnCallBack() {
                    if (oHttp.readyState<4) return;
                    fnCallBack(oHttp);
                    oHttp = null;
                }
                return this;
            }

            function myCallBack(oHttp)
            {
                document.getElementById("latest").firstChild.nodeValue = oHttp.responseText;
            }

            function addUser()
            {
                new AjaxReq("POST", sUrl, {!! HVORDAN FÅR JEG FORMULAR VÆRDIER MED HER !!}, myCallBack);
            }
        </script>
    </head>
    <body>
        Fornavn<br />
        <input id="firstname" type="text" /><br /><br />
        Efternavn<br />
        <input id="lastname" type="text" /><br /><br />
        <button onclick="addUser()">Tilføj</button>
        <div id="latest"></div>
    </body>
</html>

I denne linie skal jeg hvis jeg har forstået det ret have formular værdierne med :
new AjaxReq("POST", sUrl, {"m":"adduser", HVORDAN FÅR JEG FORMULAR VÆRDIER MED HER}, myCallBack);

Hvordan bære jeg ad med det? Eller er der noget jeg ikke har fattet ?

I min code-behind på Post.aspx siden har jeg :
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Form["m"] == "adduser")
        {
            test(Request.Form["firstname"], Request.Form["lastname"]);
        }
    }

    public string test(string firstName, string lastName)
    {
        return "Fornavn : " + firstName + " og Efternavn : " + lastName;
    }
}
Avatar billede karl-koder Nybegynder
25. marts 2008 - 21:29 #6
Ok så kom jeg selv lidt længere, i denne metode lavede jeg :

function addUser()
{
    var firstname = document.getElementById("firstname").value;
    var lastname = document.getElementById("lastname").value;
    new AjaxReq("POST", sUrl, {"m":"adduser","firstname":""+firstname+"","lastname":""+lastname+""}, myCallBack);
}

og på den måde får jeg godt nok sendt formularen afsted, men så melder FF fejl i denne linie :

document.getElementById("latest").firstChild.nodeValue = oHttp.responseText;

Hvor fejlen lyder som følger :

document.getElementById("latest").firstChild has no properties

Hvad skyldes dette ?
Avatar billede tjens Nybegynder
25. marts 2008 - 21:56 #7
Kan det ikke være fordi din div med id=latest er helt tom, og dermed ikke har en firstChild?

Prøv at skrive tekst i den div fra starten.
Avatar billede karl-koder Nybegynder
25. marts 2008 - 22:01 #8
Det var lige det jeg fandt ud af, da jeg satte <div id="latest">&nbsp;</div> virker det hele lige efter bogen ;o)
Avatar billede olebole Juniormester
25. marts 2008 - 22:54 #9
Du skal lige huske at escape variabel værdierne - f.eks:
    var firstname = encodeURIComponent(document.getElementById("firstname").value);
Avatar billede karl-koder Nybegynder
25. marts 2008 - 23:00 #10
Ok tak for det, kan du fortælle hvorfor ?
Avatar billede karl-koder Nybegynder
25. marts 2008 - 23:03 #11
Og det for øvrigt ikke det der sker i denne :

aQuery.push( encodeURIComponent(x) + "=" + encodeURIComponent(oVars[x]) );

Jeg skal vel ikke gøre det begge steder ?
Avatar billede karl-koder Nybegynder
26. marts 2008 - 08:42 #12
Ok, jeg kunne læse mig frem til at der er for at beskytte de data jeg sender imellem siderne ;o)

Smid et svar dem af jer der vil have point ;o)
Avatar billede olebole Juniormester
26. marts 2008 - 17:13 #13
Det har ikke noget med beskyttelse/sikkerhed at gøre. Det handler om at de tegn, der ikke er tilladt ifølge HTTP-protokollen, skal escapes, så de i stedet kommer til at bestå af lovlige tegn.

Du bør altid escape variabel værdien, da den kan indeholde alle mulige tegn.
Derimod behøver du kun escape variabel navnet, hvis det indeholder specialtegn - og det sker kun yderst sjældent. Det kan dog være tilfældet, hvis man ønsker at sende variabler som et array til serveren - og variabel navnene derfor indeholder '[' og ']'
Avatar billede karl-koder Nybegynder
26. marts 2008 - 17:21 #14
Det er i orden ole, takker for hjælpen ;o)
Avatar billede olebole Juniormester
26. marts 2008 - 17:29 #15
Selvtak - og tak for points  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester