As the first step in the decommissioning of sasCommunity.org the site has been converted to read-only mode.


Here are some tips for How to share your SAS knowledge with your professional network.


Difference between revisions of "AJAX and SAS: Smooth Web Applications"

From sasCommunity
Jump to: navigation, search
Line 1: Line 1:
<div class="Section1">
+
Paper 201-2007
  
<span style="mso-bidi-font-size: 10.0pt"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Paper 201-2007</font></font></span>
+
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font>
 
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="12.0pt">AJAX and SAS</font></font><font color="black"><font face="&quot;Verdana&quot;,&quot;sans-serif&quot;"><font size="9.0pt">®: </font></font></font><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="12.0pt">Smooth Web Applications</font></font><font color="black"><font face="&quot;Verdana&quot;,&quot;sans-serif&quot;"></font></font><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font>
+
'''AJAX and SAS®: Smooth Web Applications'''
 +
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="12.0pt">Alan Churchill, Savian, Colorado Springs, CO</font></font>
+
'''Alan Churchill, Savian, Colorado Springs, CO'''
 +
 +
 +
== Abstract ==
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">ABSTRACT </font>
 
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">AJAX </font></font><font face="&quot;Arial&quot;,&quot;sans-serif&quot;">(Asynchronous Javascript and XML)</font><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> is an approach to designing websites that emphasizes ease of use for end users. Using one of the new AJAX frameworks simplifies the creation of an AJAX enabled website. Additionally, using web services as a backend provider for SAS, an AJAX site can be created that allows users to request SAS information from a server and display it on a web site in a seamless manner. Step by step instructions for creating a AJAX-enabled, web service backend system working with SAS are provided. </font></font>
+
AJAX (Asynchronous Javascript and XML) is an approach to designing websites that emphasizes ease of use for end users. Using one of the new AJAX frameworks simplifies the creation of an AJAX enabled website. Additionally, using web services as a backend provider for SAS, an AJAX site can be created that allows users to request SAS information from a server and display it on a web site in a seamless manner. Step by step instructions for creating a AJAX-enabled, web service backend system working with SAS are provided.  
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Introduction</font>
+
Introduction
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">AJAX is fast becoming the approach for developing web applications. Creating an AJAX website that exposes SAS can be done in a few short steps. While a ground-up AJAX site involves a lot of JavaScript code, this paper will demonstrate how to build an AJAX site using an AJAX framework in a few easy steps. Most of the actual work involved will be drag and drop inside of a WYSIWIG editor. </font>
+
  
<span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="10.0pt"><br style="mso-special-character: line-break; page-break-before: always" clear="all" /></font></font></span>
+
AJAX is fast becoming the approach for developing web applications. Creating an AJAX website that exposes SAS can be done in a few short steps. While a ground-up AJAX site involves a lot of JavaScript code, this paper will demonstrate how to build an AJAX site using an AJAX framework in a few easy steps. Most of the actual work involved will be drag and drop inside of a WYSIWIG editor.  
  
'''<span style="text-transform: uppercase"></span>'''
 
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">AJAX</font>
 
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">What is AJAX? AJAX is an approach to developing web sites and is not a specific technology. It encompasses a number of technical approaches but essentially it is a way to create web sites that do not involve as many round-trips from the client to the server. Also, while XML is in the AJAX name, AJAX can work with any form of data. The only requirement is that the AJAX engine can understand and interpret the data.</font></font></span>'''[#_ftn1 <span class="MsoFootnoteReference"><span style="mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference"><span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">[1]</font></font></span></span></span></font></font></span></span>]'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
AJAX
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">The term was originally discussed in context of how to make web applications run more seamlessly. As end users became more accustomed to the web, more interactivity was demanded. Soon, web application developmenthad become an effort in frustration for everyone involved from the developer to the end user. The end user would press a button in the browser, wait, and the entire screen would refresh or ‘blink’. The developer had a number of tricks that they could use to try and prevent a complete refresh but the developer had to write a lot of code and manage the transfer of information to and from the server. Also, the process was synchronous so nothing could happen until the transfer was complete.</font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
What is AJAX? AJAX is an approach to developing web sites and is not a specific technology. It encompasses a number of technical approaches but essentially it is a way to create web sites that do not involve as many round-trips from the client to the server. Also, while XML is in the AJAX name, AJAX can work with any form of data. The only requirement is that the AJAX engine can understand and interpret the data.[1]
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">In 2001, Microsoft snuck in a little known ActiveX object into IE5. Known as XmlHttpRequest object, this allowed a web page to use a middle component (XmlHttpRequest) to do the communication to and from the server. In this new model, the developer communicated with the local engine and that engine would handle all of the communication to the server. Moreover, this was an asynchronous process. This functionality was put in at the request of the Microsoft Outlook team who, at the time, were working on the Outlook Web Access (OWA) client. This was really the first AJAX use as it is popularly known now. With the introduction of Google Maps a few years later, the approach of what would become AJAX gained steam. In 2005, Jesse James Garrett of Adaptive Path described the approach and first used the term AJAX. The world suddenly caught on fire and AJAX became very popular.</font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
The term was originally discussed in context of how to make web applications run more seamlessly. As end users became more accustomed to the web, more interactivity was demanded. Soon, web application development  had become an effort in frustration for everyone involved from the developer to the end user. The end user would press a button in the browser, wait, and the entire screen would refresh or ‘blink’. The developer had a number of tricks that they could use to try and prevent a complete refresh but the developer had to write a lot of code and manage the transfer of information to and from the server. Also, the process was synchronous so nothing could happen until the transfer was complete. 
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">AJAX is built using JavaScript and HTML. AJAX, by itself, can be very complex to code as will be demonstrated. </font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
In 2001, Microsoft snuck in a little known ActiveX object into IE5. Known as XmlHttpRequest object, this allowed a web page to use a middle component (XmlHttpRequest) to do the communication to and from the server. In this new model, the developer communicated with the local engine and that engine would handle all of the communication to the server. Moreover, this was an asynchronous process. This functionality was put in at the request of the Microsoft Outlook team who, at the time, were working on the Outlook Web Access (OWA) client. This was really the first AJAX use as it is popularly known now. With the introduction of Google Maps a few years later, the approach of what would become AJAX gained steam. In 2005, Jesse James Garrett of Adaptive Path described the approach and first used the term AJAX. The world suddenly caught on fire and AJAX became very popular.
  
