Get Someone Else to Do IT! We Build Things! Learn more... Get a text <html>
<head>
<script>
function submitForm()
{
var xhr;
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr = new XMLHttpRequest(); }
catch (e3) { xhr = false; }
}
}
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.ajax.dyn="Received:" + xhr.responseText;
else
document.ajax.dyn="Error code " + xhr.status;
}
};
xhr.open(GET, "data.txt", true);
xhr.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> Syntax of form using Ajax new ActiveXObject(Microsoft.XMLHTTP)
This constructor is for Internet Explorer.
new XMLHttpRequest()
This constructor is for any other browser including Firefox.
http.onreadystatechange
An anonymous function is assigned to the event indicator.
http.readyState == 4
The 4 state means for the response is ready and sent by the server.
http.status == 200
This status means ok, otherwise some error code is returned, 404 for example.
http.open( "POST", "data.xml", true);
POST or GET
URL of the script to execute.
true for asynchronous (false for synchronous).
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
This is for POST only.
http.send(document.getElementById("TYPEDTEXT").value);
Send data to the server. Data comes from the "TYPEDTEXT" variable filled throught the form by the user. Get from XML To get data from an XML file, we have just to replace this line: document.ajax.dyn="Received:" + xhr.responseText; by this code: var doc = xhr.responseXML; // Assign the XML file to a var
var element = doc.getElementsByTagName('root').item(0); // Read the first element
document.ajax.dyn.value= element.firstChild.data; // Assign the content to the form
Write to body In this demo, the text read is put into the body of the page, and not into a textfield.
The code below replaces the textfield form object and the second part replaces the assignment into the JavaScript function. <div id="zone">
... some text to replace ...
</div> document.getElementById("zone").innerHTML = "Received:" + xhr.responseText; Post a text In this demo, a text is sent to the server and is written into a file. The call to the "open" method changes, the argument is POST, the url is the name of a file or script that receives the data sent, and that must process it. And the "send" method has now a value as argument that is a string of parameters. xhr.open("POST", "ajax-post-text.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data); The parameter of the send method is in the format of the HTML POST method. When several values are sent, they are separated by the ampersand symbol: var data = "file=" + url + "&content=" + content; The "file" parameter is the name of a file created to store the content. The filename must be checked by the server to prevent any other file to be modified. Tired of sifting through articles, and just want the job done! We build things... Websites, E-commerce, Back end Enterprise Level Applications, From a simple Website to Full Blown Dynamic Applications using Administrative Tools to manage the data, if you need it we can build it. Located in DFW area in Texas area and serving the surrounding Dallas, Fort Worth metro plex areas as well. Learn more...
|
