|
|
|
This is a simple usage example of Ajax that shows how to update a part of the HTML page without refreshing the page. This is a great GUI advantage which makes the application look more like a windows application rather then a web based client side application.
For an exmaple that updates two elements on the page have a look at : http://www.weberdev.com/get_example-4511.html.
The SELECT field triggers a call to UpdateDiv which does all of the work. UpdateDiv gets the parameter from the SELECT and passes it on so we can act upon it.
UpdateDiv Gets two parameters :
1. A URL for a Web Service that returns any kind of output based on the parameter we passed.
2. A name of a function that will be triggered when the data comes back. This function usually takes HTML output from the remote URL and populates the DIV we prepared with the HTML using innerHTML.
The data will be put in <DIV NAME="MyDiv" ID="MyDiv"> that we can locate wherever we like.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML DIR="RTL">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<SCRIPT LANGUAGE="JavaScript" type="text/JavaScript">
function XmlHttp( ){
this.CreateXmlHttpObject = CreateXmlHttpObject;
this.GetUrlContent = GetUrlContent;
this.GetResponseText = GetResponseText;
this.GetReadyState = GetReadyState;
this.HttpMethod = 'GET'; // default
this.objXmlHttp = this.CreateXmlHttpObject();
}
// Initialize XMLHttpObject
function CreateXmlHttpObject(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
var objXMLHttp = new XmlHttp();
function GetReadyState( ){
return this.objXmlHttp.readyState;
}
function GetResponseText( ){
return this.objXmlHttp.responseText;
}
// Function performs Get request to absolute url(strUrl)
// using XmlHttp object (asynchroni)
// Response returned into objResult element using innerHTML.
// When state of XmlHttp object is changed - objOnReadyStateChangeFunction called
function GetUrlContent( strUrl, objOnReadyStateChangeFunction ){
this.objXmlHttp.open(this.HttpMethod, strUrl, true);
this.objXmlHttp.setRequestHeader('Content-Type', 'text/xml; charset=UTF-8');
if(objOnReadyStateChangeFunction){
this.objXmlHttp.onreadystatechange=function(){
objOnReadyStateChangeFunction();
}
}
this.objXmlHttp.send(null)
}
//This function is called when we get the data back from the server.
function GetResponse( ){
if (objXMLHttp.GetReadyState()==4) {
// save response in inner html of result object
var objMyDiv = document.getElementById( 'MyDiv' );
objMyDiv.innerHTML = objXMLHttp.GetResponseText( );
}
}
function UpdateDiv( FieldValue ){
if( FieldValue !='' ){
var objMyDiv = document.getElementById( 'MyDiv' );
objMyDiv.innerHTML = 'Please wait, getting info from server...';
objXMLHttp.GetUrlContent( 'http://www.mysite.com/Info_to_show.php?Parameter=' + FieldValue, GetResponse );
}
return;
}
</SCRIPT>
<FORM NAME="MyForm" ACTION="MyFile.html" METHOD="POST">
<SELECT NAME="Test" onChange="UpdateDiv(this.value);">
<OPTION VALUE="0">Option 0</OPTION>
<OPTION VALUE="1">Option 1</OPTION>
<OPTION VALUE="2">Option 2</OPTION>
</SELECT>
<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="Submit">
</FORM>
<DIV NAME="MyDiv" ID="MyDiv"></DIV></TD></TR>
</BODY>
</HTML> | |
|
|
| Ajax - Perform a simple server side request and update two elements in the current HTML page.
Categories : AJAX, Java Script, Beginner Guides | | | Show hide table rows to make dynamic forms
Categories : Beginner Guides, Java Script, Form Processing, HTTP | | | Get your browser details using javascript
Categories : Java Script, Beginner Guides, Browsers | | | Store, retrieve and delete cookies using JavaScript.
Categories : Java Script, Cookies, Beginner Guides, Cookies | | | Activate an Ajax.Autocompleter with an onLoad Command
Categories : Java Script, AJAX | | | Form Processing : with alert Highlight field name which is not filled by user
Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design | | | Validating a URL with JavaScript RegExp
Categories : Java Script, Data Validation, Beginner Guides | | | Newbie Notes #9 - Hyperlinking a post
Categories : PHP, Java Script, HTML and PHP, Beginner Guides | | | ezRemoteScripter - A little remote scripting (AJAX) helper
Categories : PHP, Java Script, AJAX | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | Easy alert box pop-up function
Categories : PHP, Java Script, Beginner Guides | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | The Ajax Tree view class fetches data from a db for the requested parent category id. The data is then stored in an array and converted into JSON (Javascript Object Notation) format. This format is then used by JavaScript for populating tree view.
Categories : PHP, PHP Classes, Java Script, AJAX, Databases | | | AJAX Data Grid System using php and mysql. A complete login system with the ability to display data in a grid using ajax. Add , update and delete the records without reloading the page.
Categories : PHP, AJAX, Databases, MySQL, Java Script | | | Run a function once per session.
Categories : Beginner Guides, Java Script, Cookies | |
| | | | jefferis peterson wrote :1681
where are your closing head tag and opening body tag?
| |
|
|
