7. February 2012
von Blackbam
Nothing new, nothing special... just the working code of a basic Ajax skeleton, as this has to be copied and pasted that often. This example shows an application similar to Google suggest, which searches related values, whenever a key is pressed.

Note: Since jQuery is that popular today, it is possibly better to use this (see jQuery Ajax Tutorial).
index.html - function call and result representation




Ajax test






ajax.js - request, response and data processing
var XMLHTTP = null;

function AjaxRequest(compString) {

// XMLHTTP-Request Objekt erzeugen, dabei auf Browserkonformität achten
	if(window.XMLHttpRequest) {
		XMLHTTP = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		try {
			XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(ex) {
			try {
				XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(ex) {
			}
		}
	}
	
	XMLHTTP.open("GET","test.php?compString="+compString);
	XMLHTTP.onreadystatechange = MyRequestExecute;
	XMLHTTP.send(null);
}

// wird jedes mal aufgerufen, wenn der XMLHTTP-Request eine neue Stufe erreicht, bei 4 ist die Antwort des Servers eingetroffen
function MyRequestExecute() {
	// responseText als Javascript-String, responseXML als Javascript XML-DOM-Element, status Statuscode, statusText des. Beschreibung
	if(XMLHTTP.readyState == 4) {
		document.getElementById("result").innerHTML = XMLHTTP.responseText;
	}
}

The server side


test.php
query($sql);
	
} catch (Exception $e) {
    echo 'Verbindungsaufbau fehlgeschlagen: ',  $e->getMessage(), "\n";
}

echo $_GET['compString']."< pre >".$horst."";
?>
config.inc.php

Share

Dieser Eintrag wurde am 7. February 2012 um 10:10 in der Kategorie JavaScript / Ajax veröffentlicht. You can book the comments for this article RSS 2.0. Feedback, discussion, commendation and critics are welcome: Write a comment or trackback.


Tags: , , ,

No comments yet

Kommentare abonnieren (RSS) or URL Trackback

Leave a comment: