| HTML Tutorials |
|
|
| XML Tutorials |
|
|
| Browser Scripting |
|
|
| Server Scripting |
|
|
| .NET (dotnet) |
|
|
| Multimedia |
|
|
| Web Building |
|
|
| Java Tutorials |
|
|
| Programming Langauges |
|
|
| Soft Skills |
|
|
| Database Tutorials |
|
|
| Operating System |
|
|
| Software Testing |
|
|
| SAP Module |
|
|
| Networking Programming |
|
|
| Microsoft Office |
|
|
| Accounting |
|
|
|
|
AJAX ist haupts�chlich, eine schnelle, dynamische Web site zu errichten, aber gewohnt Hilfsmittel auch zu speichern.
|
|
Beispiel
|
| Diesen Schritten folgen, um Anwendungen eines Netzes zu errichten:
Einen Text erhalten
Von XML erhalten
Schreiben dem K�rper
Einen Text bekanntgeben
|
|
1) Einen Text erhalten:
|
<html>
<head>
<script>
function submitForm()
{
var req = null;
if(window.XMLHttpRequest) req = new XMLHttpRequest();
else
if (window.ActiveXObject) req = new
ActiveXObject(Microsoft.XMLHTTP);
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
document.ajax.dyn="Received:" + req.responseText;
else
document.ajax.dyn="Error code " + req.status;
};
req.open( GET", "data.xml", true);
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
req.send(null);
}
</script>
</head>
<body>
<FORM method="POST" name="ajax" action="">
<INPUT type="BUTTON" value="Submit" ONCLICK="submitForm()">
<INPUT type="text" name="dyn" value="">
</FORM>
</body>
</html>
|
|
Comments on the code:
|
|
new ActiveXObject(Microsoft.XMLHTTP)
|
|
This constructor is only for Internet Explorer.
|
|
new XMLHttpRequest()
|
|
This constructor is only for any other browser including Firefox.
|
|
http.onreadystatechange
|
|
An anonymous function is assigned to the event indicators
|
|
http.readyState == 4
|
|
The 4 state means for the response is ready to send and sent by the server
|
|
http.status == 200
|
|
This status means ok, otherwise some errors code is returned, 404 for example.
|
|
http.open( "POST", "data.xml", true);
|
|
POST or GET
URL of the scripts to execute.
true for asynchronous .
|
|
http.setRequestHeader("Content-Type", "applications/x-www-form-urlencoded");
|
|
This is for POST method only.
|
|
http.send(document.getElementById("TYPEDTEXT").value);
|
|
Sends data to the server. Data comes from the "TYPEDTEXT" variable filled throught the form by the user.
|
| 2) Von XML erhalten
|
|
Um Daten von einer XML Akte m�ssen uns zu erhalten diese Linie ersetzen:
|
|
document.ajax.dyn=""Received:" + req.responseText;
|
|
|
durch diesen Code
|
var doc = req.responseXML; // assign the XML file to a var
var element = doc.getElementsByTagName('root').item(0); // read the first element with a dom's method
document.ajax.dyn.value= element.firstChild.data; // assign the content of the element to the form
|
|
| 3) Schreiben dem K�rper
|
|
In diesem Beispiel wird der gelesene Text in den K�rper der Seite und nicht in ein textfield eingesetzt. Der Code folgend ersetzt den textfield Formgegenstand und das zweite Teil ersetzt die Anweisung in die Javascriptfunktion.
|
<div id="zone">
... some text to replace ...
</div>
|
|
|
document.getElementById("zone").innerHTML = "Received:" + req.responseText;
|
|
| 4) Einen Text bekanntgeben
|
|
In diesem Beispiel wird ein Text zum Bediener geschickt und wird zu einer Akte geschrieben. Der Anruf zur �ge�ffneten� Methode �ndert, ist das Argument PFOSTEN-Methode, und Methode �senden� hat auch jetzt einen Wert f�r Argument.
|
req.open("POST", "ajax-post.xml", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(document.getElementById("dyn").value);
|
|
 |
 |
Schl�sselw�rter:
ajax Beispiel Tutorial, ajax Beispielhtml page, ajax Beispiel req, xml Dokument
|
|
| HTML Quizes |
|
|
| XML Quizes |
|
|
| Browser Scripting Quizes |
|
|
| Server Scripting Quizes |
|
|
| .NET (dotnet) Quizes |
|
|
| Multimedia Quizes |
|
|
| Web Building Quizes |
|
|
| Java Quizes |
|
|
| Programming Langauges Quizes |
|
|
| Soft Skills Quizes |
|
|
| Database Quizes |
|
|
| Operating System Quizes |
|
|
| Software Testing Quizes |
|
|
| SAP Module Quizes |
|
|
| Networking Programming Quizes |
|
|
| Microsoft Office Quizes |
|
|
| Accounting Quizes |
|
|
|
