AJAX Basic
AJAX uses JavaScript language through HTTP protocol to send and receive
data. Let's see an example:
<script type="text/javascript" language="javascript">
Create a function to request HTTP:
function requestHttp(url,posTag){
var httpRequest;
"url" is a variable for file name, "posTag" is another
variable for a tag id. For example, "<p id="message">.
Let's check browser type. If the browser is Firefox, Sfari ...:
if(window.XMLHttpRequest){// Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if(httpRequest.overrideMimeType){
httpRequest.overrideMimeType('text/xml');
}
Else, if using Microsoft IE:
}else if(window.ActiveXObject){ // IE
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
Get file (see the following function):
getFile(httpRequest,url,posTag);
}
The next step, we send a request to the server for getting data:
function getFile(httpRequest,url,posTag){
if the above http request is failed, then show an alert, and return false;
if(!httpRequest){
alert('Error - Cannot create an XMLHTTP instance');
return false;
}
Else, send a request, and display contents received from server:
httpRequest.onreadystatechange = function(){
showContents(httpRequest,posTag);//function display contents
}
httpRequest.open('GET', url, true);
httpRequest.send('');
}
The third function below is used for showing contents
function showContents(httpRequest,posTag){
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
alert(httpRequest.responseText);
}else{
alert('Error');
}
}
}
End javascript scripts:
</script>
To call the functions:
<span
style="cursor: pointer; text-decoration: underline"
onclick="requestHttp('file1.txt','message')">
Show contents
</span>
Please note, you need to create a file named "file1.txt" before
calling the functions. You can simplly use a text editor to create the
file and enter any contents, like "Hello, Free AJAX course from itechcollege.com".
When you click the link "Show contents", you will see an alert
window pops up, with the contents you entered in the file "file1.txt".
The below is the full source code of the above example:
<html><head>
<script type="text/javascript" language="javascript">
function requestHttp(url,posTag){
var httpRequest;
if(window.XMLHttpRequest){// Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if(httpRequest.overrideMimeType){
httpRequest.overrideMimeType('text/xml');
}
}else if(window.ActiveXObject){ // IE
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
getFile(httpRequest,url,posTag);
}
function getFile(httpRequest,url,posTag){
if(!httpRequest){
alert('Error - Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function(){
showContents(httpRequest,posTag);
}
httpRequest.open('GET', url, true);
httpRequest.send('');
}
function showContents(httpRequest,posTag){
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
var msg=httpRequest.responseText;
alert(msg);
}else{
alert('Error');
}
}
}
</script>
</head><body>
<span
style="cursor: pointer; text-decoration: underline"
onclick="requestHttp('file1.txt','message')">
Show contents
</span>
</body></html>
|
Earn your 
Go to