Old 28-01-2008, 03:47 PM
  post #1
mmmaung
အရြယ္ေရာက္သူ
 
အသင္း၀င္ေန႔စြဲ: Nov 2007
တည္ေနရာ: korea
ေရးသားခ်က္မ်ား: 168
ေက်းဇူးတင္စကား: 0
ပို႔စ္ 28 ခုအတြက္ 73 ဦးမွ ေက်းဇူးတင္ေၾကာင္းေျပာပါသည္။
mmmaung is on a distinguished road
Perform a simple server side request and update two elements in the current HTML

Perform a simple server side request and update two elements in the current HTML
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.

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="MyDiv1"> and <DIV NAME="MyDiv" ID="MyDiv2"> that we can locate wherever we like.

In the previous example we only had the UpdateDiv function. Here we need two functions to do two different updates. In this example we have UpdateDiv1 and UpdateDiv2

The second function we need to duplicate is the GetResponse which now shows as GetResponse1 and GetResponse2.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML> 
<HEAD> 
<TITLE></TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
</HEAD> 
<BODY onLoad="update();"> 
    
    <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 GetResponse1( ){    
            if (objXMLHttp.GetReadyState()==4) {                        
                // save response in inner html of result object    
                var objMyDiv = document.getElementById( 'MyDiv1' ); 
                objMyDiv.innerHTML = objXMLHttp.GetResponseText( );      
            } 
        }  

        //This function is called when we get the data back from the server.        
        function GetResponse2( ){    
            if (objXMLHttp.GetReadyState()==4) {                        
                // save response in inner html of result object    
                var objMyDiv = document.getElementById( 'MyDiv2' ); 
                objMyDiv.innerHTML = objXMLHttp.GetResponseText( );      
            } 
        }  

        function UpdateDiv1( FieldValue ){ 
            if( FieldValue !='' ){ 
                var objMyDiv = document.getElementById( 'MyDiv1' ); 
                objMyDiv.innerHTML = 'Please wait, getting info from server for Div 1...'; 
                objXMLHttp.GetUrlContent( 'http://www.weberdev.com/get_example-' + FieldValue + '.html' , GetResponse1 );        
            } 
            return; 
         }    
        function UpdateDiv2( FieldValue ){ 
            if( FieldValue !='' ){ 
                var objMyDiv = document.getElementById( 'MyDiv2' ); 
                objMyDiv.innerHTML = 'Please wait, getting info from server for Div 2...'; 
                objXMLHttp.GetUrlContent( 'http://www.weberdev.com/get_example-' + FieldValue + '.html' , GetResponse2 );        
            } 
            return; 
         }    
    </SCRIPT> 

    <FORM NAME="MyForm" ACTION="MyFile.html" METHOD="POST"> 
    <SELECT NAME="Test1" onChange="UpdateDiv1(this.value);"> 
    <OPTION VALUE="4509">4509</OPTION> 
    <OPTION VALUE="4506">4506</OPTION> 
    <OPTION VALUE="4505">4505</OPTION> 
    </SELECT> 
    <BR> 
    <SELECT NAME="Test2" onChange="UpdateDiv2(this.value);"> 
    <OPTION VALUE="4500">4500</OPTION> 
    <OPTION VALUE="4501">4501</OPTION> 
    <OPTION VALUE="4502">4502</OPTION> 
    </SELECT> 
    <INPUT  TYPE="SUBMIT" NAME="SUBMIT" VALUE="Submit"> 
    </FORM> 

    <DIV ID="MyDiv1" STYLE="top:10px;right:0px;position:relative;border-width:1px;border-color:#000000;border-style:solid;width:500px;height:600px;overflow:hidden;">DIV 1</DIV> 
    <BR><BR> 
    <DIV ID="MyDiv2" STYLE="top:-630px;right:-550px;position:relative;border-width:1px;border-color:#000000;border-style:solid;width:500px;height:600px;overflow:hidden;">DIV 2</DIV> 
</BODY> 
</HTML>

ဘ၀ကို ေပါ့ေပါ့ေလး နဲ႕ ပါးပါးေလး ၿဖတ္ခ်င္တယ္:23::23::11:
mmmaung is offline   Reply With Quote
Reply

တန္ဆာပလာမ်ား
ေဖာ္ျပမႈပံုစံ

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

ဖိုရမ္ေတြ ေက်ာ္ေရာက္ခ်င္ရင္ !


ဖိုရမ္၏ ပင္မအခ်ိန္သည္ ဂရင္းနစ္စံေတာ္ခ်ိန္ +6.5 ျဖစ္သည္။ေဒသစံေတာ္ခ်ိန္ 08:16 PM
Inactive Reminders By Icora Web Design