[#_ftn2 <span class="MsoFootnoteReference"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference"><span style="mso-bidi-font-size: 10.0pt; mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Times New Roman&quot;,&quot;serif&quot;"><font size="9.0pt">[2]</font></font></span></span></span></span>]
+
  
Figure <span style="mso-no-proof: yes">1</span>AJAX Diagram
+
AJAX is built using JavaScript and HTML. AJAX, by itself, can be very complex to code as will be demonstrated.
  
<span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="10.0pt"><br style="mso-special-character: line-break; page-break-before: always" clear="all" /></font></font></span>
+
  
'''<span style="text-transform: uppercase"></span>'''
+
[2]
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">approaches</font>
+
  
<span style="text-transform: none; font-weight: normal"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">AJAX will typically use one of two techniques: hidden iframes or XmlHttpRequest. A hidden iframe is used in a number of applications and was a default choice prior to the advent of XmlHttpRequest. Google Maps, for example, uses hidden iframes to achieve its look and feel. However, the use of iframes to achieve AJAX functionality should wane as the XmlHttpRequest approach becomes more popular and matures. For this reason (and others), this paper will focus on XmlHttpRequest. However, there are pros and cons to each approach. Readers are directed to the following website for more information:</font></font></span>
+
Figure 1  AJAX Diagram
  
[http://ajaxpatterns.org/XMLHttpRequest_Call <span style="text-transform: none; font-weight: normal"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">http://ajaxpatterns.org/XMLHttpRequest_Call</font></font></span>]<span style="text-transform: none; font-weight: normal"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>
+
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">READY, AIM, FIRE!</font>
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Let’s look behind the scenes at some sample AJAX code (partial code shown):</font></font></span>'''
 
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
 
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><div id="results"style="behavior:url(webservice.htc)"></div></font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><input type="image" style="behavior:url(webservice.htc);" onclick='main()' /></font></font></span>'''
+
approaches
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">function main()</font></font></span>'''
+
AJAX will typically use one of two techniques: hidden iframes or XmlHttpRequest. A hidden iframe is used in a number of applications and was a default choice prior to the advent of XmlHttpRequest. Google Maps, for example, uses hidden iframes to achieve its look and feel. However, the use of iframes to achieve AJAX functionality should wane as the XmlHttpRequest approach becomes more popular and matures. For this reason (and others), this paper will focus on XmlHttpRequest. However, there are pros and cons to each approach. Readers are directed to the following website for more information:
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">{</font></font></span>'''
+
http://ajaxpatterns.org/XMLHttpRequest_Call
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">results.useService("http://demo.savian.net/SasWebServicesDemo/Service.asmx?WSDL","ws1");</font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">iCallID = results.ws1.callService(handleResult,"GetSasDataSetAsHtmlNoMatter", library.value,dataset.value);</font></font></span>'''
+
'''READY, AIM, FIRE!'''
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">deliveryType = "web services" ;</font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">}</font></font></span>'''
+
Let’s look behind the scenes at some sample AJAX code (partial code shown):
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"></font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">function handleResult(res) </font></font></span>'''
+
<nowiki><div id="results" style="behavior:url(webservice.htc)"></div>
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">{</font></font></span>'''
+
<input type="image" style="behavior:url(webservice.htc);" onclick='main()' />
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">if (!res.error) </font></font></span>'''
+
function main()
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">{</font></font></span>'''
+
  {
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">wsReturn = res.value;</font></font></span>'''
+
      results.useService("http://demo.savian.net/SasWebServicesDemo/Service.asmx?WSDL","ws1");
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">xmlhttpPost() ;</font></font></span>'''
+
      iCallID = results.ws1.callService(handleResult,"GetSasDataSetAsHtmlNoMatter", library.value,dataset.value);
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">}</font></font></span>'''
+
      deliveryType = "web services" ;
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">else </font></font></span>'''
+
  }
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">{</font></font></span>'''
+
   
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">alert("Unsuccessful call. Error is " + res.errorDetail.string);</font></font></span>'''
+
  function handleResult(res)  
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">}</font></font></span>'''
+
  {
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">}</font></font></span>'''
+
                  if (!res.error)
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"></font></font></span>'''
+
                  {
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">function xmlhttpPost() </font></font></span>'''
+
                                wsReturn = res.value;
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">{</font></font></span>'''
+
                                xmlhttpPost() ;
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">var xmlHttpReq = false;</font></font></span>'''
+
                  }
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">var self = this;</font></font></span>'''
+
                  else
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");</font></font></span>'''
+
                  {
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">self.xmlHttpReq.open('POST', "http://demo.savian.net/Ajax/CallWebService.htm" , true);</font></font></span>'''
+
                    alert("Unsuccessful call. Error is " + res.errorDetail.string);
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');</font></font></span>'''
+
                  }
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">updatePage();</font></font></span>'''
+
}
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">}</font></font></span>'''
+
                               
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
function xmlhttpPost()
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">function updatePage()</font></font></span>'''
+
{
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">{</font></font></span>'''
+
      var xmlHttpReq = false;
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">document.getElementById("dt").innerHTML = "<p>Data retreived using " + deliveryType + " at " +Date() + "</p>";</font></font></span>'''
+
      var self = this;
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">document.getElementById("results").innerHTML = wsReturn ;</font></font></span>'''
+
      self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">}</font></font></span>'''
+
      self.xmlHttpReq.open('POST', "http://demo.savian.net/Ajax/CallWebService.htm" , true);
  
Code <span style="mso-no-proof: yes">1</span>Raw AJAX JavaScript and HTML
+
      self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">What is happening in this ajax code</font>
+
      updatePage();
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
}
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">1.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">A button is declared that, when pushed, fires the main() function. </font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">2.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">The main() function then tells the results div tag to call a web service., passing in 3 parameters: a program name of ‘GetSasDataSetAsHtmlNoMatter’, a library name found in a label, and a dataset name from a dropdown box</font></font></span>'''
+
function updatePage()
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">3.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">The web service (a C# program) sends the information to SAS which then executes the code. </font></font></span>'''
+
{
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">4.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">The web service gets the dataset from SAS and returns the data to the web page.</font></font></span>'''
+
    document.getElementById("dt").innerHTML = "<p>Data retreived using " + deliveryType + " at " +  Date() + "</p>";
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">5.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">The function handleResult Is run which gets the data </font></font></span>'''
+
    document.getElementById("results").innerHTML = wsReturn ;
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">6.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">xmlHttpPost function is then called which does the AJAX ‘magic’ and passes the data to the web page without refreshing the whole page.</font></font></span>'''
+
}</nowiki>
 +
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">7.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Finally, the updatePage function is called which locates the dt div tag and writes that data was retrieved using “web services” delivery type and also updates the results div tag with the SASdata.</font></font></span>'''
+
Code 1  Raw AJAX JavaScript and HTML
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">The above isn’t even a fraction of the code needed to do AJAX cross-platform and robustly. It gets very complex, very quickly. Every browser has slightly different calls to the XmlHttp request object so a true cross-browser solution has to account for all of those variants.</font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">I hear the collective groan…“Uggghhhh! I don’t want to have to code that for every page. Where’s the simplicity of my SAS put statements!?!?”</font></font></span>'''
+
What is happening in this ajax code
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
<span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="10.0pt"><br style="mso-special-character: line-break; page-break-before: always" clear="all" /></font></font></span>
+
1.    A button is declared that, when pushed, fires the main() function.  
  
'''<span style="mso-bidi-font-size: 10.0pt; text-transform: uppercase"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
2.     The main() function then tells the results div tag to call a web service., passing in 3 parameters: a program name of ‘GetSasDataSetAsHtmlNoMatter’, a library name found in a label, and a dataset name from a dropdown box
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Enter the ajax toolkits</font>
+
3.    The web service (a C# program) sends the information to SAS which then executes the code.
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
4.    The web service gets the dataset from SAS and returns the data to the web page.
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">To simplify working with AJAX, a number of people have created AJAX toolkits to hide most of the complexity. ASP.NET AJAX is one such kit newly released by Microsoft and is what is used in all of the remaining examples.</font></font></span>'''
+
5.     The function handleResult Is run which gets the data
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
6.    xmlHttpPost function is then called which does the AJAX ‘magic’ and passes the data to the web page without refreshing the whole page.
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Here are some equivalent steps to do this in ASP.NET AJAX:</font></font></span>'''
+
7.     Finally, the updatePage function is called which locates the dt div tag and writes that data was retrieved using “web services” delivery type and also updates the results div tag with the SAS  data.
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">1.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Create a Script Manager</font></font></span>'''
+
The above isn’t even a fraction of the code needed to do AJAX cross-platform and robustly. It gets very complex, very quickly. Every browser has slightly different calls to the XmlHttp request object so a true cross-browser solution has to account for all of those variants.
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"><</font><font color="maroon">asp</font><font color="blue"><nowiki>:</nowiki></font><font color="maroon">ScriptManager</font> <font color="red">ID</font><font color="blue"><nowiki>="ScriptManager1"</nowiki></font> <font color="red">runat</font><font color="blue"><nowiki>="server" </nowiki></font><font color="red">EnablePartialRendering</font><font color="blue"><nowiki>="true"</nowiki></font> <font color="blue">/></font></font></font></span>
+
I hear the collective groan…“Uggghhhh! I don’t want to have to code that for every page. Where’s the simplicity of my SAS put statements!?!?”
  
<span style="mso-no-proof: yes"><font color="blue"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></font></span>
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">2.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Create a button</font></font></span>'''
+
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
 
  
<span style="mso-no-proof: yes"><font color="blue"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><</font></font></font></span><span style="mso-no-proof: yes"><font color="maroon"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">asp</font></font></font></span><span style="mso-no-proof: yes"><font color="blue"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><nowiki>:</nowiki></font></font></font></span><span style="mso-no-proof: yes"><font color="maroon"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Button</font></font></font></span><span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> <font color="red">ID</font><font color="blue"><nowiki>="btnSubmit"</nowiki></font> <font color="red">runat</font><font color="blue"><nowiki>="server"</nowiki></font> <font color="red">OnClick</font><font color="blue"><nowiki>="btnSubmit_Click"</nowiki></font> <font color="red">Text</font><font color="blue"><nowiki>="Submit"</nowiki></font><font color="blue">/></</font><font color="maroon">td</font><font color="blue">></font></font></font></span>
 
  
<span style="mso-no-proof: yes"><font color="blue"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></font></span>
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">3.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Create an update panel with a datagrid control:</font></font></span>'''
 
  
<span style="mso-no-proof: yes"><font color="blue"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></font></span>
 
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"><</font><font color="maroon">asp</font><font color="blue"><nowiki>:</nowiki></font><font color="maroon">UpdatePanel</font> <font color="red">ID</font><font color="blue"><nowiki>="updPanel"</nowiki></font> <font color="red">runat</font><font color="blue"><nowiki>="server"></nowiki></font></font></font></span>
+
'''Enter the ajax toolkits'''
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"><</font><font color="maroon">Triggers</font><font color="blue">></font></font></font></span>
 
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"><</font><font color="maroon">asp</font><font color="blue"><nowiki>:</nowiki></font><font color="maroon">AsyncPostBackTrigger</font> <font color="red">ControlId</font><font color="blue"><nowiki>="btnSubmit"</nowiki></font> <font color="red">EventName</font><font color="blue"><nowiki>="Click"/></nowiki></font></font></font></span>
 
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"></</font><font color="maroon">Triggers</font><font color="blue">></font></font></font></span>
+
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"><</font><font color="maroon">ContentTemplate</font><font color="blue">></font></font></font></span>
+
To simplify working with AJAX, a number of people have created AJAX toolkits to hide most of the complexity. ASP.NET AJAX is one such kit newly released by Microsoft and is what is used in all of the remaining examples.
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"><</font><font color="maroon">asp</font><font color="blue"><nowiki>:</nowiki></font><font color="maroon">Panel</font> <font color="red">ID</font><font color="blue"><nowiki>="SasData"</nowiki></font> <font color="red">runat</font><font color="blue"><nowiki>="server"></nowiki></font></font></font></span>
+
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"><</font><font color="maroon">asp</font><font color="blue"><nowiki>:</nowiki></font><font color="maroon">DataGrid</font> <font color="red">ID</font><font color="blue"><nowiki>="SasGrid"</nowiki></font> <font color="red">runat</font><font color="blue"><nowiki>="server"</nowiki></font>''<font color="red">…style info…</font>''<font color="blue">/></font></font></font></span>
+
Here are some equivalent steps to do this in ASP.NET AJAX:
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"></</font><font color="maroon">asp</font><font color="blue"><nowiki>:</nowiki></font><font color="maroon">DataGrid</font><font color="blue">></font></font></font></span>
+
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"></</font><font color="maroon">asp</font><font color="blue"><nowiki>:</nowiki></font><font color="maroon">Panel</font><font color="blue">></font></font></font></span>
+
1.     Create a Script Manager
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"></</font><font color="maroon">ContentTemplate</font><font color="blue">></font></font></font></span>
+
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue"></</font><font color="maroon">asp</font><font color="blue"><nowiki>:</nowiki></font><font color="maroon">UpdatePanel</font><font color="blue">></font></font></font></span>
+
<nowiki>     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /></nowiki>
 +
  
<span style="mso-no-proof: yes"><font color="blue"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></font></span>
+
2.    Create a button
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>
+
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">That is mostly it. There is some ‘code behind’ [#_ftn3 <span class="MsoFootnoteReference"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference"><span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA; mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">[3]</font></font></span></span></span></span>] that is shown below but the above is a vast simplification from the JavaScript version.</font></font></span>
+
<nowiki><asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" /></td></nowiki>
 +
  
<span style="mso-no-proof: yes"><font color="blue"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></font></span>
+
3.    Create an update panel with a datagrid control:
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Here is what is happening in the ASP.NET tags:</font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
<nowiki>      <asp:UpdatePanel ID="updPanel" runat="server">
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">1.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">The script manager handles the communication to the XmlHttpEngines</font></font></span>'''
+
            <Triggers>
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">2.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">A button called btnSubmit is created. Inside of the UpdatePanel is a trigger that is fired when the btnSubmit is clicked.</font></font></span>'''
+
                <asp:AsyncPostBackTrigger ControlId="btnSubmit" EventName="Click"/>
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">3.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">An UpdatePanel can have any valid control or HTML inside of it. The UpdatePanel handles all of the plumbing needed to make the AJAX side work.</font></font></span>'''
+
            </Triggers>
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
            <ContentTemplate>
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
                <asp:Panel ID="SasData" runat="server">
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Here is the code behind for the page:</font></font></span>'''
+
                    <asp:DataGrid ID="SasGrid" runat="server"…style info…/>
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
                    </asp:DataGrid>
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="blue">protected</font> <font color="blue">void</font> btnSubmit_Click(<font color="blue">object</font> sender, <font color="teal">EventArgs</font> e)</font></font></span>
+
                </asp:Panel>
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">{</font></font></span>
+
            </ContentTemplate>
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Demo.<font color="teal">Service</font> svc = <font color="blue">new</font> Demo.<font color="teal">Service</font>();</font></font></span>
+
        </asp:UpdatePanel></nowiki>  
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="teal">DataSet</font> ds = svc.LoadSasDataSetIntoDataTable(ddDataSet.Text);</font></font></span>
+
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">SasGrid.DataSource = ds.Tables[0];</font></font></span>
+
That is mostly it. There is some ‘code behind’ [3] that is shown below but the above is a vast simplification from the JavaScript version.
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">SasGrid.DataBind();</font></font></span>
+
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">}</font></font></span>
+
Here is what is happening in the ASP.NET tags:
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>
+
  
Code <span style="mso-no-proof: yes">2</span>ASP.NET Code Behind
+
1.     The script manager handles the communication to the XmlHttpEngines
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">In the code behind, a new instance of the web service is created. The service</font></font></span>''''''<span style="line-height: 115%"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''<span style="line-height: 115%; mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">LoadSasDataSetIntoDataTable is called and a .NET dataset is returned. The .NET dataset is then bound to the datagrid and the grid shows up on the screen.</font></font></span>'''<span style="line-height: 115%"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
2.     A button called btnSubmit is created. Inside of the UpdatePanel is a trigger that is fired when the btnSubmit is clicked.
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Here is a screenshot of the demo application (with formatting applied):</font></font></span>'''
+
3.     An UpdatePanel can have any valid control or HTML inside of it. The UpdatePanel handles all of the plumbing needed to make the AJAX side work.
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
''''''
+
  
Figure <span style="mso-no-proof: yes">2</span>Demo Screen'''<span style="mso-bidi-font-size: 9.0pt; mso-bidi-font-weight: normal"></span>'''
+
Here is the code behind for the page:
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">The ASP.NET AJAX also handles all cross-platform issues automatically and has a drag-and drop editor so it writes a lot of the code for you. Most of the code above was automatically created for me, the developer, by simply dragging items out and placing them on the designer.</font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
<nowiki>   protected void btnSubmit_Click(object sender, EventArgs e)
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">This app can be found at the following URL:</font></font></span>'''
+
    {
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
        Demo.Service svc = new Demo.Service();
  
[http://sgfdemo1.savian.net/ <font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">http://sgfdemo1.savian.net/</font></font>]'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
        DataSet ds = svc.LoadSasDataSetIntoDataTable(ddDataSet.Text);
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
        SasGrid.DataSource = ds.Tables[0];
  
'''<span style="text-transform: none"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">NOTE: The Microsoft ASP.NET AJAX toolkit is in its first iteration. Make sure that if you decide to use this toolkit to get the latest updates and search the web if you encounter any issues. While my experience has been that it is very stable, issues have cropped up in certain situations.</font></font></span>'''<span style="text-transform: none; font-weight: normal"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>
+
        SasGrid.DataBind();
  
<span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="10.0pt"><br style="mso-special-character: line-break; page-break-before: always" clear="all" /></font></font></span>
+
    }</nowiki>
  
'''<span style="text-transform: uppercase"></span>'''
+
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">the magic behind the scenes</font>
+
Code 2  ASP.NET Code Behind
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">web services</font>
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">In the AJAX examples shown so far, all of the data is being transported across the web using web services. Web services allow the application to call SAS or to read SAS data on the same or another server. Their ability to abstract where information comes from and expose it in a common way makes them very attractive and why they were chosen. While this paper is not designed to demonstrate web services, a little explanation is in order.</font></font></span>'''
+
In the code behind, a new instance of the web service is created. The service LoadSasDataSetIntoDataTable is called and a .NET dataset is returned. The .NET dataset is then bound to the datagrid and the grid shows up on the screen.
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
Here is a screenshot of the demo application (with formatting applied):
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">A web service is exposed to the web through a web server. Think of it as a website to service applications rather than people. For SAS programmers, imagine it is a macro call across the web. Unlike a macro call though, a web service can be consumed by any application that supports web services. Web services are cross-platform and application agnostic.In SAS 9.2, SAS programmers will be able to expose SAS code out as a web service.Web services have become a de facto standard for application interoperability.</font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
 
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Here is a diagram showing how the AJAX application shown here uses web services for reading SAS datasets:</font></font></span>'''
+
Figure 2  Demo Screen
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
The ASP.NET AJAX also handles all cross-platform issues automatically and has a drag-and drop editor so it writes a lot of the code for you. Most of the code above was automatically created for me, the developer, by simply dragging items out and placing them on the designer.
  
''''''
+
  
Figure <span style="mso-no-proof: yes">3</span> Web service call to SAS''''''
+
This app can be found at the following URL:
  
''''''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Currently, in order to expose SAS data or functionality out as a web service, enabling technologies are used. In thedemos shown here, a C# wrapper was created to make this happen. While this may sound intimidating to a person unfamiliar with C#, numerous examples exist on the web for how to make this happen.Microsoft even provides a guide</font></font></span>'''[#_ftn4 <span class="MsoFootnoteReference">'''<font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference">'''<span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">[4]</font></font></span>'''</span></span></font></font>'''</span>]'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> for how to create your first web service using C# and even provides a free development environment to help out</font></font></span>'''[#_ftn5 <span class="MsoFootnoteReference">'''<font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference">'''<span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">[5]</font></font></span>'''</span></span></font></font>'''</span>]'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">.</font></font></span>'''
+
[[http://sgfdemo1.savian.net/]]
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
'''<span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><br style="mso-special-character: line-break; page-break-before: always" clear="all" /></font></font></span>'''
+
NOTE: The Microsoft ASP.NET AJAX toolkit is in its first iteration. Make sure that if you decide to use this toolkit to get the latest updates and search the web if you encounter any issues. While my experience has been that it is very stable, issues have cropped up in certain situations.
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Let’s look at the last web service that was used (</font></font></span>''''''<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">LoadSasDataSetIntoDataTable</font></font></span>''''''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">):</font></font></span>'''
 
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;">[<font color="teal">WebMethod</font>]</font></span>'''
 
  
'''<span style="mso-no-proof: yes"><font color="blue"><font face="&quot;Courier New&quot;">public</font></font></span>''''''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;"> System.Data.<font color="teal">DataSet</font> LoadSasDataSetIntoDataTable(<font color="blue">string</font> sasDataSet)</font></span>'''
+
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;">{</font></span>'''
 
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;"><font color="blue">string</font> conn = @</font></span>'''<span style="mso-no-proof: yes"><font color="maroon"><font face="&quot;Courier New&quot;">"c:\temp"</font></font></span><span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;"><nowiki>;</nowiki></font></span>
+
'''The Magic Behind the Scenes'''
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;">System.Data.<font color="teal">DataSet</font> ds = <font color="blue">new</font> System.Data.<font color="teal">DataSet</font>();</font></span>'''
+
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;"><font color="teal">OleDbConnection</font> sas = <font color="blue">new</font> <font color="teal">OleDbConnection</font>(<font color="maroon">"Provider=sas.LocalProvider; " </font>+</font></span>'''
+
Web Services
  
'''<span style="mso-no-proof: yes"><font color="maroon"><font face="&quot;Courier New&quot;">"Data Source="</font></font></span>''''''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;"> + conn);</font></span>'''
+
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;">sas.Open();</font></span>'''
+
In the AJAX examples shown so far, all of the data is being transported across the web using web services. Web services allow the application to call SAS or to read SAS data on the same or another server. Their ability to abstract where information comes from and expose it in a common way makes them very attractive and why they were chosen. While this paper is not designed to demonstrate web services, a little explanation is in order. 
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;"><font color="teal">OleDbCommand</font> sasCommand = sas.CreateCommand();</font></span>'''
+
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;">sasCommand.CommandType = <font color="teal">CommandType</font>.TableDirect;</font></span>'''
+
A web service is exposed to the web through a web server. Think of it as a website to service applications rather than people. For SAS programmers, imagine it is a macro call across the web. Unlike a macro call though, a web service can be consumed by any application that supports web services. Web services are cross-platform and application agnostic.  In SAS 9.2, SAS programmers will be able to expose SAS code out as a web service. Web services have become a de facto standard for application interoperability.
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;">sasCommand.CommandText = sasDataSet;</font></span>'''
+
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;"><font color="teal">OleDbDataReader</font> sasRead = sasCommand.ExecuteReader();</font></span>'''
+
Here is a diagram showing how the AJAX application shown here uses web services for reading SAS datasets:
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;">ds.Tables.Add(<font color="maroon">"OUTDATA"</font>);</font></span>'''
+
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;">ds.Tables[0].Load(sasRead);</font></span>'''
+
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;"><font color="blue">return</font> ds;</font></span>'''
 
  
'''<span style="mso-no-proof: yes"><font face="&quot;Courier New&quot;">}</font></span>'''
+
  
'''<span style="mso-no-proof: yes"></span>'''
+
  
Figure <span style="mso-bookmark: _Ref158472026"><span style="mso-no-proof: yes">4</span></span><span style="mso-bookmark: _Ref158472026"> - Web service call to SAS</span>''''''
+
Figure 3 Web service call to SAS
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">This web service does the following:</font></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
Currently, in order to expose SAS data or functionality out as a web service, enabling technologies are used. In the  demos shown here, a C# wrapper was created to make this happen. While this may sound intimidating to a person unfamiliar with C#, numerous examples exist on the web for how to make this happen.  Microsoft even provides a guide[4] for how to create your first web service using C# and even provides a free development environment to help out[5].
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">1.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Sets the location of the SAS sample data directory</font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">2.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Creates an instance of a .NET dataset called ds. Think of a .NET dataset as a SAS library but in memory.</font></font></span>'''
 
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">3.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Opens an OleDb connection to SAS using the SAS OleDb provider available, for free, on the SAS website</font></font></span>'''
 
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">4.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Opens the connection</font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">5.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Opens the dataset specified when the service is called</font></font></span>'''
+
Let’s look at the last web service that was used (LoadSasDataSetIntoDataTable):
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">6.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Reads the data and adds it to a new table called OUTDATA</font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">7.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Returns the .NET dataset</font></font></span>'''
+
<nowiki>[WebMethod]
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font>
+
public System.Data.DataSet LoadSasDataSetIntoDataTable(string sasDataSet)
  
<span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="10.0pt"><br style="mso-special-character: line-break; page-break-before: always" clear="all" /></font></font></span>
+
{
  
'''<span style="text-transform: uppercase"></span>'''
+
  string conn = @"c:\temp";
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="10.0pt">putting it all together</font></font>
+
  System.Data.DataSet ds = new System.Data.DataSet();
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Ok, you should now have a basic understanding of AJAX. However, setting it all up along with a web service may be a bit confusing.So here is how I make all of this happen, step-by-step. (Note: some of these steps can be modified to achieve other functionality or for other platforms):</font></font></span>'''
+
  OleDbConnection sas = new OleDbConnection("Provider=sas.LocalProvider; " +
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
                                            "Data Source=" + conn);
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">1.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Install Visual Studio 2005 and the ASP.NET AJAX framework. Also install the framework on a web server running IIS. In the following example, the web server and the development platform are the same for simplicity. You may be able to use Visual Studio Express as well.</font></font></span>'''
+
  sas.Open();
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">2.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Fire up Visual Studio 2005 </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> File </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> New </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Web Site </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> ASP.NET Web Service</font></font></span>'''
+
  OleDbCommand sasCommand = sas.CreateCommand();
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">3.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">At the top of the code that is displayed, add in the following 2 using statements (this will simplify the amount of typing):</font></font></span>'''
+
  sasCommand.CommandType = CommandType.TableDirect;
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  sasCommand.CommandText = sasDataSet;
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">using System.Data</font></font></span>'''
+
  OleDbDataReader sasRead = sasCommand.ExecuteReader();
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">using System.Data.OleDb</font></font></span>'''
+
  ds.Tables.Add("OUTDATA");
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  ds.Tables[0].Load(sasRead);
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">4.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Paste in the code shown in </font></font></span>'''<span style="mso-field-code: &quot; REF _Ref158472026 \\h  \\* MERGEFORMAT &quot;"><span style="line-height: 115%"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Figure <span style="mso-no-proof: yes">4</span> - Web service call to SAS</font></font></span></span>'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  return ds;
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">5.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Press F5 to test the website.</font></font></span>'''
+
}</nowiki>  
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">6.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Build </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Publish web site </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Specify a directory</font></font></span>'''
+
Figure 4 - Web service call to SAS
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">7.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Make sure you copy your SAS datasets to the directory that you specified in the conn string</font></font></span>'''
+
This web service does the following:
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">8.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Go to Windows Explorer </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> right-click the directory that you just created </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Sharing and Security </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Web sharing </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Share this folder </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Name it “SAS” for now </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Ok </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Ok</font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">9.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Set up security to allow a web service to read data from that directory. </font></font></span>'''
+
1.     Sets the location of the SAS sample data directory
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">a.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Right-click the directory in Windows Explorer </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Properties </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Security</font></font></span>'''
+
2.     Creates an instance of a .NET dataset called ds. Think of a .NET dataset as a SAS library but in memory.
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">b.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Add in the user ASPNET</font></font></span>'''
+
3.     Opens an OleDb connection to SAS using the SAS OleDb provider available, for free, on the SAS website
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
4.    Opens the connection
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
5.    Opens the dataset specified when the service is called
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Wham! You now have a web service that can read SAS datasets running on your localhost. Time to create a web site that reads it in:</font></font></span>'''
+
6.     Reads the data and adds it to a new table called OUTDATA
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
7.    Returns the .NET dataset
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">1.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Fire up Visual Studio 2005 </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> File </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> New </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Web Site </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> ASP.NET AJAX enabled web site</font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">2.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">At the bottom lower left of the screen, switch from Source to Design</font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">3.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Delete the existing ScriptManager1 (this appears to be a bug in this framework version)</font></font></span>'''
 
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">4.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Drag out a new ScriptManager. </font></font></span>'''
 
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">5.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Drag out a button from the left onto the designer</font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">6.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Drag out an Update Panel. Drag out a GridView (it is under the Data section) and place it in the update panel. Auto-format it if desired.</font></font></span>'''
+
putting it all together
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">7.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Click on the UpdatePanel and on the right-hand side of Visual Studios, look for the Properties docking control. You should see the properties for the UpdatePanel. Click on the triggers section and then click the 3 dots that appear.</font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">8.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">New trigger </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Trigger when a control raises an event </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> In the lower frame </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> click on control </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Button1 </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Click </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Ok </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Ok</font></font></span>'''
+
Ok, you should now have a basic understanding of AJAX. However, setting it all up along with a web service may be a bit confusing. So here is how I make all of this happen, step-by-step. (Note: some of these steps can be modified to achieve other functionality or for other platforms):
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Interesting. No code yet but the AJAX framework is in place and you never wrote a single line of JavaScript or HTML. Let’s hook in the web service now so that we can get that SAS data:</font></font></span>'''
+
1.     Install Visual Studio 2005 and the ASP.NET AJAX framework. Also install the framework on a web server running IIS. In the following example, the web server and the development platform are the same for simplicity. You may be able to use Visual Studio Express as well.
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
2.    Fire up Visual Studio 2005 à File à New à Web Site à ASP.NET Web Service
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">1.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">In the Solution Explorer (upper right control), right-click the directory </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Add Web Reference </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''[http://localhost/SAS/Service.asmx <span style="line-height: 115%"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">http://localhost/SAS/Service.asmx</font></font></span>]'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> (you can also search for it but it may take some time). For the web reference name, type in SASServices. Click Add Reference.</font></font></span>'''
+
3.     At the top of the code that is displayed, add in the following 2 using statements (this will simplify the amount of typing):
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Wow! That wasn’t bad. Just a bunch of dragging and dropping, a little typing, and click, click, click…Now for the tiny bit of code to make it all work.</font></font></span>'''
+
<nowiki>using System.Data
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
using System.Data.OleDb</nowiki>
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">1.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Go back to the Default.aspx in the Design mode. Double-click the button. This will wire up the click event and show you the code behind the website. The code you will now write will execute whenever the user clicks a button. (if you ever need to get to this code behind, do the following: In the Solution Explorer, right-click Default.aspx </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> View Code)</font></font></span>'''
+
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">2.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Place the following code in the new Button1_Click event (it is cool to type this in rather than cut and paste if you have never experienced Intellisense before):</font></font></span>'''
+
4.     Paste in the code shown in Figure 4 - Web service call to SAS
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">SASServices.<font color="teal">Service</font> svc = <font color="blue">new</font> SASServices.<font color="teal">Service</font>();</font></font></span>
+
5.     Press F5 to test the website.
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">svc.Credentials = System.Net.<font color="teal">CredentialCache</font>.DefaultCredentials;</font></font></span>
+
6.     Build à Publish web site à Specify a directory
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><font color="teal">DataSet</font> ds = svc.LoadSasDataSetIntoDataTable(<font color="maroon">"Class"</font>);</font></font></span>
+
7.     Make sure you copy your SAS datasets to the directory that you specified in the conn string
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">GridView1.DataSource = ds.Tables[0];</font></font></span>
+
8.    Go to Windows Explorer à right-click the directory that you just created à Sharing and Security à Web sharing à Share this folder à Name it “SAS” for now à Ok à Ok
  
<span style="mso-no-proof: yes"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">GridView1.DataBind();</font></font></span>
+
9.     Set up security to allow a web service to read data from that directory.  
  
'''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
a.    Right-click the directory in Windows Explorer à Properties à Security
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">3.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Press F5 (Build) </font></font></span>''''''<span style="line-height: 115%; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; mso-char-type: symbol; mso-symbol-font-family: Wingdings; font-weight: normal; mso-bidi-font-weight: bold"><font face="Wingdings"><font size="9.0pt"><span style="mso-char-type: symbol; mso-symbol-font-family: Wingdings">à</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"> Ok</font></font></span>'''
+
b.     Add in the user ASPNET
  
'''<span style="line-height: 115%; mso-fareast-font-family: Arial; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt"><span style="mso-list: Ignore">4.</span></font></font></span>''''''<span style="line-height: 115%; font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Click the button and your SAS data should appear. If not, and you receive an authentication error, try switching the DefaultCredentials to DefaultNetworkCredentials. If that doesn’t work…Google and good luck: security is the #1 time killer in these applications if things don’t go smoothly.</font></font></span>'''
+
  
<span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="10.0pt"><br style="mso-special-character: line-break; page-break-before: always" clear="all" /></font></font></span>
+
  
'''<span style="text-transform: uppercase"></span>'''
+
Wham! You now have a web service that can read SAS datasets running on your localhost. Time to create a web site that reads it in:
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">CONCLUSION</font>
+
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">AJAX is a welcome change in the web world and helps make the user experience much more palatable. Using an AJAX framework, it is possible to create AJAX enabled sites very quickly. Web services are a new paradigm for how remote communications operate. Since the two technologies work well together and web services should be considered for every project, web services were employed here. </font></font></span>'''
+
1.     Fire up Visual Studio 2005 à File à New à Web Site à ASP.NET AJAX enabled web site
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"></font></span>'''
+
2.    At the bottom lower left of the screen, switch from Source to Design
  
'''<span style="font-weight: normal; mso-bidi-font-weight: bold"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">While the initial project may seem intimidating, it is much easier due to the AJAX toolkits and the ease of setting up web services using Microsoft’s .NET framework. With a little training time, the world of SAS will open up to your web users AND be enjoyable.</font></font></span>'''
+
3.     Delete the existing ScriptManager1 (this appears to be a bug in this framework version)
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">References</font>
+
4.    Drag out a new ScriptManager.
  
''<span style="mso-no-proof: yes">Ajax</span>''<span style="mso-no-proof: yes">. (n.d.). Retrieved February 7, 2007, from Wikipedia: http://en.wikipedia.org/wiki/Ajax_(programming)</span>
+
5.     Drag out a button from the left onto the designer
  
''<span style="mso-no-proof: yes">Web Service</span>''<span style="mso-no-proof: yes">. (n.d.). Retrieved February 7, 2007, from Wikipedia: http://en.wikipedia.org/wiki/Web_services</span>
+
6.     Drag out an Update Panel. Drag out a GridView (it is under the Data section) and place it in the update panel. Auto-format it if desired.
  
''<span style="mso-no-proof: yes">XmlHttpRequest</span>''<span style="mso-no-proof: yes">. (n.d.). Retrieved February 7, 2007, from AjaxPatterns: http://ajaxpatterns.org/XMLHttpRequest_Call</span>
+
7.    Click on the UpdatePanel and on the right-hand side of Visual Studios, look for the Properties docking control. You should see the properties for the UpdatePanel. Click on the triggers section and then click the 3 dots that appear.
  
<span style="mso-no-proof: yes">Zacas, McPeak, Fawcett. (2006). ''Professional Ajax.'' Indianapolis: Wiley Publishing, Inc.</span>
+
8.     New trigger à Trigger when a control raises an event à In the lower frame à click on control à Button1 à Click à Ok à Ok
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">ACKNOWLEDGMENTS</font>
+
  
<span style="text-transform: none; font-weight: normal"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">Thanks to Don Henderson of Henderson Consulting Services (</font></font></span>[http://www.hcsbi.com <span style="text-transform: none; font-weight: normal"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">www.hcsbi.com</font></font></span>]<span style="text-transform: none; font-weight: normal"><font face="&quot;Arial&quot;,&quot;sans-serif&quot;"><font size="9.0pt">) for the mentoring, encouragement, and help. Thanks also to Vince DelGobbo of SAS for the encouragement and advice.</font></font></span>
+
Interesting. No code yet but the AJAX framework is in place and you never wrote a single line of JavaScript or HTML. Let’s hook in the web service now so that we can get that SAS data:
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Recommended Reading</font>
+
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Professional Ajax, WROX</font>
+
1.    In the Solution Explorer (upper right control), right-click the directory à Add Web Reference à http://localhost/SAS/Service.asmx (you can also search for it but it may take some time). For the web reference name, type in SASServices. Click Add Reference.
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Contact Information</font>
+
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Your comments and questions are valued and encouraged.Contact the author at:</font>
+
Wow! That wasn’t bad. Just a bunch of dragging and dropping, a little typing, and click, click, click…Now for the tiny bit of code to make it all work.
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Alan Churchill</font>
+
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Savian</font>
+
1.    Go back to the Default.aspx in the Design mode. Double-click the button. This will wire up the click event and show you the code behind the website. The code you will now write will execute whenever the user clicks a button. (if you ever need to get to this code behind, do the following: In the Solution Explorer, right-click Default.aspx à View Code)
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">68 W Cheyenne Mtn. Blvd</font>
+
2.     Place the following code in the new Button1_Click event (it is cool to type this in rather than cut and paste if you have never experienced Intellisense before):
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Colorado Springs, CO 80906</font>
+
<nowiki>        SASServices.Service svc = new SASServices.Service();
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Work Phone: 719-687-5954</font>
+
        svc.Credentials = System.Net.CredentialCache.DefaultCredentials;
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">E-mail: alan.churchill@savian.net</font>
+
        DataSet ds = svc.LoadSasDataSetIntoDataTable("Class");
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Web: www.savian.net</font>
+
        GridView1.DataSource = ds.Tables[0];
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">SAS and all other SAS Institute Inc. product or service names are registered trademarks or trademarks of SAS Institute Inc. in the USA and other countries. ® indicates USA registration.</font>
+
        GridView1.DataBind();</nowiki>
 +
  
<font face="&quot;Arial&quot;,&quot;sans-serif&quot;">Other brand and product names are trademarks of their respective companies. </font>
+
3.     Press F5 (Build) à Ok
  
</div><div style="mso-element: footnote-list"><br clear="all" />
+
4.    Click the button and your SAS data should appear. If not, and you receive an authentication error, try switching the DefaultCredentials to DefaultNetworkCredentials. If that doesn’t work…Google and good luck: security is the #1 time killer in these applications if things don’t go smoothly.
----
+
<div id="ftn1" style="mso-element: footnote">
+
  
[#_ftnref1 <span class="MsoFootnoteReference"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference"><span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Times New Roman&quot;,&quot;serif&quot;"><font size="10.0pt">[1]</font></font></span></span></span></span>] <span style="mso-no-proof: yes">(Zacas, McPeak, Fawcett, 2006)</span>, p. 5
+
  
</div><div id="ftn2" style="mso-element: footnote">
 
  
[#_ftnref2 <span class="MsoFootnoteReference"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference"><span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Times New Roman&quot;,&quot;serif&quot;"><font size="10.0pt">[2]</font></font></span></span></span></span>] <span style="mso-no-proof: yes">(Zacas, McPeak, Fawcett, 2006)</span>, p. 5
 
  
</div><div id="ftn3" style="mso-element: footnote">
+
  
[#_ftnref3 <span class="MsoFootnoteReference"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference"><span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Times New Roman&quot;,&quot;serif&quot;"><font size="10.0pt">[3]</font></font></span></span></span></span>] Code behind is a term used in ASP.NET. It refers to the code that is used to render and work with the page.
 
  
</div><div id="ftn4" style="mso-element: footnote">
+
== Conclusion ==
  
[#_ftnref4 <span class="MsoFootnoteReference"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference"><span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Times New Roman&quot;,&quot;serif&quot;"><font size="10.0pt">[4]</font></font></span></span></span></span>] The guide can be found in the Visual Studio help files by looking under XML Web Services in the index
 
  
</div><div id="ftn5" style="mso-element: footnote">
+
  
[#_ftnref5 <span class="MsoFootnoteReference"><span style="mso-special-character: footnote"><span class="MsoFootnoteReference"><span style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"><font face="&quot;Times New Roman&quot;,&quot;serif&quot;"><font size="10.0pt">[5]</font></font></span></span></span></span>] http://msdn.microsoft.com/vstudio/express/
+
AJAX is a welcome change in the web world and helps make the user experience much more palatable. Using an AJAX framework, it is possible to create AJAX enabled sites very quickly. Web services are a new paradigm for how remote communications operate. Since the two technologies work well together and web services should be considered for every project, web services were employed here.
 +
 
 +
 +
 
 +
While the initial project may seem intimidating, it is much easier due to the AJAX toolkits and the ease of setting up web services using Microsoft’s .NET framework. With a little training time, the world of SAS will open up to your web users AND be enjoyable.
 +
 
 +
==  
 +
References ==
 +
 
 +
 
 +
 +
 
 +
Ajax. (n.d.). Retrieved February 7, 2007, from Wikipedia: http://en.wikipedia.org/wiki/Ajax_(programming)
 +
 
 +
Web Service. (n.d.). Retrieved February 7, 2007, from Wikipedia: http://en.wikipedia.org/wiki/Web_services
 +
 
 +
XmlHttpRequest. (n.d.). Retrieved February 7, 2007, from AjaxPatterns: http://ajaxpatterns.org/XMLHttpRequest_Call
 +
 
 +
Zacas, McPeak, Fawcett. (2006). Professional Ajax. Indianapolis: Wiley Publishing, Inc.
 +
 
 +
 +
 
 +
 
 +
== Acknowledgement ==
 +
 
 +
 
 +
Thanks to Don Henderson of Henderson Consulting Services (www.hcsbi.com) for the mentoring, encouragement, and help. Thanks also to Vince DelGobbo of SAS for the encouragement and advice.
 +
 
 +
 
 +
== Recommended Reading ==
 +
 
 +
 
 +
 +
 
 +
Professional Ajax, WROX
 +
 
 +
 
 +
== Contact Information ==
 +
 
 +
 
 +
 +
 
 +
Your comments and questions are valued and encouraged.  Contact the author at:
 +
 
 +
Alan Churchill
 +
 
 +
Savian
 +
 
 +
68 W Cheyenne Mtn. Blvd
 +
 
 +
Colorado Springs, CO 80906
 +
 
 +
 +
 
 +
Work Phone:        719-687-5954
 +
 
 +
E-mail:                   alan.churchill@savian.net
 +
 
 +
Web:                      www.savian.net
 +
 
 +
 +
 
 +
SAS and all other SAS Institute Inc. product or service names are registered trademarks or trademarks of SAS Institute Inc. in the USA and other countries. ® indicates USA registration. 
 +
 
 +
Other brand and product names are trademarks of their respective companies.
 +
 
 +
 +
 
 +
 
 +
 
 +
--------------------------------------------------------------------------------
 +
 
 +
[1] (Zacas, McPeak, Fawcett, 2006), p. 5
 +
 
 +
[2] (Zacas, McPeak, Fawcett, 2006), p. 5
 +
 
 +
[3] Code behind is a term used in ASP.NET. It refers to the code that is used to render and work with the page.
 +
 
 +
[4] The guide can be found in the Visual Studio help files by looking under XML Web Services in the index
 +
 
 +
[5] http://msdn.microsoft.com/vstudio/express/
  
</div></div>
 
 
[[Category:SAS9 BI/EBI]]
 
[[Category:SAS9 BI/EBI]]
 
[[Category:AJAX]]
 
[[Category:AJAX]]

Revision as of 10:52, 5 April 2007

Paper 201-2007



AJAX and SAS®: Smooth Web Applications


Alan Churchill, Savian, Colorado Springs, CO


Abstract

AJAX (Asynchronous Javascript and XML) is an approach to designing websites that emphasizes ease of use for end users. Using one of the new AJAX frameworks simplifies the creation of an AJAX enabled website. Additionally, using web services as a backend provider for SAS, an AJAX site can be created that allows users to request SAS information from a server and display it on a web site in a seamless manner. Step by step instructions for creating a AJAX-enabled, web service backend system working with SAS are provided.

Introduction


AJAX is fast becoming the approach for developing web applications. Creating an AJAX website that exposes SAS can be done in a few short steps. While a ground-up AJAX site involves a lot of JavaScript code, this paper will demonstrate how to build an AJAX site using an AJAX framework in a few easy steps. Most of the actual work involved will be drag and drop inside of a WYSIWIG editor.



AJAX


What is AJAX? AJAX is an approach to developing web sites and is not a specific technology. It encompasses a number of technical approaches but essentially it is a way to create web sites that do not involve as many round-trips from the client to the server. Also, while XML is in the AJAX name, AJAX can work with any form of data. The only requirement is that the AJAX engine can understand and interpret the data.[1]


The term was originally discussed in context of how to make web applications run more seamlessly. As end users became more accustomed to the web, more interactivity was demanded. Soon, web application development had become an effort in frustration for everyone involved from the developer to the end user. The end user would press a button in the browser, wait, and the entire screen would refresh or ‘blink’. The developer had a number of tricks that they could use to try and prevent a complete refresh but the developer had to write a lot of code and manage the transfer of information to and from the server. Also, the process was synchronous so nothing could happen until the transfer was complete.


In 2001, Microsoft snuck in a little known ActiveX object into IE5. Known as XmlHttpRequest object, this allowed a web page to use a middle component (XmlHttpRequest) to do the communication to and from the server. In this new model, the developer communicated with the local engine and that engine would handle all of the communication to the server. Moreover, this was an asynchronous process. This functionality was put in at the request of the Microsoft Outlook team who, at the time, were working on the Outlook Web Access (OWA) client. This was really the first AJAX use as it is popularly known now. With the introduction of Google Maps a few years later, the approach of what would become AJAX gained steam. In 2005, Jesse James Garrett of Adaptive Path described the approach and first used the term AJAX. The world suddenly caught on fire and AJAX became very popular.


AJAX is built using JavaScript and HTML. AJAX, by itself, can be very complex to code as will be demonstrated.


[2]


Figure 1 AJAX Diagram





approaches

AJAX will typically use one of two techniques: hidden iframes or XmlHttpRequest. A hidden iframe is used in a number of applications and was a default choice prior to the advent of XmlHttpRequest. Google Maps, for example, uses hidden iframes to achieve its look and feel. However, the use of iframes to achieve AJAX functionality should wane as the XmlHttpRequest approach becomes more popular and matures. For this reason (and others), this paper will focus on XmlHttpRequest. However, there are pros and cons to each approach. Readers are directed to the following website for more information:

http://ajaxpatterns.org/XMLHttpRequest_Call


READY, AIM, FIRE!


Let’s look behind the scenes at some sample AJAX code (partial code shown):


<div id="results" style="behavior:url(webservice.htc)"></div> <input type="image" style="behavior:url(webservice.htc);" onclick='main()' /> function main() { results.useService("http://demo.savian.net/SasWebServicesDemo/Service.asmx?WSDL","ws1"); iCallID = results.ws1.callService(handleResult,"GetSasDataSetAsHtmlNoMatter", library.value,dataset.value); deliveryType = "web services" ; } function handleResult(res) { if (!res.error) { wsReturn = res.value; xmlhttpPost() ; } else { alert("Unsuccessful call. Error is " + res.errorDetail.string); } } function xmlhttpPost() { var xmlHttpReq = false; var self = this; self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); self.xmlHttpReq.open('POST', "http://demo.savian.net/Ajax/CallWebService.htm" , true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); updatePage(); } function updatePage() { document.getElementById("dt").innerHTML = "<p>Data retreived using " + deliveryType + " at " + Date() + "</p>"; document.getElementById("results").innerHTML = wsReturn ; }


Code 1 Raw AJAX JavaScript and HTML




What is happening in this ajax code


1. A button is declared that, when pushed, fires the main() function.

2. The main() function then tells the results div tag to call a web service., passing in 3 parameters: a program name of ‘GetSasDataSetAsHtmlNoMatter’, a library name found in a label, and a dataset name from a dropdown box

3. The web service (a C# program) sends the information to SAS which then executes the code.

4. The web service gets the dataset from SAS and returns the data to the web page.

5. The function handleResult Is run which gets the data

6. xmlHttpPost function is then called which does the AJAX ‘magic’ and passes the data to the web page without refreshing the whole page.

7. Finally, the updatePage function is called which locates the dt div tag and writes that data was retrieved using “web services” delivery type and also updates the results div tag with the SAS data.


The above isn’t even a fraction of the code needed to do AJAX cross-platform and robustly. It gets very complex, very quickly. Every browser has slightly different calls to the XmlHttp request object so a true cross-browser solution has to account for all of those variants.


I hear the collective groan…“Uggghhhh! I don’t want to have to code that for every page. Where’s the simplicity of my SAS put statements!?!?”






Enter the ajax toolkits



To simplify working with AJAX, a number of people have created AJAX toolkits to hide most of the complexity. ASP.NET AJAX is one such kit newly released by Microsoft and is what is used in all of the remaining examples.


Here are some equivalent steps to do this in ASP.NET AJAX:


1. Create a Script Manager


<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />


2. Create a button


<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" /></td>


3. Create an update panel with a datagrid control:


<asp:UpdatePanel ID="updPanel" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlId="btnSubmit" EventName="Click"/> </Triggers> <ContentTemplate> <asp:Panel ID="SasData" runat="server"> <asp:DataGrid ID="SasGrid" runat="server"…style info…/> </asp:DataGrid> </asp:Panel> </ContentTemplate> </asp:UpdatePanel>


That is mostly it. There is some ‘code behind’ [3] that is shown below but the above is a vast simplification from the JavaScript version.


Here is what is happening in the ASP.NET tags:


1. The script manager handles the communication to the XmlHttpEngines

2. A button called btnSubmit is created. Inside of the UpdatePanel is a trigger that is fired when the btnSubmit is clicked.

3. An UpdatePanel can have any valid control or HTML inside of it. The UpdatePanel handles all of the plumbing needed to make the AJAX side work.



Here is the code behind for the page:


protected void btnSubmit_Click(object sender, EventArgs e) { Demo.Service svc = new Demo.Service(); DataSet ds = svc.LoadSasDataSetIntoDataTable(ddDataSet.Text); SasGrid.DataSource = ds.Tables[0]; SasGrid.DataBind(); }


Code 2 ASP.NET Code Behind


In the code behind, a new instance of the web service is created. The service LoadSasDataSetIntoDataTable is called and a .NET dataset is returned. The .NET dataset is then bound to the datagrid and the grid shows up on the screen.

Here is a screenshot of the demo application (with formatting applied):



Figure 2 Demo Screen

The ASP.NET AJAX also handles all cross-platform issues automatically and has a drag-and drop editor so it writes a lot of the code for you. Most of the code above was automatically created for me, the developer, by simply dragging items out and placing them on the designer.


This app can be found at the following URL:


[[1]]


NOTE: The Microsoft ASP.NET AJAX toolkit is in its first iteration. Make sure that if you decide to use this toolkit to get the latest updates and search the web if you encounter any issues. While my experience has been that it is very stable, issues have cropped up in certain situations.





The Magic Behind the Scenes


Web Services


In the AJAX examples shown so far, all of the data is being transported across the web using web services. Web services allow the application to call SAS or to read SAS data on the same or another server. Their ability to abstract where information comes from and expose it in a common way makes them very attractive and why they were chosen. While this paper is not designed to demonstrate web services, a little explanation is in order.


A web service is exposed to the web through a web server. Think of it as a website to service applications rather than people. For SAS programmers, imagine it is a macro call across the web. Unlike a macro call though, a web service can be consumed by any application that supports web services. Web services are cross-platform and application agnostic. In SAS 9.2, SAS programmers will be able to expose SAS code out as a web service. Web services have become a de facto standard for application interoperability.


Here is a diagram showing how the AJAX application shown here uses web services for reading SAS datasets:






Figure 3 Web service call to SAS


Currently, in order to expose SAS data or functionality out as a web service, enabling technologies are used. In the demos shown here, a C# wrapper was created to make this happen. While this may sound intimidating to a person unfamiliar with C#, numerous examples exist on the web for how to make this happen. Microsoft even provides a guide[4] for how to create your first web service using C# and even provides a free development environment to help out[5].




Let’s look at the last web service that was used (LoadSasDataSetIntoDataTable):


[WebMethod] public System.Data.DataSet LoadSasDataSetIntoDataTable(string sasDataSet) { string conn = @"c:\temp"; System.Data.DataSet ds = new System.Data.DataSet(); OleDbConnection sas = new OleDbConnection("Provider=sas.LocalProvider; " + "Data Source=" + conn); sas.Open(); OleDbCommand sasCommand = sas.CreateCommand(); sasCommand.CommandType = CommandType.TableDirect; sasCommand.CommandText = sasDataSet; OleDbDataReader sasRead = sasCommand.ExecuteReader(); ds.Tables.Add("OUTDATA"); ds.Tables[0].Load(sasRead); return ds; }

Figure 4 - Web service call to SAS

This web service does the following:


1. Sets the location of the SAS sample data directory

2. Creates an instance of a .NET dataset called ds. Think of a .NET dataset as a SAS library but in memory.

3. Opens an OleDb connection to SAS using the SAS OleDb provider available, for free, on the SAS website

4. Opens the connection

5. Opens the dataset specified when the service is called

6. Reads the data and adds it to a new table called OUTDATA

7. Returns the .NET dataset





putting it all together


Ok, you should now have a basic understanding of AJAX. However, setting it all up along with a web service may be a bit confusing. So here is how I make all of this happen, step-by-step. (Note: some of these steps can be modified to achieve other functionality or for other platforms):


1. Install Visual Studio 2005 and the ASP.NET AJAX framework. Also install the framework on a web server running IIS. In the following example, the web server and the development platform are the same for simplicity. You may be able to use Visual Studio Express as well.

2. Fire up Visual Studio 2005 à File à New à Web Site à ASP.NET Web Service

3. At the top of the code that is displayed, add in the following 2 using statements (this will simplify the amount of typing):


using System.Data using System.Data.OleDb


4. Paste in the code shown in Figure 4 - Web service call to SAS

5. Press F5 to test the website.

6. Build à Publish web site à Specify a directory

7. Make sure you copy your SAS datasets to the directory that you specified in the conn string

8. Go to Windows Explorer à right-click the directory that you just created à Sharing and Security à Web sharing à Share this folder à Name it “SAS” for now à Ok à Ok

9. Set up security to allow a web service to read data from that directory.

a. Right-click the directory in Windows Explorer à Properties à Security

b. Add in the user ASPNET



Wham! You now have a web service that can read SAS datasets running on your localhost. Time to create a web site that reads it in:


1. Fire up Visual Studio 2005 à File à New à Web Site à ASP.NET AJAX enabled web site

2. At the bottom lower left of the screen, switch from Source to Design

3. Delete the existing ScriptManager1 (this appears to be a bug in this framework version)

4. Drag out a new ScriptManager.

5. Drag out a button from the left onto the designer

6. Drag out an Update Panel. Drag out a GridView (it is under the Data section) and place it in the update panel. Auto-format it if desired.

7. Click on the UpdatePanel and on the right-hand side of Visual Studios, look for the Properties docking control. You should see the properties for the UpdatePanel. Click on the triggers section and then click the 3 dots that appear.

8. New trigger à Trigger when a control raises an event à In the lower frame à click on control à Button1 à Click à Ok à Ok


Interesting. No code yet but the AJAX framework is in place and you never wrote a single line of JavaScript or HTML. Let’s hook in the web service now so that we can get that SAS data:


1. In the Solution Explorer (upper right control), right-click the directory à Add Web Reference à http://localhost/SAS/Service.asmx (you can also search for it but it may take some time). For the web reference name, type in SASServices. Click Add Reference.


Wow! That wasn’t bad. Just a bunch of dragging and dropping, a little typing, and click, click, click…Now for the tiny bit of code to make it all work.


1. Go back to the Default.aspx in the Design mode. Double-click the button. This will wire up the click event and show you the code behind the website. The code you will now write will execute whenever the user clicks a button. (if you ever need to get to this code behind, do the following: In the Solution Explorer, right-click Default.aspx à View Code)

2. Place the following code in the new Button1_Click event (it is cool to type this in rather than cut and paste if you have never experienced Intellisense before):

SASServices.Service svc = new SASServices.Service(); svc.Credentials = System.Net.CredentialCache.DefaultCredentials; DataSet ds = svc.LoadSasDataSetIntoDataTable("Class"); GridView1.DataSource = ds.Tables[0]; GridView1.DataBind();


3. Press F5 (Build) à Ok

4. Click the button and your SAS data should appear. If not, and you receive an authentication error, try switching the DefaultCredentials to DefaultNetworkCredentials. If that doesn’t work…Google and good luck: security is the #1 time killer in these applications if things don’t go smoothly.





Conclusion

AJAX is a welcome change in the web world and helps make the user experience much more palatable. Using an AJAX framework, it is possible to create AJAX enabled sites very quickly. Web services are a new paradigm for how remote communications operate. Since the two technologies work well together and web services should be considered for every project, web services were employed here.


While the initial project may seem intimidating, it is much easier due to the AJAX toolkits and the ease of setting up web services using Microsoft’s .NET framework. With a little training time, the world of SAS will open up to your web users AND be enjoyable.

== References ==



Ajax. (n.d.). Retrieved February 7, 2007, from Wikipedia: http://en.wikipedia.org/wiki/Ajax_(programming)

Web Service. (n.d.). Retrieved February 7, 2007, from Wikipedia: http://en.wikipedia.org/wiki/Web_services

XmlHttpRequest. (n.d.). Retrieved February 7, 2007, from AjaxPatterns: http://ajaxpatterns.org/XMLHttpRequest_Call

Zacas, McPeak, Fawcett. (2006). Professional Ajax. Indianapolis: Wiley Publishing, Inc.



Acknowledgement

Thanks to Don Henderson of Henderson Consulting Services (www.hcsbi.com) for the mentoring, encouragement, and help. Thanks also to Vince DelGobbo of SAS for the encouragement and advice.


Recommended Reading

Professional Ajax, WROX


Contact Information

Your comments and questions are valued and encouraged. Contact the author at:

Alan Churchill

Savian

68 W Cheyenne Mtn. Blvd

Colorado Springs, CO 80906


Work Phone: 719-687-5954

E-mail: alan.churchill@savian.net

Web: www.savian.net


SAS and all other SAS Institute Inc. product or service names are registered trademarks or trademarks of SAS Institute Inc. in the USA and other countries. ® indicates USA registration.

Other brand and product names are trademarks of their respective companies.




[1] (Zacas, McPeak, Fawcett, 2006), p. 5

[2] (Zacas, McPeak, Fawcett, 2006), p. 5

[3] Code behind is a term used in ASP.NET. It refers to the code that is used to render and work with the page.

[4] The guide can be found in the Visual Studio help files by looking under XML Web Services in the index

[5] http://msdn.microsoft.com/vstudio/express/