Avatar billede haolan Nybegynder
09. februar 2008 - 20:04 Der er 29 kommentarer og
2 løsninger

Javascript + PHP + AJAX

Hej...

Jeg er ved at lave en brugeroprettelse og vil gerne have en knap på min side der tjekker om et brugernavn eksistere i db'en i forvejen.

Hvordan får jeg det lavet sådan at jeg ved at trykke på knappen kan se om det er findes i forvejen og udføre et stykke javascript alt afhængigt af resultatet?

Og når jeg trykker opret bruger vil jeg gerne åbne en ny side hvor den der cirkel kører og udskriver et svar når serveren enten har oprettet eller fejlet... Hvordan laver jeg det?
Avatar billede jakobdo Ekspert
09. februar 2008 - 20:40 #1
Måske du kunne bruge noget af oleboles kode her: http://www.eksperten.dk/spm/817625
Avatar billede haolan Nybegynder
10. februar 2008 - 15:12 #2
hmm altså jeg kan indsætte den kode:

<script 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;s=a[i],i++){try{if(o=new ActiveXObject(s))break}
catch(e){}}window.XMLHttpRequest=o?function(){return new ActiveXObject(s)}:null;o=null})()</script>

På mit site, før et script.. Men hvordan bruger jeg det så helt præcist?
Kan du evt. vise et lille simpelt eksempel?
Avatar billede haolan Nybegynder
10. februar 2008 - 15:18 #3
fandt dette længere nede på siden:

function askServer(sQuery) {
    _oHttp = new XMLHttpRequest();
    _oHttp.open("post", "http://www.domain.dk/page.php", true);
    _oHttp.onreadystatechange = function(){ myCallBack(_oHttp) };
    _oHttp.send(sQuery);
}

function myCallBack(oHttp) {
    if (oHttp.readyState<4) return;

  // Gør noget fornuftigt med responsen her (kode udeladt)

  // - og dræb derefter objektet
    oHttp = null;
}

Kan du evt give et kort eksempel på hvordan jeg vil tjekke på om en bruger eksistere fx ved at returnere true eller false.?
Avatar billede olebole Juniormester
10. februar 2008 - 15:53 #4
<ole>

Eksemplerne i den anden tråd er temmelig udførlige. Hvad er det præcis, du ikke kan finde udaf?

/mvh
</bole>
Avatar billede haolan Nybegynder
10. februar 2008 - 16:41 #5
har lidt svært ved at overskue hvordan jeg bruger det.. Kan ikke rigtig se mig ud af hvordan requests fungerer :S
Avatar billede haolan Nybegynder
10. februar 2008 - 16:41 #6
altså hvordan jeg får noget retur igen når jeg efterspørger noget
Avatar billede haolan Nybegynder
10. februar 2008 - 16:50 #7
har prøvet følgene:

<script 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;s=a[i],i++){try{if(o=new ActiveXObject(s))break}catch(e){}}window.XMLHttpRequest=o?function(){return new ActiveXObject(s)}:null;o=null})()</script>

<script type="text/JavaScript">

function askServer(sQuery) {
    _oHttp = new XMLHttpRequest();
    _oHttp.open("post", "ajaxPost.php", true);
    _oHttp.onreadystatechange = function(){ myCallBack(_oHttp) };
    _oHttp.send(sQuery);
}

function myCallBack(oHttp) {
    if (oHttp.readyState<4) return;

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

  // - og dræb derefter objektet
    oHttp = null;
}

</script>

<button onclick="askServer('?fisk=foo')">TEST</button>

<div id="latest">&nbsp;</div>


og i min php står der:

if($_POST["fisk"] == "foo") {
    echo true;
}


Men det virker ikke..
Avatar billede jakobdo Ekspert
10. februar 2008 - 17:08 #8
Har du husket at følge olebole's indlæg fra: 03/02-2008 22:28:30 ?
Avatar billede olebole Juniormester
10. februar 2008 - 17:15 #9
Der ligger helt tydelige eksempler - både med og uden JSON-formatering af data - i tråden:
    http://www.eksperten.dk/spm/817625

Er det ikke nok, må du vist vente på bogen, for ellers bliver det en _meget_ lang artikel  :)
Avatar billede haolan Nybegynder
10. februar 2008 - 17:15 #10
nej ikke helt.. Troede man kunne lave det simpelt som mit ovenstående der..


Men har nu prøvet:

