<?xml version="1.0" encoding="UTF-16"?>
<rss version="2.0"><channel><title>SoftXML | AJAX Tutorials</title><link>http://www.softxml.com/rss/tutorials/ajax.xml</link><description>Tutorials</description><pubDate>Sun, 11 Jan 2009 14:27:49 EST</pubDate><language>en-us</language><image><title>SoftXML | AJAX Tutorials</title><url>http://www.softxml.com/images/rsscategory.gif</url><link>http://www.softxml.com/rss/tutorials/ajax.xml</link><width>80</width><height>73</height></image><item><title>AJAX:Getting Started</title><link>http://www.softxml.com/LearnTutorial.asp?id=46184132387&amp;f=ajax&amp;fo=tutorials</link><description>One of the newest things to take the web development industry by storm is the 
		use of &lt;A class="kLink" oncontextmenu="return false;" id="KonaLink0" 
			style="POSITION: static; TEXT-DECORATION: underline! important" 
			 href="http://www.ajaxfreaks.com/tutorials/1/0.php#"
			target="_top"&gt;&lt;FONT style="FONT-WEIGHT: 400; FONT-SIZE: 9.6pt; COLOR: blue! important; FONT-FAMILY: Verdana; POSITION: static"
				color="blue"&gt;&lt;SPAN class="kLink" style="FONT-WEIGHT: 400; FONT-SIZE: 9.6pt; COLOR: blue! important; FONT-FAMILY: Verdana; POSITION: relative"&gt;
					AJAX&lt;/SPAN&gt;&lt;/FONT&gt;&lt;/A&gt; (Asynchronous Javascript And XML), which 
		uses the XMLHttpRequest object. The beauty of this new &lt;A class="kLink" oncontextmenu="return false;" id="KonaLink1" 
			style="POSITION: static; TEXT-DECORATION: underline! important" 
			href="http://www.ajaxfreaks.com/tutorials/1/0.php#" target="_top"&gt;&lt;FONT style="FONT-WEIGHT: 400; FONT-SIZE: 9.6pt; COLOR: blue! important; FONT-FAMILY: Verdana; POSITION: static"
				color="blue"&gt;&lt;SPAN class="kLink" style="FONT-WEIGHT: 400; FONT-SIZE: 9.6pt; COLOR: blue! important; FONT-FAMILY: Verdana; POSITION: relative"&gt;
					technology&lt;/SPAN&gt;&lt;/FONT&gt;&lt;/A&gt; is it allows designers and developers 
		to add interactive or live parts to their &lt;A class="kLink" oncontextmenu="return false;" id="KonaLink2" 
			style="POSITION: static; TEXT-DECORATION: underline! important" 
			href="http://www.ajaxfreaks.com/tutorials/1/0.php#" target="_top"&gt;&lt;FONT style="FONT-WEIGHT: 400; FONT-SIZE: 9.6pt; COLOR: blue! important; FONT-FAMILY: Verdana; POSITION: static"
				color="blue"&gt;&lt;SPAN class="kLink" style="FONT-WEIGHT: 400; FONT-SIZE: 9.6pt; COLOR: blue! important; FONT-FAMILY: Verdana; POSITION: relative"&gt;
					website&lt;/SPAN&gt;&lt;/FONT&gt;&lt;/A&gt; without have to reload the page. This can 
		include live information such as stock market values (the FTSE 100 is a great 
		example as its value can change as quickly as every minute) and the number of 
		posts on a forum. All these values could change on a page without having to 
		refresh to page every minute.&lt;BR&gt;
		&lt;BR&gt;
		This tutorial will hopefully give you some idea on how to use the 
		XMLHttpRequest object in your website apps to improve user interactivity and 
		the general functionality of your website. It is advised that you have some 
		background knowledge of JavaScript, and for this example, PHP (or some other &lt;A class="kLink" oncontextmenu="return false;" id="KonaLink3" 
			style="POSITION: static; TEXT-DECORATION: underline! important" href="http://www.ajaxfreaks.com/tutorials/1/0.php#"
			target="_top"&gt;&lt;FONT style="FONT-WEIGHT: 400; FONT-SIZE: 9.6pt; COLOR: blue! important; FONT-FAMILY: Verdana; POSITION: static"
				color="blue"&gt;&lt;SPAN class="kLink" style="FONT-WEIGHT: 400; FONT-SIZE: 9.6pt; COLOR: blue! important; FONT-FAMILY: Verdana; POSITION: relative"&gt;
					server&lt;/SPAN&gt;&lt;/FONT&gt;&lt;/A&gt;-side scripting language such as Perl or 
		ASP).&lt;BR&gt;
		&lt;BR&gt;
		Below is the entire code of the script, so you can see what it will look like 
		at the end. I will go through &lt;A 
			href="http://www.phpfreaks.com/phpmanual/page/function.each.html" target="_blank" sysOa="0"
			PyE_E="0"&gt;each&lt;/A&gt; part in turn through the tutorial:&lt;BR&gt;
		&lt;BR&gt;
		&lt;DIV class="highlightPHPHeader" sysOa="0" PyE_E="0"&gt;Code Example: &lt;A 
				 href="javascript:void(0);" sysOa="0" PyE_E="0"&gt;(!)&lt;/A&gt;&lt;/DIV&gt;
		&lt;DIV class="highlightPHP"&gt;&lt;CODE&gt;&lt;SPAN style="COLOR: #000000"&gt;&lt;SPAN style="COLOR: #0000bb"&gt;&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700" sysOa="0" PyE_E="0"&gt;function
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb" sysOa="0" PyE_E="0"&gt;createRequestObject&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700" sysOa="3" PyE_E="0"&gt;() 
						{
						&lt;BR&gt;
						&lt;BR&gt;
						var &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb" sysOa="0" PyE_E="0"&gt;req&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700" sysOa="3" PyE_E="0"&gt;;
						&lt;BR&gt;
						&lt;BR&gt;
						if(&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb" sysOa="0" PyE_E="0"&gt;window&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb" sysOa="0" PyE_E="0"&gt;XMLHttpRequest&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700" sysOa="0" PyE_E="0"&gt;){
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #ff8000" sysOa="0" PyE_E="0"&gt;// &lt;A class="kLink" oncontextmenu="return false;" id="KonaLink4" 
							style="POSITION: static; TEXT-DECORATION: underline! important" 
							href="http://www.ajaxfreaks.com/tutorials/1/0.php#" target="_top"&gt;&lt;FONT style="FONT-WEIGHT: 400; COLOR: blue! important; FONT-FAMILY: courier, arial, helvetica; POSITION: static"
								color="blue"&gt;&lt;SPAN class="kLink" style="FONT-WEIGHT: 400; COLOR: blue! important; FONT-FAMILY: courier, arial, helvetica; POSITION: relative"&gt;
									Firefox&lt;/SPAN&gt;&lt;/FONT&gt;&lt;/A&gt;, Safari, Opera...
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb" sysOa="0" PyE_E="0"&gt;req &lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700" sysOa="0" PyE_E="0"&gt;
						= new &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb" sysOa="0" PyE_E="0"&gt;XMLHttpRequest&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700" sysOa="0" PyE_E="0"&gt;();
						&lt;BR&gt;
						} else if(&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;window&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;ActiveXObject&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;) 
						{
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #ff8000"&gt;// Internet Explorer 5+
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;req &lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;= new &lt;/SPAN&gt;
					&lt;SPAN style="COLOR: #0000bb"&gt;ActiveXObject&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;(&lt;/SPAN&gt;&lt;SPAN style="COLOR: #dd0000"&gt;"Microsoft.XMLHTTP"&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;);
						&lt;BR&gt;
						} else {
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #ff8000"&gt;// There is an error creating the object,
						&lt;BR&gt;
						// just as an old browser is being used.
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;alert&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;(&lt;/SPAN&gt;&lt;SPAN style="COLOR: #dd0000"&gt;'Problem 
						creating the XMLHttpRequest object'&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;);
						&lt;BR&gt;
						}
						&lt;BR&gt;
						&lt;BR&gt;
						return &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;req&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;;
						&lt;BR&gt;
						&lt;BR&gt;
						}
						&lt;BR&gt;
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #ff8000"&gt;// Make the XMLHttpRequest object
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;var &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;http &lt;/SPAN&gt;
					&lt;SPAN style="COLOR: #007700"&gt;= &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;createRequestObject&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;();
						&lt;BR&gt;
						&lt;BR&gt;
						function &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;sendRequest&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;(&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;act&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;) 
						{
						&lt;BR&gt;
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #ff8000"&gt;// Open PHP script for requests
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;http&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;open&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;(&lt;/SPAN&gt;&lt;SPAN style="COLOR: #dd0000"&gt;'get'&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;,
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #dd0000"&gt;'myphpscript.php?act='&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;+&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;act&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;);
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;http&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;onreadystatechange
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;= &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;handleResponse&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;;
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;http&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;send&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;(&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;null&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;);
						&lt;BR&gt;
						&lt;BR&gt;
						}
						&lt;BR&gt;
						&lt;BR&gt;
						function &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;handleResponse&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;() 
						{
						&lt;BR&gt;
						&lt;BR&gt;
						if(&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;http&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;readyState
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;== &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;4 &lt;/SPAN&gt;
					&lt;SPAN style="COLOR: #007700"&gt;&amp;amp;&amp;amp; &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;http&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;status
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;== &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;200&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;){
						&lt;BR&gt;
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #ff8000"&gt;// Text returned FROM the PHP script
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;var &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;response
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;= &lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;http&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;.&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;responseText&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;;
						&lt;BR&gt;
						&lt;BR&gt;
						if(&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;response&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;) 
						{
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #ff8000"&gt;// UPDATE ajaxTest content
						&lt;BR&gt;
					&lt;/SPAN&gt;&lt;SPAN style="COLOR: #0000bb"&gt;document&lt;/SPAN&gt;&lt;SPAN style="COLOR: #007700"&gt;.</description><guid>http://www.softxml.com/LearnTutorial.asp?id=46184132387&amp;f=ajax&amp;fo=tutorials</guid><category>ajax</category></item></channel></rss>
