login  Naam:   Wachtwoord: 
Registreer je!
 Nota's op tutorial:

Tutorials > AJAX > [AJAX] XMLHttpRequest object en live search
Pagina:

Reacties op de tutorial [AJAX] XMLHttpRequest object en live search


Offline  haytjes
Gepost op: 07 februari 2006 - 21:31
Gouden medailleGouden medaille

JS gevorderde


ik zou je eerste code stukje de volgende comments meegeven:
  1. function createRequestObject() {
  2.  
  3. var req;
  4.  
  5. if(window.XMLHttpRequest){
  6. req = new XMLHttpRequest(); // voor FF, Opera en soortgennoten
  7. } else if(window.ActiveXObject) {
  8. req = new ActiveXObject("Microsoft.XMLHTTP"); // voor IE < 7.0
  9. } else {
  10. alert('Problem creating the XMLHttpRequest object');
  11. }
  12.  
  13. return req;
  14.  
  15. }

Offline  ikkedikke
Gepost op: 08 februari 2006 - 14:40
PHP expert

ik heb nu de volgende 2 functies, maar hoe zorg ik er nu voor dat send weer return't wat handleResponse terug geeft?
  1. <script>
  2. function send(sCommand)
  3. {
  4. var rHttpConn = createRequestObject();
  5. http.open('get', 'http://localhost:8080/?command='+escape(sCommand));
  6. http.onreadystatechange = handleResponseTest;
  7. http.send(null);
  8. }
  9. function handleResponseTest()
  10. {
  11. if(http.readyState == 4 && http.status == 200)
  12. {
  13. if(http.responseText)
  14. {
  15. return(http.responseText);
  16. }
  17. }
  18. }
  19. </script>

Offline  nemesiskoen
Gepost op: 08 februari 2006 - 18:55
Gouden medaille

PHP expert


Dat is een ingewikkelde. Ik zou zoiets doen:

  1. <script>
  2. function send(sCommand) {
  3. this.ret = "";
  4. this.http = createRequestObject();
  5. this.http.open('get', 'http://localhost:8080/?command='+escape(sCommand));
  6. this.http.onreadystatechange = handleResponseTest;
  7. this.http.send(null);
  8. this.getVal = returnVal;;
  9. }
  10. function returnVal() {
  11. return this.ret;
  12. }
  13. function handleResponseTest()
  14. {
  15. if(this.http.readyState == 4 && this.http.status == 200)
  16. {
  17. if(this.http.responseText)
  18. {
  19. this.ret = this.http.responseText;
  20. }
  21. }
  22. }
  23.  
  24. var output = send('whatever');
  25. alert(output.getVal());
  26. </script>

Offline  derkiederkie
Gepost op: 09 februari 2006 - 15:50
Nieuw lid