<script 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;s=a[i],i++){try{if(o=new ActiveXObject(s))break}catch(e){}}window.XMLHttpRequest=o?function(){return new ActiveXObject(s)}:null;o=null})()</script>

<script type="text/JavaScript">
var sUrl = "ajaxPost.php";

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 foo() {
    new AjaxReq("POST", sUrl, null, myCallBack);
}
</script>

<button onclick="foo()">TEST</button>

<div id="latest">&nbsp;</div>


Men hvordan tilføjer jeg et post request?

så jeg trække det i min php med $_POST["fisk"] == "foo";
Avatar billede jakobdo Ekspert
10. februar 2008 - 18:03 #11
Prøv at test dette kode:

<?php
//http://www.eksperten.dk/spm/818759
if($_POST['foo'] == 'bar'){
    echo 'Det virker, juhuuu.';
    exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html>
<head>
<title>818759</title>
<script type="text/JavaScript">
//<![CDATA[
(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;s=a[i],i++){try{if(o=new ActiveXObject(s))break}catch(e){}}window.XMLHttpRequest=o?function(){return new ActiveXObject(s)}:null;o=null})()

var sUrl = "http://www.codebreaker.dk/exp/818759exp.php";

function AjaxReq(sMethod, sUrl, sVars, 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;
    oHttp.send( sVars);
    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 foo() {
    new AjaxReq("POST", sUrl, 'foo=bar', myCallBack);
}
//]]>
</script>
</head>
<body>
    <div><button onclick="foo()">TEST</button></div>
    <div id="latest">&nbsp;</div>
</body>
</html>
Avatar billede olebole Juniormester
10. februar 2008 - 18:10 #12
njaaahhh ... det skal være et objekt:
    new AjaxReq("POST", sUrl, {'foo':'bar'}, myCallBack);

Så vil $_POST["foo"] på serveren indeholde strengen 'bar'  ;o)
Avatar billede jakobdo Ekspert
10. februar 2008 - 18:34 #13
Olebole, jeg rettede til en streng som blev sendt direkte med til oHttp.send()
Men har efterfølgende rettet til din seneste kode.
Avatar billede haolan Nybegynder
10. februar 2008 - 19:00 #14
ok.. Nu virker det sådan nogenlunde..

Min knap der hedder "tjek om brugernavnet er ledigt" udfører:

function checkUsername(field) {
    username = document.getElementById(field).value;
    sUrl = "includes/ajaxRequests.php";
    posts = new Array();
    posts["tjekUsername"] = username;
    res = foo(sUrl, posts);
   
    if(res == "true")
        alert("Brugernavnet er optaget!");
    else if(res == "false")
        alert("Brugernavnet er ledigt!");
}

ved onclick.


Men første gang jeg trykker sker der intet. Anden gang jeg trykker kommer der en alert op med det rigtige resultat.

Ændre jeg teksten og trykker igen kommer resultatet fra sidste forespørgsel
Og ved næste tryk igen kommer igen det rigtige resultat..

hvad kan være galt??
Avatar billede jakobdo Ekspert
10. februar 2008 - 19:27 #15
Har du rettet funktionen foo() ?
For ellers giver det der da problemer ja.
Avatar billede haolan Nybegynder
10. februar 2008 - 20:56 #16
Ja jeg har rettet den til at være:

function foo(sUrl, postArray) {
    new AjaxReq("POST", sUrl, postArray, myCallBack);
    return callBack;
}
Avatar billede haolan Nybegynder
10. februar 2008 - 21:42 #17
resten af koden ser sådan ud:

var callBack = null;

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) {
    callBack = oHttp.responseText;
}


dette har jeg lagt ind i en js fil sammen med foo
Avatar billede jakobdo Ekspert
10. februar 2008 - 21:45 #18
postArray skal være:

{'tjekUsername':'username'}

'username' er så det som du får fra username = document.getElementById(field).value;
Avatar billede jakobdo Ekspert
10. februar 2008 - 22:02 #19
Du bør kunne tilrette dette:

