Tutorials >
AJAX >
[AJAX] XMLHttpRequest object en live search
|
Gepost op: 07 februari 2006 - 21:31 |
|
|
|
JS gevorderde
|
ik zou je eerste code stukje de volgende comments meegeven:
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
req = new XMLHttpRequest(); // voor FF, Opera en soortgennoten
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP"); // voor IE < 7.0
} else {
alert('Problem creating the XMLHttpRequest object');
}
return req;
}
function createRequestObject() { var req; if(window.XMLHttpRequest){ req = new XMLHttpRequest(); // voor FF, Opera en soortgennoten } else if(window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); // voor IE < 7.0 } else { alert('Problem creating the XMLHttpRequest object'); } return req; }
|
|
|
|
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?
<script>
function send(sCommand)
{
var rHttpConn = createRequestObject();
http.open('get', 'http://localhost:8080/?command='+escape(sCommand));
http.onreadystatechange = handleResponseTest;
http.send(null);
}
function handleResponseTest()
{
if(http.readyState == 4 && http.status == 200)
{
if(http.responseText)
{
return(http.responseText);
}
}
}
</script>
<script> function send(sCommand) { var rHttpConn = createRequestObject(); http.open('get', 'http://localhost:8080/?command='+escape(sCommand)); http.onreadystatechange = handleResponseTest; http.send(null); } function handleResponseTest() { if(http.readyState == 4 && http.status == 200) { if(http.responseText) { return(http.responseText); } } } </script>
|
|
|
|
Gepost op: 08 februari 2006 - 18:55 |
|
|
|
PHP expert
|
Dat is een ingewikkelde. Ik zou zoiets doen:
<script>
function send(sCommand) {
this.ret = "";
this.http = createRequestObject();
this.http.open('get', 'http://localhost:8080/?command='+escape(sCommand));
this.http.onreadystatechange = handleResponseTest;
this.http.send(null);
this.getVal = returnVal;;
}
function returnVal() {
return this.ret;
}
function handleResponseTest()
{
if(this.http.readyState == 4 && this.http.status == 200)
{
if(this.http.responseText)
{
this.ret = this.http.responseText;
}
}
}
var output = send('whatever');
alert(output.getVal());
</script>
<script> function send(sCommand) { this.ret = ""; this.http = createRequestObject(); this.http.open('get', 'http://localhost:8080/?command='+escape(sCommand)); this.http.onreadystatechange = handleResponseTest; this.http.send(null); this.getVal = returnVal;; } function returnVal() { return this.ret; } function handleResponseTest() { if(this.http.readyState == 4 && this.http.status == 200) { if(this.http.responseText) { this.ret = this.http.responseText; } } } var output = send('whatever'); alert(output.getVal()); </script>
|
|
|
|
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.
function handleResponseTest()
{
if(http.readyState == 4 && http.status == 200)
function handleResponseTest() { if(http.readyState == 4 && http.status == 200)
edit:hij werkt al:D |
|
|
|
Gepost op: 09 februari 2006 - 17:44 |
|
|
|
PHP expert
|
Kan je misschien vertellen wat je fout deed? |
|
|
|
Gepost op: 09 februari 2006 - 18:56 |
|
|
|
Nieuw lid
|
http.onreadystatechange = handleResponseTest();
ik had er haakjes achter gezet maar dat was dus fout |
|
|
|
Gepost op: 09 februari 2006 - 20:20 |
|
|
|
Onbekend
|
nice tut!!
alleen 1 vraagje: hoe moet je dan post gebruiken?
dit werkt niet:
function sendRequestSearch(iets) {
http.open('post', 'search.php?zoek='+iets);
http.onreadystatechange = handleResponseSearch;
http.send(null);
}
function sendRequestSearch(iets) { http.open('post', 'search.php?zoek='+iets); http.onreadystatechange = handleResponseSearch; http.send(null); }
|
|
|
|
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:
<script>
function send(sCommand) {
this.ret = "";
this.http = createRequestObject();
this.http.open('get', 'http://localhost:8080/?command='+escape(sCommand));
this.http.onreadystatechange = handleResponseTest;
this.http.send(null);
this.getVal = returnVal;;
}
function returnVal() {
return this.ret;
}
function handleResponseTest()
{
if(this.http.readyState == 4 && this.http.status == 200)
{
if(this.http.responseText)
{
this.ret = this.http.responseText;
}
}
}
var output = send('whatever');
alert(output.getVal());
</script>
<script> function send(sCommand) { this.ret = ""; this.http = createRequestObject(); this.http.open('get', 'http://localhost:8080/?command='+escape(sCommand)); this.http.onreadystatechange = handleResponseTest; this.http.send(null); this.getVal = returnVal;; } function returnVal() { return this.ret; } function handleResponseTest() { if(this.http.readyState == 4 && this.http.status == 200) { if(this.http.responseText) { this.ret = this.http.responseText; } } } var output = send('whatever'); alert(output.getVal()); </script>
hij zegt bij mij dat http niet gedefineerd is |
|
|
|
Gepost op: 11 februari 2006 - 00:03 |
|
|
|
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...) |
|
|
|
Gepost op: 11 februari 2006 - 00:28 |
|
|
|
PHP expert
|
derdiederkie, dat komt hoogstwaarschijnlijk omdat je de functie 'createRequestObject' er niet bij hebt staan. |
|
|
|
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 |
|
|
|
Gepost op: 15 februari 2006 - 11:16 |
|
|
|
Beheerder
|
Vraagje:
Ik heb in mijn index de volgende code:
<script language="JavaScript">
function createRequestObject() <!--- Functie voor het detecteren van de XMLHttpRequest --->
{
var req;
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest(); <!--- Firefox, Opera gerelateerde browsers --->
}
else if(window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP"); <!--- Internet Explorer < 7.0 --->
}
else
{
alert('Problem creating the XMLHttpRequest object');
}
return req;
}
var http = createRequestObject();
function sendRequestSearch(iets)
{
http.open('get', 'zoekfotograaf.php?zoek='+iets);
http.onreadystatechange = handleResponseSearch;
http.send(null);
}
function handleResponseSearch()
{
if(http.readyState == 4 && http.status == 200)
{
if(http.responseText)
{
document.getElementById("zoekresultaat").innerHTML = http.responseText;
}
else
{
document.getElementById("zoekresultaat").innerHTML = " ";
}
}
else
{
document.getElementById("zoekresultaat").innerHTML = " ";
}
}
</script>
<script language="JavaScript"> function createRequestObject() <!--- Functie voor het detecteren van de XMLHttpRequest ---> { var req; if(window.XMLHttpRequest) { req = new XMLHttpRequest(); <!--- Firefox, Opera gerelateerde browsers ---> } else if(window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); <!--- Internet Explorer < 7.0 ---> } else { alert('Problem creating the XMLHttpRequest object'); } return req; } var http = createRequestObject(); function sendRequestSearch(iets) { http.open('get', 'zoekfotograaf.php?zoek='+iets); http.onreadystatechange = handleResponseSearch; http.send(null); } function handleResponseSearch() { if(http.readyState == 4 && http.status == 200) { if(http.responseText) { document.getElementById("zoekresultaat").innerHTML = http.responseText; } else { document.getElementById("zoekresultaat").innerHTML = " "; } } else { document.getElementById("zoekresultaat").innerHTML = " "; } } </script>
<td><input size=\"40\" type=\"text\" name=\"zoekfotograaf\" onkeyup=\"sendRequestSearch(this.value);\" /></td>
</tr>
<tr>
<td><select name=\"Fotograaf\" size=\"40\">
<div id=\"zoekresultaat\">
</div>
<td><input size=\"40\" type=\"text\" name=\"zoekfotograaf\" onkeyup=\"sendRequestSearch(this.value);\" /></td> </tr> <tr> <td><select name=\"Fotograaf\" size=\"40\"> <div id=\"zoekresultaat\"> </div>
Dit verwijst naar zoekfotograaf.php die de volgende code bevat:
<?php
require("config.inc.php");
$zoekfotograaf = $_GET['zoek'];
$selectfotograaf = mysql_query("SELECT * FROM fotografen
WHERE
FAchterNaam LIKE '%$zoekfotograaf%' OR
FVoorv LIKE '%$zoekfotograaf%' OR
FVoorNaam LIKE '%$zoekfotograaf%' OR
FEmail LIKE '%$zoekfotograaf%'");
while ($f = mysql_fetch_array($selectfotograaf))
{
$FID = $f["FID"];
$FAchterNaam = $f["FAchterNaam"];
$FVoorv = $f["FVoorv"];
$FVoorNaam = $f["FVoorNaam"];
$FEmail = $f["FEmail"];
if(isset($_GET['zoek']) && $_GET['zoek'] != "")
{
echo "<option value=" .$FID. ">" .$FAchterNaam, $FVoorv $FVoorNaam ($FEmail). "</option><br />";
}
}
?>
<?php require("config.inc.php"); $zoekfotograaf = $_GET['zoek']; $selectfotograaf = mysql_query("SELECT * FROM fotografen WHERE FAchterNaam LIKE '%$zoekfotograaf%' OR FVoorv LIKE '%$zoekfotograaf%' OR FVoorNaam LIKE '%$zoekfotograaf%' OR FEmail LIKE '%$zoekfotograaf%'"); { $FID = $f["FID"]; $FAchterNaam = $f["FAchterNaam"]; $FVoorv = $f["FVoorv"]; $FVoorNaam = $f["FVoorNaam"]; $FEmail = $f["FEmail"]; if(isset($_GET['zoek']) && $_GET['zoek'] != "") { echo "<option value=" .$FID. ">" .$FAchterNaam, $FVoorv $FVoorNaam ($FEmail). "</option><br />"; } } ?>
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?????? |
|
|
|
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. |
|
|
|
Gepost op: 19 februari 2006 - 15:51 |
|
|
|
PHP expert
|
@kockx: door volgende regel toe te voegen:
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http_request.send(post);
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); http_request.send(post);
|
|
|
|
Gepost op: 03 juli 2006 - 21:16 |
|
|
|
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.
|
|
|
|
Gepost op: 17 juli 2006 - 12:42 |
|
|
|
Nieuw lid
|
|
|
|
Gepost op: 22 juli 2006 - 12:32 |
|
|
|
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(); |
|
|
|
Gepost op: 24 augustus 2006 - 11:38 |
|
|
|
PHP interesse
|
Misschien handig om ook post te behandelen? Als kleine uitbereiding |
|
|
|
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:
<script type="text/JavaScript">
window.onload=menu4();
var http = createRequestObject();
#rest,,,,
</script>
<script type="text/JavaScript"> window.onload=menu4(); var http = createRequestObject(); #rest,,,, </script>
|
|
|
|
Gepost op: 09 mei 2007 - 16:10 |
|
|
|
PHP gevorderde
|
In C++ heb je ook standaard code:
#include <iostream>
using namespace std;
int main()
{
cout << "Hello World!";
cin.get();
return 0;
}
#include <iostream> using namespace std; int main() { cout << "Hello World!"; cin.get(); return 0; }
Net hetzelfde bij AJAX en op standaard codes staan trouwens geen auteursrecht(= copyright) dus... |
|
|
|
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
<script language="javascript">
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
req = NULL;
alert('Probleem met het aanmaken van hetXMLHttpRequest object');
}
return req;
}
var http = createRequestObject();
function sendRequestSearch(iets) {
http.open('get', 'search.php?zoek='+iets);
http.onreadystatechange = handleResponseSearch;
http.send(null);
}
function handleResponseSearch() {
if(http.readyState == 4 && http.status == 200){
if(http.responseText) {
document.getElementById("zoek_resultaten").innerHTML = http.responseText;
} else {
document.getElementById("zoek_resultaten").innerHTML = " ";
}
} else {
document.getElementById("zoek_resultaten").innerHTML = " ";
}
}
</script>
<table width="100%">
<tr>
<td valign="top" width="301">
<input type="text" size="50" name="zoek" onkeyup="sendRequestSearch(this.value);" />
</td>
<td valign="top">
<div id="zoek_resultaten" style="border:1px solid #000000"></div>
</td>
</tr>
</table>
<script language="javascript"> function createRequestObject() { var req; if(window.XMLHttpRequest){ req = new XMLHttpRequest(); } else if(window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } else { req = NULL; alert('Probleem met het aanmaken van hetXMLHttpRequest object'); } return req; } var http = createRequestObject(); function sendRequestSearch(iets) { http.open('get', 'search.php?zoek='+iets); http.onreadystatechange = handleResponseSearch; http.send(null); } function handleResponseSearch() { if(http.readyState == 4 && http.status == 200){ if(http.responseText) { document.getElementById("zoek_resultaten").innerHTML = http.responseText; } else { document.getElementById("zoek_resultaten").innerHTML = " "; } } else { document.getElementById("zoek_resultaten").innerHTML = " "; } } <td valign="top" width="301"> <input type="text" size="50" name="zoek" onkeyup="sendRequestSearch(this.value);" /> <div id="zoek_resultaten" style="border:1px solid #000000"></div>
search.php
<?php
/*
* Dit kan natuurlijk ook gewoon een database record zijn,
* maar om een snel 'werkend' voorbeeld te geven doe ik het maar even via een array
*/
$gegevens = array(
'test', 'test2', 'foo', 'bar', 'help', 'hello', 'dit is fijn', 'ford',
'etc', 'enzovoort', '...', 'en zo zijn er veel woorden',
'dit is een lange tekst', 'lalalala', 'tralala', 'PHP',
'OOP', 'JavaScript', 'AJAX power!', 'w00t',
'ik ben koen', 'koen', 'speelmeijer', 'is',
'de', 'naam', 'Koen Speelmeijer is de naam', 'enzovoort'
, 'hehe');
if(isset($_GET['zoek']) && $_GET['zoek'] != "") {
foreach($gegevens as $v) {
if(strstr($v, $_GET['zoek'])) {
echo '<a href="#">'. $v .'</a><br />';
}
}
}
?>
<?php /* * Dit kan natuurlijk ook gewoon een database record zijn, * maar om een snel 'werkend' voorbeeld te geven doe ik het maar even via een array */ 'test', 'test2', 'foo', 'bar', 'help', 'hello', 'dit is fijn', 'ford', 'etc', 'enzovoort', '...', 'en zo zijn er veel woorden', 'dit is een lange tekst', 'lalalala', 'tralala', 'PHP', 'OOP', 'JavaScript', 'AJAX power!', 'w00t', 'ik ben koen', 'koen', 'speelmeijer', 'is', 'de', 'naam', 'Koen Speelmeijer is de naam', 'enzovoort' , 'hehe'); if(isset($_GET['zoek']) && $_GET['zoek'] != "") { foreach($gegevens as $v) { if(strstr($v, $_GET['zoek'])) { echo '<a href="#">'. $v .'</a><br />'; } } } ?>
thanks voor hulp!
er staat niet duidelijk in de tut welk stukje script in welk bestand moet.. ik heb alles gwn gekopieerd en geplakt |
|
|
|
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
<a href="testlink">test</a><br />
<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. |
|
|
|
Gepost op: 28 september 2009 - 11:33 |
|
|
|
Crew algemeen
|
if (typeof this.XMLHttpRequest === 'undefined') {
if (this.ActiveXObject) {
XMLHttpRequest = function () {
return new ActiveXObject('Microsoft.XMLHTTP');
};
} else {
XMLHttpRequest = function () {
throw new Error('Browser does not support XMLHttp');
};
}
}
if (typeof this.XMLHttpRequest === 'undefined') { if (this.ActiveXObject) { XMLHttpRequest = function () { return new ActiveXObject('Microsoft.XMLHTTP'); }; } else { XMLHttpRequest = function () { throw new Error('Browser does not support XMLHttp'); }; } }
Kleine snippet om het aanmaken van een Request object cross-browser te hebben. Zo werk je altijd volgens de W3C specs (: |
|
|
|
Gepost op: 28 september 2009 - 21:16 |
|
|
|
Crew Ajax/REST
|
En hoe pak je de situatie aan als het gaat om afbeeldingen ipv tekst? |
|
|
|
Gepost op: 29 september 2009 - 17:41 |
|
|
|
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. |
|
|
|
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! |
|
|
Enkel aanvullende informatie is welkom. Geen prijzende of afkeurende reacties. |
|
|
|