Reply to thread

Message: <blockquote data-quote="Core" data-source="post: 10759697" data-attributes="member: 263471">Ajax Tutorial Now first of all you need to understand what does it mean Ajax.Ajax mean simply Asynchronous JavaScript Technology and XML.which is a sophisticated method to save the network bandwidth and decrease the response time. it only updated the particular area that you really want instead updating the whole page. which will cause to reload the page and then again repeat the request from the server.so in that context. it wastes the bandwidth of both server and the client.to resolve that Ajax can be used.just think you saw a website which contains videos,images,and lot of HTML contents. middle of that you need to type a message. example youtube.meanwhile watching a youtube video you also need to make a comment.but if it's just JavaScript/Server side script ,you won't see your comment until you refresh the page. but with Ajax you don't need to refresh the page, it will just update the page's that part without reloading the entire page. that's really useful cause it wont even your video streaming.Now take one by onecan you see this part<textarea cols='50' rows='10' id='t_area' name='t_area'></textarea> <input type='button' value='Click to Update' onclick="proceed(' http://www.w3schools.com/Ajax/test_xmlhttp.txt')" />when you press on this button. it will trig out the event . so that event is proceed. meanwhile it passes an parameter.that parameter is simply a string. which contains the path to the filenow move ahead and see the JavaScript Partso this is the JavaScript Partfunction proceed(url){}whatever you insert regarding this scenario should go within this proceed function. actually there are two things in programming world that you can categorize codes. first functions, procedures.but in JavaScript you only see functions though it's irrelevant to return any value. in function it returns a value but in procedures it won't just void 0;you can see that in JAva/C++/C# etc.. language but since Javascript is a lightweight it doesn't.now step to step back to the codes(1)I used this part to make sure the event trig out the functiondocument.getElementById('t_area').value = "updated";if it works surely you can see at least the "updated" string in the textbox(2)Now second partif(window.XMLHttpRequest){xml_object = new XMLHttpRequest();}else{xml_object = new ActiveXObject('Microsoft.XMLHTTP');}actually you need to remember IE uses different object for Ajax while Chrome/firefox/opera in same boat.window.XMLHttpRequest is used to make sure this browser supports toXMLHttpRequest or not. if it doesn't simply that command will be null.null means it won't execute the if clause instead move onto the else part.ActiveXObject method is used by the IE and it's Microsoft.XMLHTTP parameter handles the Ajax part.it will create an object from that class and pass made object into the xml_object variable. so the data type of that variable is simply Object.remember Object is the thing that you made from a class.so you can access to all proprieties/methods of that class through that object. once you used applied null at end. so it will clean up the memory.in Java it does automatically. in C++ doesn't.Thirdxml_object.open("GET",url,true);xml_object.send(null);xml_object.onreadystatechange = on_ready;so as I said early. now you made an object from the XMLHttpRequest Class and ready to move with Ajax.the first of all you need to open up the connection between the server and the client. for that you can use .open method..open method contains. three parameters.1 => the pass method ether GET/POST2 => The path to the file that we handle. if it's XML then simply the XML file's path with its extension.3 => Asynchronous or not. I will explain what's that mean in next part. cause u won't understand unless..send()send method can be used to send the request. so now client sends a request to the server.xml_object.onreadystatechange = on_ready;onreadystatechange this method simply does. activate the function got it. at each time whenever there is any changes of the request.will explain in next part.Fourthnow the onreadystatechange method trigs out the function named on_ready whenever there is any changed with the request state.if (xml_object.readyState == 0) {document.getElementById('state_change' ).innerHTML = 'not Initialized';}as usually we use the xml_object object and there is a method called readyState which can be used to determine the request state0 -> means The Request is NOT Initialized1 -> Means The Request has been set up and ready to send to the server2 -> The Request passes over to the Server3- > The request is being processed by the server4- > everything is done and the response got back.those are the states of the request. use the appropriate one depend on the context. but you need to remember u should use 4th one for final resultto update a progress bar or something. I guess the 2th is more suitable.and the 3th one is suitable if you are waiting for the reply.xml_object.responseText; can be used to get the response in Plain Text format. keep that in your mind use another thing if that's XMLNow I guess I have few more things to explainxml_object.open("GET",url,true);which is the third parameter of the .open() methodif you use TRUE which means Asynchronous then that means everything handle Asynchronously. codes don't wait until it gets the reply it will proceed from wherever it stopped. but if u use false. means synchronous then it will wait until it gets the reply. which means it will proceed after the request state change to 4. this is really useful if you want to stop the code and wait until it gets the reply unless keep it as true.function on_ready(){if (xml_object.readyState == 0) {document.getElementById('state_change' ).innerHTML = 'not Initialized';}else if (xml_object.readyState == 1) {document.getElementById( 'state_change' ).innerHTML = 'has been set up';}else if (xml_object.readyState == 2) {document.getElementById( 'state_change' ).innerHTML = 'has been sent to the server';}else if (xml_object.readyState == 3) {document.getElementById('state_change' ).innerHTML = 'is in process';}else if (xml_object.readyState == 4) {document.getElementById('state_change' ).innerHTML = 'done';document.getElementById('t_area').value = xml_object.responseText;}}[code]<html><head><script type='text/javascript'></script><noscript>Your browser doesn't support to Javascript or you may need to enable that</noscript> <head><body><textarea cols='50' rows='10' id='t_area' name='t_area'></textarea> <input type='button' value='Click to Update' onclick="proceed(' http://www.w3schools.com/Ajax/test_xmlhttp.txt')" /> Current State : </body></html>[/code]<img src="/styles/default/xenforo/smilies/default/angry.gif"  class="smilie" loading="lazy" alt=":angry:" title="Angry    :angry:" data-shortname=":angry:" /> By CORE /2011/05/20DON'T STEAL MY ARTICLE/CODES WITHOUT  MY PERMISSION.THIS IS 100% PLAGIARISM FREE THAT MEANS MY OWN WORK.I WROTE THIS ARTICLE AROUND MAY AND PUT IN HERE IN THIS MONTH (JULY)<img src="http://www.elakiri.com/forum/images/icons/sq/11.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></blockquote>

Verification: Dahaya deken beduwama keeyada?

Top Bottom