<?php
//http://www.eksperten.dk/spm/818759
if(isset($_POST['username'])){
    if($_POST['username'] == 'jakobdo')
    echo 'Brugernavnet er optaget';
    exit();
}
header("Content-Type: text/html; charset=utf-8");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html>
<head>
<title>818759</title>
<script type="text/JavaScript">
//<![CDATA[
(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;s=a[i],i++){try{if(o=new ActiveXObject(s))break}catch(e){}}window.XMLHttpRequest=o?function(){return new ActiveXObject(s)}:null;o=null})()

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 checkUsername() {
    var username = document.getElementById("username").value;
    new AjaxReq("POST", "http://www.codebreaker.dk/exp/818759exp.php", {"username":username}, myCallBack);
}
//]]>
</script>
</head>
<body>
    <div>Brugernavn: <input type="text" id="username" /></div>
    <div><button onclick="checkUsername()">Tjek</button></div>
    <div id="latest">&nbsp;</div>
</body>
</html>
Avatar billede haolan Nybegynder
10. februar 2008 - 22:12 #20
ok.. det virker fint med din kode.. Men hvordan skal jeg stille det op hvis jeg gerne vil have det trukket ud i en js fil, så jeg kan bruge den samme kode til andre ajax funktioner?
Avatar billede olebole Juniormester
10. februar 2008 - 22:50 #21
Du kan lægge dette i en fil 'ajax.js':

//<![CDATA[
(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;s=a[i],i++){try{if(o=new ActiveXObject(s))break}catch(e){}}window.XMLHttpRequest=o?function(){return new ActiveXObject(s)}:null;o=null})()

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;
}

Derefter kan du importere filen med:
    <script type="text/JavaScript" src="ajax.js"></script>

Resten skal skræddersyes til den enkelte opgave. Skal du have overført mere komplekse data, bør du kikke på eksemplet med JSON. Kik evt. også på http://www.json.org
Avatar billede haolan Nybegynder
10. februar 2008 - 23:38 #22
ok.. nu virker det fint på mit localhost, men ligeså snart jeg uploader på mit domæne sker der intet når jeg trykker på knappen..

Nogen forslag til hvad det kan være? :S
Avatar billede haolan Nybegynder
10. februar 2008 - 23:51 #23
Med firebug har jeg fundet frem til at den giver følgene respons:
<br />

<b>Warning</b>:  mysql_connect() [<a href='function.mysql-connect'>function.mysql-connect</a>]: Can't

connect to local MySQL server through socket '/tmp/mysql.sock' (2) in <b>/mounted-storage/home26b/sub002

/sc24152-ERZJ/test/includes/connect.php</b> on line <b>5</b><br />

<br />

<b>Warning</b>:  mysql_select_db(): supplied argument is not a valid MySQL-Link resource in <b>/mounted-storage

/home26b/sub002/sc24152-ERZJ/test/includes/connect.php</b> on line <b>6</b><br />

<br />

<b>Warning</b>:  mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: Can't connect

to local MySQL server through socket '/tmp/mysql.sock' (2) in <b>/mounted-storage/home26b/sub002/sc24152-ERZJ

/test/sql/membership.php</b> on line <b>24</b><br />

<br />

<b>Warning</b>:  mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: A link to the

server could not be established in <b>/mounted-storage/home26b/sub002/sc24152-ERZJ/test/sql/membership

.php</b> on line <b>24</b><br />

<br />

<b>Warning</b>:  mysql_result(): supplied argument is not a valid MySQL result resource in <b>/mounted-storage

/home26b/sub002/sc24152-ERZJ/test/sql/membership.php</b> on line <b>25</b><br />

false

Når jeg trykker på knappen..

Har ingen idé om hvorfor :S
Avatar billede olebole Juniormester
11. februar 2008 - 00:50 #24
Du kan øjensynligt ikke forbinde til databasen. Hvorfor ved jeg ikke lige  :)
Avatar billede jakobdo Ekspert
11. februar 2008 - 08:02 #25
Hvorfor ved du ikke det Olebole?
Avatar billede olebole Juniormester
11. februar 2008 - 19:16 #26
- tjaaahhhh ...  ;D
Avatar billede haolan Nybegynder
16. marts 2008 - 18:52 #27
var vidst en fejl i mit eget.. Det virker ihvertfald igen efter en lille rundtur igennem koden.. :P

Smid svar for points begge to, i har begge bidraget til en god forståelse af ajax i php :)
Avatar billede olebole Juniormester
16. marts 2008 - 18:54 #28
;o)
Avatar billede jakobdo Ekspert
16. marts 2008 - 21:27 #29
Svar!
Avatar billede jakobdo Ekspert
30. september 2008 - 20:35 #30
Takker for point.
Avatar billede olebole Juniormester
30. september 2008 - 21:09 #31
Tak for points  =)
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