hij werkt nog niet bij mij.
Hier gaat het volgens mij fout. Als ik de readyState in een alert zet geeft hij 1 aan.
  1. function handleResponseTest()
  2. {
  3. if(http.readyState == 4 && http.status == 200)


edit:hij werkt al:D

Offline  nemesiskoen
Gepost op: 09 februari 2006 - 17:44
Gouden medaille

PHP expert


Kan je misschien vertellen wat je fout deed?

Offline  derkiederkie
Gepost op: 09 februari 2006 - 18:56
Nieuw lid

http.onreadystatechange = handleResponseTest();

ik had er haakjes achter gezet maar dat was dus fout

Offline  kokx
Gepost op: 09 februari 2006 - 20:20
Onbekend

nice tut!!
alleen 1 vraagje: hoe moet je dan post gebruiken?
dit werkt niet:
  1. function sendRequestSearch(iets) {
  2.  
  3. http.open('post', 'search.php?zoek='+iets);
  4. http.onreadystatechange = handleResponseSearch;
  5. http.send(null);
  6.  
  7. }

Offline  derkiederkie
Gepost op: 09 februari 2006 - 22:51
Nieuw lid

in plaats van http.send(null) http.send(parameter=waarde)

maar bij mij lukt het ook nog niet helemaal:
  1. <script>
  2. function send(sCommand) {
  3. this.ret = "";
  4. this.http = createRequestObject();
  5. this.http.open('get', 'http://localhost:8080/?command='+escape(sCommand));
  6. this.http.onreadystatechange = handleResponseTest;
  7. this.http.send(null);
  8. this.getVal = returnVal;;
  9. }
  10. function returnVal() {
  11. return this.ret;
  12. }
  13. function handleResponseTest()
  14. {
  15. if(this.http.readyState == 4 && this.http.status == 200)
  16. {
  17. if(this.http.responseText)
  18. {
  19. this.ret = this.http.responseText;
  20. }
  21. }
  22. }
  23.  
  24. var output = send('whatever');
  25. alert(output.getVal());
  26. </script>

hij zegt bij mij dat http niet gedefineerd is

Offline  Rens
Gepost op: 11 februari 2006 - 00:03
Gouden medaille

Crew algemeen


Citaat:
[I][B]derkiederkie[/B] schreef op 09 Februari 2006 - 22:51[/I]

hij zegt bij mij dat http niet gedefineerd is


Jij gebruikt this.http, in de tutorial staat het overal zonder dat this. ervoor.
Misschien hoort dat er niet?
(Heb alleen nog maar deze tutorial gelezen, maar zag nergens this. erbij staan, vandaar...)

Offline  nemesiskoen
Gepost op: 11 februari 2006 - 00:28
Gouden medaille

PHP expert


derdiederkie, dat komt hoogstwaarschijnlijk omdat je de functie 'createRequestObject' er niet bij hebt staan.

Offline  Ibrahim
Gepost op: 12 februari 2006 - 00:12
PHP expert

Citaat:
[I][B]Rensjuh[/B] schreef op 11 Februari 2006 - 00:03[/I]

[..quote..]

Jij gebruikt this.http, in de tutorial staat het overal zonder dat this. ervoor.
Misschien hoort dat er niet?
(Heb alleen nog maar deze tutorial gelezen, maar zag nergens this. erbij staan, vandaar...)


kijk hierboven koen gebruikt het ook 

Offline  marten
Gepost op: 15 februari 2006 - 11:16
Beheerder

Vraagje:

Ik heb in mijn index de volgende code:
  1. <script language="JavaScript">
  2. function createRequestObject() <!--- Functie voor het detecteren van de XMLHttpRequest --->
  3. {
  4. var req;
  5. if(window.XMLHttpRequest)
  6. {
  7. req = new XMLHttpRequest(); <!--- Firefox, Opera gerelateerde browsers --->
  8. }
  9. else if(window.ActiveXObject)
  10. {
  11. req = new ActiveXObject("Microsoft.XMLHTTP"); <!--- Internet Explorer < 7.0 --->
  12. }
  13. else
  14. {
  15. alert('Problem creating the XMLHttpRequest object');
  16. }
  17.  
  18. return req;
  19. }
  20.  
  21. var http = createRequestObject();
  22.  
  23. function sendRequestSearch(iets)
  24. {
  25. http.open('get', 'zoekfotograaf.php?zoek='+iets);
  26. http.onreadystatechange = handleResponseSearch;
  27. http.send(null);
  28.  
  29. }
  30.  
  31. function handleResponseSearch()
  32. {
  33. if(http.readyState == 4 && http.status == 200)
  34. {
  35. if(http.responseText)
  36. {
  37. document.getElementById("zoekresultaat").innerHTML = http.responseText;
  38. }
  39. else
  40. {
  41. document.getElementById("zoekresultaat").innerHTML = " &nbsp; ";
  42. }
  43.  
  44. }
  45. else
  46. {
  47. document.getElementById("zoekresultaat").innerHTML = " &nbsp; ";
  48. }
  49. }
  50. </script>


  1. <td><input size=\"40\" type=\"text\" name=\"zoekfotograaf\" onkeyup=\"sendRequestSearch(this.value);\" /></td>
  2. </tr>
  3.  
  4. <tr>
  5. <td><select name=\"Fotograaf\" size=\"40\">
  6. <div id=\"zoekresultaat\">
  7.  
  8.  
  9.  
  10. </div>


Dit verwijst naar zoekfotograaf.php die de volgende code bevat:

  1. <?php
  2. require("config.inc.php");
  3.  
  4. $zoekfotograaf = $_GET['zoek'];
  5. $selectfotograaf = mysql_query("SELECT * FROM fotografen
  6. WHERE
  7. FAchterNaam LIKE '%$zoekfotograaf%' OR
  8. FVoorv LIKE '%$zoekfotograaf%' OR
  9. FVoorNaam LIKE '%$zoekfotograaf%' OR
  10. FEmail LIKE '%$zoekfotograaf%'");
  11. while ($f = mysql_fetch_array($selectfotograaf))
  12. {
  13. $FID = $f["FID"];
  14. $FAchterNaam = $f["FAchterNaam"];
  15. $FVoorv = $f["FVoorv"];
  16. $FVoorNaam = $f["FVoorNaam"];
  17. $FEmail = $f["FEmail"];
  18.  
  19.  
  20. if(isset($_GET['zoek']) && $_GET['zoek'] != "")
  21. {
  22. echo "<option value=" .$FID. ">" .$FAchterNaam, $FVoorv $FVoorNaam ($FEmail). "</option><br />";
  23. }
  24. }
  25.  
  26. ?>


Als ik vervolgens naar de pagina ga en ik typ wat in de box dan doet hij niks. Kan iemand mij vertellen hoe ik dit op kan lossen??????

Offline  marten
Gepost op: 15 februari 2006 - 15:21
Beheerder

oke hij doet het nu alleen in FF en niet in IE.

Als ik de var http echo in IE krijg ik te zien Object en niet Object Microsoft XMLHTTP.

Ik heb in Internet Explorer ActiveX aangezet zodat het niet geblokt word.

Offline  nemesiskoen
Gepost op: 19 februari 2006 - 15:51
Gouden medaille

PHP expert


@kockx: door volgende regel toe te voegen:

  1. http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  2. http_request.send(post);

Offline  bosgroen
Gepost op: 03 juli 2006 - 21:16
Gouden medaille

PHP interesse


hmm,
bij GETrequest bestaat er een grote kans dat IE6 (ongewenst) de gecachede versie van een file gebruikt.
oplossing: random number toevoegen aan het uiteinde van de query-string.

Offline  mike87
Gepost op: 17 juli 2006 - 12:42
Nieuw lid

Bron van dit artikel mocht er ook nog wel bij.
Net alsof je alles zelf geschreven heb....


http://www.ajaxfreaks.com/tutorials/1/0.php

Offline  nemesiskoen
Gepost op: 22 juli 2006 - 12:32
Gouden medaille

PHP expert


Dat stukje code vind je op honderd verschillende plaatsen op het Internet. Dat is standaard ajax. Het belangrijkste deel van dit artikel is nog altijd het begrijpen van AJAX en niet een stukje createHttpRequestObject();

Offline  Webtijn
Gepost op: 24 augustus 2006 - 11:38
PHP interesse

Misschien handig om ook post te behandelen? Als kleine uitbereiding 

Offline  ling
Gepost op: 25 augustus 2006 - 04:44
Nieuw lid

In IE blijf ik krijgen
http not defined
als ik http bekijk via alert of wat..staat er alleen
[object]

var http = createRequestObject()
bestaat.. in FF werkt het perfect
of is dit weer zon IE "veiligheids" probleem
zo ja heeft eimand de oplossing of een werkend voorbeeld van dit script op zijn of haar site ( in IE )^^

edit:

Het is opgelost. ER mag niks boven staan...

voorbeeld:

  1. <script type="text/JavaScript">
  2. window.onload=menu4();
  3. var http = createRequestObject();
  4. #rest,,,,
  5. </script>


Offline  Godlord
Gepost op: 09 mei 2007 - 16:10
PHP gevorderde

Citaat:
[I][B]mike87[/B] schreef op 17 juli 2006 - 12:42[/I]

Bron van dit artikel mocht er ook nog wel bij.
Net alsof je alles zelf geschreven heb....


http://www.ajaxfreaks.com/tutorials/1/0.php


In C++ heb je ook standaard code:

  1. #include <iostream>
  2.  
  3. using namespace std;
  4.  
  5. int main()
  6. {
  7. cout << "Hello World!";
  8. cin.get();
  9.  
  10. return 0;
  11. }


Net hetzelfde bij AJAX en op standaard codes staan trouwens geen auteursrecht(= copyright) dus...

Offline  MaffePauluZ
Gepost op: 30 augustus 2007 - 02:47
Nieuw lid

ik heb hier totaal geen verstand van maar probeer het tog ;)
hoe komt het dat als ik de 'e' 'r' 't' of 'j' als begin letter typ, dat ie dan in plaats van die zoekresultaten, een extra inputfield krijg?

ik heb nu dit:
script.php
  1. <script language="javascript">
  2.  
  3. function createRequestObject() {
  4.  
  5. var req;
  6.  
  7. if(window.XMLHttpRequest){
  8. req = new XMLHttpRequest();
  9. } else if(window.ActiveXObject) {
  10. req = new ActiveXObject("Microsoft.XMLHTTP");
  11. } else {
  12. req = NULL;
  13. alert('Probleem met het aanmaken van hetXMLHttpRequest object');
  14. }
  15.  
  16. return req;
  17.  
  18. }
  19.  
  20. var http = createRequestObject();
  21.  
  22. function sendRequestSearch(iets) {
  23.  
  24. http.open('get', 'search.php?zoek='+iets);
  25. http.onreadystatechange = handleResponseSearch;
  26. http.send(null);
  27.  
  28. }
  29.  
  30. function handleResponseSearch() {
  31.  
  32. if(http.readyState == 4 && http.status == 200){
  33. if(http.responseText) {
  34. document.getElementById("zoek_resultaten").innerHTML = http.responseText;
  35. } else {
  36. document.getElementById("zoek_resultaten").innerHTML = "   ";
  37. }
  38.  
  39. } else {
  40. document.getElementById("zoek_resultaten").innerHTML = "   ";
  41. }
  42.  
  43. }
  44.  
  45. <table width="100%">
  46. <tr>
  47. <td valign="top" width="301">
  48. <input type="text" size="50" name="zoek" onkeyup="sendRequestSearch(this.value);" />
  49. </td>
  50. <td valign="top">
  51. <div id="zoek_resultaten" style="border:1px solid #000000"></div>
  52. </td>
  53. </tr>


search.php
  1. <?php
  2.  
  3. /*
  4. * Dit kan natuurlijk ook gewoon een database record zijn,
  5. * maar om een snel 'werkend' voorbeeld te geven doe ik het maar even via een array
  6. */
  7.  
  8. $gegevens = array(
  9. 'test', 'test2', 'foo', 'bar', 'help', 'hello', 'dit is fijn', 'ford',
  10. 'etc', 'enzovoort', '...', 'en zo zijn er veel woorden',
  11. 'dit is een lange tekst', 'lalalala', 'tralala', 'PHP',
  12. 'OOP', 'JavaScript', 'AJAX power!', 'w00t',
  13. 'ik ben koen', 'koen', 'speelmeijer', 'is',
  14. 'de', 'naam', 'Koen Speelmeijer is de naam', 'enzovoort'
  15. , 'hehe');
  16.  
  17. if(isset($_GET['zoek']) && $_GET['zoek'] != "") {
  18.  
  19. foreach($gegevens as $v) {
  20. if(strstr($v, $_GET['zoek'])) {
  21. echo '<a href="#">'. $v .'</a><br />';
  22. }
  23. }
  24.  
  25. }
  26.  
  27. ?>


thanks voor hulp! 
er staat niet duidelijk in de tut welk stukje script in welk bestand moet.. ik heb alles gwn gekopieerd en geplakt

Offline  blablabla
Gepost op: 17 augustus 2008 - 20:50
Nieuw lid

hoe kun je ervoor zorgen dat bij search.php als je bijv. test als resultaat intypt je als output
  1. <a href="testlink">test</a><br />
krijgt, hierbij wil ik wel gebruik maken van een array. P.S. deze post kan best wel dom klinken, maar ik ben gewoon heel ergn ee n noob in php.

Offline  Richard
Gepost op: 28 september 2009 - 11:33
Crew algemeen

  1. if (typeof this.XMLHttpRequest === 'undefined') {
  2. if (this.ActiveXObject) {
  3. XMLHttpRequest = function () {
  4. return new ActiveXObject('Microsoft.XMLHTTP');
  5. };
  6. } else {
  7. XMLHttpRequest = function () {
  8. throw new Error('Browser does not support XMLHttp');
  9. };
  10. }
  11. }


Kleine snippet om het aanmaken van een Request object cross-browser te hebben. Zo werk je altijd volgens de W3C specs (:

Offline  Kevin
Gepost op: 28 september 2009 - 21:16
Crew Ajax/REST

En hoe pak je de situatie aan als het gaat om afbeeldingen ipv tekst?

Offline  nemesiskoen
Gepost op: 29 september 2009 - 17:41
Gouden medaille

PHP expert


Hetzelfde, je geeft gewoon de url van een afbeelding mee en dan kan je afbeeldingen via javascript gaan aanmaken en plaatsen waar je wilt.

Offline  extractor
Gepost op: 05 november 2009 - 13:42
Nieuw lid

Ik zit met het volgende en ik denk dat het mogelijk is met deze tutorial. Ik heb een site waar via php uitslagen van team wedstrijden worden ingevoerd. Elke teamwedstrijd bestaat uit 5 individuele 1 op 1 wedstrijden waarvan ik het lidnummer van ons lid noteer, de tegenstander en de uitslag.

Nu is mijn vraag: Bij het invullen van het lidnummer is geen controle, maar zou ik hier gebruik kunnen maken van ajax, als een lidnaam wordt ingetypt dat deze automatisch uit de databas worden gehaald endat naam wordt ingevuld en dat deze toch op een bepaalde manier het lidnummer meeneemt voor de sql query?

alvast bedankt!

Pagina:

Enkel aanvullende informatie is welkom. Geen prijzende of afkeurende reacties.
 
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.181s