Ajax
AJAX stands for Asynchronous JavaScript And XML. AJAX is a type of programming made
popular in 2005 by Google (with Google Suggest). AJAX is not a new programming
language, but a new way to use existing standards. With AJAX you can create better,
faster, and more user-friendly web applications. AJAX is based on JavaScript and HTTP
requests.
AJAX = Asynchronous JavaScript and XML
AJAX is not a new programming language,
Ajax: A new approach to web applications" (18 Feb. 2005) Examples: Google Maps, Google
Suggest faster & more responsive than traditional web-based app (bc exchange only small
amount of data with server, w/o requiring any page refreshes "Asynchronous JavaScript
and XML" data exchanged btwn web browsers and web servers is passed asynchronously
behind the scenes. So, Ajax applications can submit requests to the web server w/o
having to pause application execution and can process the requested data whenever it is
returned. -use a special browser object "XMLHttpRequest", instead of a "form". ---
enable asynchronous communication (client-side automation & effects: DHTML "a
collection of technologies" --HTML, CSS, JavaScript, & DOM) Ajax embraces all of the
same technologies as DHTML & adds the XMLHttpRequest object & XML into the mix.
components 1. html & css 2. XML (or plain text, or JSON: JavaScript Object Notation) 3.
XMLHttpRequest 4. DOM (the HTML Document Object Model) 5. JavaScript examples 1. search
engines: A9.com(a9.com), ask.com, suggestion-based search engines: google
suggest, amazon zuggest (
http://francisshanahanzuggest.aspx),Dictionary:
ObjectGraph (http://objectgraphdictionary/) 2. Google Maps 3. online DVD
rental service: Netflix (netflix.com) 4. Virtual Desktop Applications : ajaxWindows
(ajaxwindows.com) which also supplies ajaxWrite: free online word processing,
resembling microsoft word, for (
http://us.ajax13en/ajaxwrite/ & ajaxSketch 5.
photo management : flickr.com 6. message application : ajax im (ajaxim.net)
instant messenger 7. online calendars :calendarHub calrendarhub.com
?
page 2 of 21
JavaScript 1. developed by Netscape Communication Corporation in 1995 with the name
LiveScript, which is changed to JavaScript. 2. ECMAScript version of JavaScript helped
reduce incompatibility and confusion because of the browser war from rivalry Microsoft
Jscript. 2. designed to execute within web browsers. 2. for development of small
programmes ("scripts"), which are embedded inside HTML pages (head/body). 3. add
interactive content to any web page. 4. an interpreted programming language (not
converted into an executable form until the HTML page that contains them is processed.
(little slower) 5. an object-based programming language (it sees everything within HTML
files and browser as objects.) Every object has properties (describing feature/aspect)
and methods (are collections of script statements that when called upon to execute,
enable the objects with which they are associated to perform certain predefined
actions.) 6. able to execute program code based on the occurrence of different events.
(event is an action that is initiated whenever the user interacts with your web
application.) 7. case-sensitive programming language. Places for JavaScripts 1. in Head
section. to be executed automatically or conditionally. In most ajax, to ensure they
are defined and available before the rest of the HTML page loads, but do not
automatically execute. (by putting the JavaScript inside a function such as <script
language = "javascript" type = "text/javascript"> function WarnUser() { window.alert
("Don't"); } 2. in Body section. 3. in external files (plain text files of any length
with a .js file extension)Then, use "src attribute" to call it. This allows the
creation of different JavaScripts for different browsers. (Advantages: 1.) makes the
page smaller and easier to manage. 2.) can be referenced and used by more than one Ajax
application. 3.) later modification, w/o having to modify every page that references
it. 4. in HTML tags. such as <body onLoad = document.write("Boo!")> To prevent the
display of JavaScript as part of the html page in the case of nonsupporting browser,
use: <script language = "javascript" type = "text/javascript"> <!-- Start hiding
JavasScript statements document.write("Boo!"); // End hiding JavaScript statements -->
</script> function FunctionName(p1, p2, ...pn) { statements;
return }
page 3 of 21
In the parentheses, there are arguments. Return = optional (allows the function to
return data back to the statement that called it.) when calling a function, only empty
parenthesis may be used if there are no arguments ,otherwise many arguments values,
separated with comma, may be placed. playerAge = DeterminePLayerAge(); JavaScript
Events onabort onblur (An item loses focus) onchange onclick ondbclick ondragdrop
onerror onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseout
onmouseover onmouseup onreset onresize onsubmit onunload Ajax uses <div></div> and
<span></span> tags to dynamically update web page contents without requiring refresh
(facilitate dynamic text replacement). This can be done by naming the division.
example: <div name = "emphasis" style = "font style : bold">. by doing this, division
can be programmatically referenced and updated at pre-set locations as necessary. span
division allows applying changes inline. Use array (an indexed list of values) to store
any type of value supported by JavaScript.
?
page 4 of 21
"new" keyword is used in declaration of array: fruits = new Array(4); (4 means 4 value
-storing capability) Two ways to create arrays: fruits = new Array("lichee", "grape",
"mangosteen", "banana", "apple", "langsat"); or fruits = new Array(6); fruit[0] =
"lichee"; fruit[1] = "grape"; fruit[2] = "mangosteen"; fruit[3] = "banana"; fruit[4] =
"apple"; fruit[5] = "langsat"; DOM W3C DOM standard was published in 1998 and current
version is DOM3 in 2004. (w3cDOM) "When an HTML page is loaded, the browser
automatically defines a collection of objects based on the content of the HTML page.
These objects are organized in a hierarchical top-down order, beginning with the
document object, tying all of the web pages' elements together in a tree-like
structure. The tree is made up of different elements, each of which represents a
different web page object. Using the tree, the browser maintains a map of connections
that shows the organization of the web page, which consists of a series of parent,
child, and sibling relationships. Each of the objects in the DOM tree provides access
to methods and properties that you can use to programatically interact with and control
the objects. This provides you with the ability to make elements appear and disappear
or to modify them in other ways like changing their color, size, etc." Key properties
(used to identify different elements on the DOM tree and to retrieve element (node)
names, types, and values.) childNodes A collection (e.g., array) of child objects
belonging to an object. firstChild The first child node belonging to an object.
lastChild An object's last child node. NodeName The name assigned to an object's HTML
tag. nodeType Identifies the type of HTML element (tag, attribute, or text) associated
with object nodeValue Retrieves the value assigned to a text node. nextSibling The
child node following the previous child node in the tree. previousSibling The child
node that comes before the current child node. parentNode An object's parent object.
?
page 5 of 21
Key methods (used to make modifications to the DOM tree, creating and appending new
elements. Modification takes place without refreshes.) appendChild() Adds a new child
node to the specified element. createAttribute() Creates a new element attribute.
createElement() Creates a new document element. createTextNode() Creates a new text
item. getElementByTagName() Retrieves an element based on its ID. getElementById()
Retrieves an element based on its ID. hasChildNotes() Returns a true or false value
depending on whether a node has children. removeChild() Deletes the specified child
node. Accessing DOM elements 1. by ID 2. by using DOM properties 3. mixed approach
XMLHttpRequest microsoft released in 1999 " to initiate and manage the submission of
data requests to web servers and to monitor and handle the receipt of server data."
XMLHttpRequest Methods open(). Establishes a connection to a web server. send(). Sends
a request to a web server. XMLHttpRequest Properties readyState A value between 0 and 4
indicating the state of the receipt of data from the web server, where a value of 0
means an uninitialized state (created, but not initiated), 1 means "sent" state (sent()
method has yet to execute), 2 means "sent" state (wait for data to be returned), 3
means a state in the process of receiving data, and 4 means the data has been received
(has finished receiving it). This property reports the value. status A status code
indicating the overall status of the XMLHttpRequest object's data request, where a
value of 200 indicated that everything went well. (Any other value indicates that
something has gone awry.) responseText Stores text data returned by the web server.
responseXML Stores XML data returned by the web server.
?
page 6 of 21
onreadystatechange Takes a function and calls on it to execute whenever the
readystatechange event occurs. For an example of use, see below. How does it work 1.
Instantiating To cover IE 5 or 6, the ActiveXObject should be included. var Request =
false; if (window.XMLHttpRequest) { Request = new XMLHttpRequest(); }else if
(window.ActiveXObject) { Request = new ActiveXObject("Microsoft.XMLHTTP"); } -------
or-------------var Request = false; try { Request = new XMLHttpRequest(); //Try
Firefox, Safari, Opera, etc. } Catch(e) { Request = new ActiveXObject
("Microsoft.XMLHTTP");//Try ActiveX(IE) } 2. Checking if a valid XMLHttpRequest has
been successfully instantiated and Opening a New Connection. syntax for opening a
connection. open("method", "url" [, asyncFlag [, username [, password]]]) method -->
the http method to be used to establish a connection with the web server ("GET" for
retrieving a moderate amount of data, "POST" for large amounts of data) url --> The URL
of the file to be opened on the web server. It can be absolute (exact location) or
relative (only a file name, in the same location as the application.) asyncFlag --> An
optional value that when set to true (default) sets up an asynchronous connection (a
value of false dictates a synchronous connection), as explained more below. userName -
-> An optional username if required by the web server password --> An optional password
if required by the web server. The XMLHttpRequest object always creates asynchronous
connections with the web server, unless you explicitly tell it not to by assigning a
value of false to asyncFlag.
example if(Request) { Request.open("GET", "Scores.txt"); . . . }
page 7 of 21
3. Setting an anonymous function. (Waiting for sever 's response) This function
automatically executes whenever there is the state of the request, allowing you to add
script statements designed to monitor and keep track of the progress of the
application's data request. Request.onreadystatechange = function() { if
(Request.readyState == 4 && Request.status == 200) { . . . } } 4. Specifying the type
of data that the application expects o receive (by using responseText or responseXML)
example RequestObj.innerHTML = Request.responseXML; 5. Submitting the request &
retrieving the data (executing send() method which initiates the download process.)
syntax send("string") When working with the "get" mode, the "string" value will always
be "null". <form> <input type ="button" value ="Answer is Here" onclick =
"retrieveANSWER('ANS1.txt', 'DivTarget')"> </form> <div id="DivTarget"> </div> The
button's onClick event handler passes the function two arguments. The first argument
specifies the name of a text file to be downloaded from the web server, and the second
argument specifies the id associated with a pair of <div> </div> tags located in the
body section where the contents of the text files will be displayed once processed by
the function.
?
page 8 of 21
Concurrently fetching multiple sets of data from the server. var Request1 = false; var
Request2 = false; if(window.XMLHttpRequest) { Request1 = new XMLHttpRequest(); Request2
= new XMLHttpRequest(); } else if (window.ActiveXObject) { Request1 = new
ActiveXObject("Microsoft.XMLHTTP"); Request2 = new ActiveXObject("Microsoft.XMLHTTP");
} or use an array instead------------------var aRequests = new Array(); if
(window.XMLHttpRequest) { aRequests.push(new XMLHttpRequest()); } else if
(window.ActiveXObject) { aRequests.push(new ActiveXObject("Microsoft.XMLHTTP")); }
Leveraging Ajax Frameworks A framework is a collection of programme code that is
designed to simplify application development. Ajax frameworks ¢ consist of collections
of JavaScript functions that you can call upon from within your applications. ¢ include
a sever-side component that includes program code that facilitates server-side database
searches and data manipulation and processing. ¢ range from very small libraries to
large, robust code libraries that provide everything needed to build complex
applications. ¢ range from small general-purpose frameworks (free download) to large
commercial libraries. (hundreds of types) ¢ allow incorporating pre-written JavaScript
functions into web pages and JavaScript code. ¢ popular : Yahoo!User Interface Library
(YUI) and Dojo
http://developer.yahooyui/ http://dojotoolkit.org ¢ Use the
framework:Extract files from the download locally or on a web server. Include <SCRIPT
TYPE="text/javascript" SRC="dojo/dojo.js"></SCRIPT> and you're on your way. ° copy the
code files that make up the framework to your web server ° then, add a reference to it
in your Ajax application using a statement like the one shown here: <script langauge =
"javascript" type = "text/javascript" src="cba.js"> . . </script>
?
page 9 of 21
¢ CBA is a small free framework (128 Kb)
http://crossbrowserajax.com download
"CBA.js" and upload it tothe same folder on your web server where your ajax
applications are stored. ¢ this is how to use it (from the cba_hm_page): <head> <script
src="cba.js"></script> </head> <span id="myElement"></span><a href="javascript://"
onClick=" cbaUpdateElement('myElement','userinfo.phpdata=mydata'); ">Update
myElement</a> This function (cbaUpdateElement) handles all communication with the web
server and makes sure that the text that is returned by the web server is dynamically
added to the web page. This helps significantly reducing the size and complexity of
your ajax applications. Designing the application 1. Create a new HTML page. 2. Create
the application's text files. 3. Create the application's JavaScript and defining
global variables. 4. Set up the XMLHttpRequest object. 5. Download and display the
game's challenge sentences. 6. Evaluate the player's score. Steps of writing Step 1 :
Writing the application's html. Step 2 : Creating the application's server-side text
files. Step 3 : Beginning work on the application's JavaScript. Step 4 : Instantiating
the XMLHttpRequest Object. Step 5 : Retrieving and displaying challenge sentences. Step
6 : Grading the results of the ajax typing challenge. Manipulate graphics ajax is
limited to working with text and XML, by using DHTML it can dynamically download and
display graphics. Text files have contents of images (change file extension of images
to .txt) The text that is downloaded is either a string of "frymo1.JPG" or
"frymo2.JPG". Finally, a new <img> tag is created and the value of the text string
downloaded from the server is appended to the tag. The new <img> tag is placed inside a
pair of <div> </div> tags. The end result of altering the web page DOM tree in this
manner is that the browser immediately downloads the graphic files specified in the new
<img> tags and displays them.
?
page 10 of 21
Work with PHP Ajax, a client-side programming tool, can interact with web server
programs that accept and process input provided by Ajax applications and then return
data for the Ajax application to process. Instead of getting "text file', it can get
the 'php file' (placed in the same folder). Advantage of php script: its capability of
performing all kinds of complex operations, like reading text files and retrieving data
from a server database. server-side programs can also process application data
retrieved from files and databases before returning it back to an ajax application.
Send data to web servers for processing Aj can be used to call upon a server-side php
script and pass it some data for processing. two options: 1. ) use XMLHttpRequest
object's open() method's GET option to call on server-side programs and pass them data
for processing results in URL-encoded data. ¢ URL encoding technique: data being sent
is appended to the end of the url string that is used to connect to the web server.
(The URL-encoded data is insecure and easily readable, so it is not a good option for
applications that have to deal with highly confidential data.) ¢ with '' before the
data, a 'data=value' format, a '&' to separate the multiple 'data=pair' arguments, and
a '+' replace those blank spaces. example: "http://mywebsertellstory.php
story=traveling+in+Thailand " (this can be done with JavaScript's escape method: x =
escape("traveling in Thailand") ¢ in the php script, $_GET array can be used to analyze
the argument passed to the program and execution is taken place. The Ajax application
captures the outputted text string returned by the php script and displays it in the
html page's <div></div> tags. 2. ) use open() method's POST option (sending encoded
data back to web server.) ¢ secure: data sent is internally encoded. ¢ not require "var
url = "options.phpcategory=" + category; (as in the case of "GET") ¢ instead, the php
is in "Request.open("POST", "option.php");" and "Request.setRequestHeader('Content-
Type', 'application/x-www-form-urlencoded');" ¢ change "Request.send(null);" to
"Request.send("category=" + category);" Executing server-supplied javascript ajax
application can download and execute javascript statements. ¢ download the text
representing the javascript statements and pass them to a JavaScript function named
'eval()'. The function then re-evaluates the text statements passed to it and executes
them as JavaScript statements. ¢ convenient, but if possible, do not use this. It's
good to make server-side programs independent of their client-side counterparts. ¢ It
may be used to create an Ajax application that works with any number of third-party web
services (Google Maps, Google suggest, etc). ¢ In Ajax: "if(Request.readyState == 4 &&
Request.status == 200) { eval(Request.responseText);" Example: This php script contains
a function named 'feedQuiz'.
?
page 11 of 21
Once downloaded, the JavaScript statement is passed to the eval() method, which
executes it. (There is a function named 'feedQuiz()' in the Ajax application that will
call upon it to execute. <php echo "feedQuiz('Which viruses are RNA viruses',
'Coronaviruses')"; > Google Suggestion 1. The web server returns the text string
consists of a JavaScript function named 'window.google.ac.Suggest_apply()' 2. syntax
window.google.ac.Suggest_apply(ignoreVar, keyword, aResults, aEmpty) 3. this function
name does not work in ajax application. Because based on the name of the function, the
browser is instructed to call upon the 'window' object's 'google' prperty and no such
property exits. To solve this, rename 'window.google.ac.Suggest_apply()' to the name of
a function in the ajax application prior to passing the web server's output string to
the JavaScript 'eval()' function. Design the application 1. create a new HTML page. 2.
Format the display of Google Suggest results using CSS. 3. Begin work on the
application's JavaScript and instantiating an XMLHttpRequest object. 4. Create a
function to capture user keystrokes and pass them to the application's PHP script. 5.
Process the list of terms returned by Google suggest. 6. Submit the term or phrase
selected by the user. 7. create the application's PHP file. Steps 1. Writing the
application's HTML. 2. Using CSS to control search results. (apply a background color,
width, and border style to the <div></div> tags. This should be under the
<title></title> tags in the head section. 3.Creating the application's JavaScript and
instantiating the XMLHttpRequest Object. (in head section) 4. Capturing and passing
along user keystrokes. (retrieve event data by using the 'window object's event
property' The javascript '' operator is used to evaluate and assign a value to
'keystroke'. The '' operator is one of the three logical Boolean operations supported
by JavaScript. Its purpose is to assign either of two possible values to a variable
based on the result of an evaluated condition, using the following syntax. var result =
condition value : alternativeValue; Example: var searchString = (keyStroke.target)
keyStroke.target : keyStroke.srcElement; 5. Processing the list of terms provided by
Google Suggest. (Use 'substr() function to remove the first 30 characters of the data
stored in the response string (e.g., window.google.ac.Suggest_apply). Next, the name of
the 'ProcessGoogleResults()' function is appended to the beginning of the string, which
is then processed by the eval() function. 6. Submitting the search term or phase
selected by the user.
?
page 12 of 21
The function 'ProcessGoogleResults()' is executed whenever the output string returned
from Google is evaluated and executed (as a JavaScript statement). 7. Creating the
application's PHP script. The 'google.php' is to pass the application's search string
to Google Suggest and to collect and return the results of that submission back to the
application for processing. (The security rules prevent browser applications from
directly accessing server programs (e.g, Google's server) that run on different
internet domains. This php script let your web server handle the exchange of
information on your behalf, server to server. (The 'fopen()' function is for submitting
your application's search term to Google Suggest and it stores the returned output in
the $objRef variable. The while loop then processes the contents of the data stored in
the variable by the 'fgets()" function retrieves each search term or phrase and and the
'echo' command returns them as text to the ajax application. After retrieving all the
output from Google, the 'fclose()' function disconnects to google and the execution is
halted. XML eXtensible Markup Language A general-purpose markup language for storing
and transporting (any amount of)data in a platformindependent manner. (organize the
different types of elements that make up documents.) Learn how to: ¢ create XML files ¢
basics of XML element syntax ¢ formulate XML tags that include text content and
optional attribute data (add attributes to XML tags). ¢ access the contents (access
attribute data) using Ajax. ¢ problem with white space and how to avoid. ¢ use
different JavaScript properties to navigate and extract data from XML files. XML's
rules ¢ have one root element ("document element") ¢ attributes ° in single or double
quotation marks ° appear once in an element tag. ¢ tag names ° cannot start with a
number. ° cannot include blank spaces or quotation marks ¢ all elements must be
properly nested. XML element syntax <openingtag attribute="value">content</ closingtag>
Use blank to separate attributes. 'content' represents optional text. Case-sensitive.
XML declaration is optional. <xml version = "1.0/1.1" encoding = "UTF-8"
standalone ="yes/no" >
page 13 of 21
There's no closing tag. standalone yes --> XML file has an internal DTD (document type
definition). no --> has a page link to an external DTD commenting: <!--->
XML elements with no content ("an empty element") can be written: <element1></element1>
or <element/> An empty element can contain any number of attributes: <element2
location="cityHall" phonenumber="055-261" /> These two attributes are separated by
"one" blank space. Types of elements (JavaScript properties that support XML DOM tree
access). KNOWING WHICH VALUES REPRESENT WHICH PROPERTIES IS ESSENTIAL. Value property
Description 1 NODE_ELEMENT Represents an element 2 NODE_ATTRIBUTE 3 NODE_TEXT 4
NODE_CDATA_SECTION 5 NODE_ENTITY_REFERENCE 6 NODE_ENTITY 7 NODE_PROCESSING_INSTRUCTION
8 NODE_COMMENT 9 NODE_DOCUMENT 10 NODE_DOCUMENT_TYPE 11 NODE_DOCUMENT_FRAGMENT 12
NODE_NOTATION Verifying an XML file. When loaded by web browsers, well-formed file will
have no errors. If errors are found, the file must be corrected before use. XML Trees
When browsers load XML files, they automatically convert them into logical collections
of related nodes (generate a logical tree representation). A document element node
contains a number of subnodes. The subnodes are children of the document element and
siblings to one another. Each of these child nodes also has a child node (text node).
of its own that contains text data. Access XML DOM tree with JavaScript properties
?
page 14 of 21
(to interact, navigate, and extract data from XML files.) Property Description
attributes Returns a list of attributes belonging to the node. documentElement Returns
a node's document element. parentNode Returns a node's parent node. childNodes Returns
an array listing all of a node's child nodes. firstChild Returns the first child
belonging to a node. lastChild Returns the last child belonging to a node. name Returns
a node's name. localName Returns a node's local name. nodeValue Returns a node's value.
nodeType Returns a node's type. nodeName Return a node's name. nextSibling Returns a
node's next sibling (based on its order in the XML DOM tree) previousSibling Returns a
node's previous sibling (based on its order in the XML DOM tree) Navigating XML files ¢
write a function named getData() to navigate and extract the text content in a
particular text node in an XML file. ° start with instantiating of XMLHttpRequest ° use
"GET" to download the "xml file" and assign a variable name to it. ° because some
browsers (Firefox, Safari) interpret blank space in xml files as an empty text node
(W3C Standards), a function named "ClearOutWhiteSpace()" is used to eliminate white
space. use a loop, with "if" to check the value of node's node type, if it is a text
node (value =3), use a regular expression and removeChild() method to remove the blank
space. ° set up an object reference to the document element. Use properties
"documentElement","firstChild", "nextSibling". ¢ To get data, use the property,
"nodeValue". If an object contains one or more attributes, you can set up an object
reference to those attributes using the attributes property. XML standard
specification: http://w3TR/REC-xml JSON (JavaScript Object Notation) ¢ easy to
learn ¢ use lists to access data ¢ drawback: Need to install a JSON library on the web
server for many languages (PHP, Perl, Ruby, and Java)
?
page 15 of 21
Design & steps 1. Create the application's XML files. 2. Create a new HTML page. 3. Get
started on the application's JavaScript. 4. Set up an instance of an XMLHttpRequest
object. 5. Develop the getXML() function. 6. Develop the ClearOutWhiteSpace() function.
7. Develop the checkAnswer() function. CSS ¢ introduced in 1997, not a formal Ajax
component, but it gives needed functionality. ¢ Advantages ° look and feel (color,
size, font, layout, etc) will be consistency throughout a web page. ° help reduce the
size of ajax applications (removing repetition simplify the script) ¢ basics of CSS
syntax ° names of styles and values are specified by English keywords. ° style sheets
consists of lists of rules Rules are comprised of one or more selectors and a
declaration block ¢ a declaration block is comprised of a list of declarations. ¢
selectors are used to specify the elements to which styles are applied. ¢ common CSS
properties ° font-family ° font-size ° font-stretch ° font-style ° font-weight ¢ common
text formatting properties ° color ° text-align ° text-indent ° text-decoration ° line
-height ° letter-spacing ° word-spacing ¢ common CSS color and background properties °
background-image (by specifying the image file url) ° background-color ° background-
repeat ° background-position ¢ properties for positioning of element (Absolute
positioning, use coordinates systems, the (0,0) is at the top left corner, to specify a
precise location. However, with different user's computer resolution,
?
page 16 of 21
size of coordinate system changes. Setting element's position to relative to other
elements will ensure a consistent look and feel. ) ° top (value in pixel) ° bottom
(value in pixel) ° left (value in pixel) ° right (value in pixel) ° position (absolute
or relative) ° z-index (numeric value, when elements overlap one another) ¢ inline
styles (CSS styles embedded in html tags) ¢ embedded styles (embed style rules inside
the <style> and </style> tags., related rules are grouped together. tag's id can be
specified and referred. If the latter block with conflicting property would override
the former block.) ¢ external styles. ° move the declaration blocks from your <style>
elements into an external file (without <style></style> tags) and save with file name
style.css ° use <Link rel="stylesheet" href="style.css"> in the html file (this reduces
the size of file) designing the application 1. assemble the application's external
style sheet. 2. put together the application's external text file. 3. Create a new html
page. 4. Start the application's JavaScript. 5. Develop the ProcessEvent () function.
6. Develop the getMouseData () function. 7. Develop the populateMenus () function. 8.
Develop the RemoveMenus () function. 9. Develop the DisplayMenu () function. 10.
Develop the ExecuteCommand () function. 11. Develop the StartPLay () function. 12.
Develop the AnswerQuestion () function. 13. Develop the ResetScreen () function. Ajax
and PHP PHP (hypertext preprocessor, 1995), an extremely popular server-based scripting
language, is capable of reading and writing files stored on web servers and working
with database management systems. Integrate PHP with html Create a php file with html
tags, and place the php statements within delimiter tags <php and > in the body
section. Store and retrieve data using variables and arrays ¢ "echo" (a little faster)
and "print" can be used in php to Return data (text, or xml) back (see an
example):
page 17 of 21
<php header ('Content-Type: text/xml'); echo '<xml version = "1.0" encoding="utf-8">';
echo '<dogs>; echo '<name>Sam</name>'; echo '<name>Miky</name>'; echo '</dogs>'; >
Commenting with // or # and, for multi-line comments, with opening delimiter /* and
closing delimiter */ PHP variables (beginning with "$" and the name:letters/numbers, or
underscores) for storing data, an example: $sum = 500; PHP arrays for collections of
data example: an array named "$aDrinks" $aDrinks[0] = "Coffee"; $aDrinks[1] = "Tea";
$aDrinks[2] = "CocaCola"; or,create using the array() function : $aDrinks = array("0"
=>"Coffee", "1" => "Tea", "2" => "CocaCola"); accessing the array contents: echo "The
second item stored in the array is: ". $aDrinks[1]; Note: PHP use "." as a
concatenation operator to concatenate strings and use "+" to add numeric values (While
in JavaScript, the "+" is used to concatenate either numbers or strings. PHP operators
for assigning data: Examples $x = 5; //x equals 5 $x = $x += 1; //x equals 6 $x = $x -=
1; //x equals 5 $x = $x *= 2; //x equals 10 $x = $x /= 2; //x equals 5 PHP arithmetic
operators: Examples $x = 5+1; //x equals 6 $x = $x-1; //x equals 5 $x = $x*5; //x
equals 25 $x = $x/5; //x equals 5
$x++; //x equals 6 $x--; //x equals 6
page 18 of 21
PHP operators for comparing values. == (equal to), != (not equal to), < (less than), >
(greater than), <= (less than or equal to), >= (greater than or equal to) PHP
conditional logic * if statement * else statement * else-if statement * switch
statement (To compare one value against a number of values) ¢ a ternary operator
(alternative to conditional logic) PHP's for loop has three parts: a variable
declaration, a tested condition, and an increment/decrement statement. PHP's foreach
loop It automatically processes the contents of arrays and other collections of data
without a need of knowing the number of the elements. PHP's while loop It repeats a
collection of stements as long as a tested condition remains true. PHP's "do...while"
loop It does not test its condition until the end of the loop. an example: <php $ i= 5
; do { echo $i . "<br>"; $i--; } while ($i < 3); > In the above example, it executes
once and returns "5" as a result. Then, it decrements the value by 1 and tests the
resulting value and stops the loop because of false. PHP's "break" keyword to halt the
loop and execute the following statement. PHP's "continue" keyword to "skip" an
iteration of a loop when certain situations occurs (No return for the skipped value).
PHP's $_GET global array is used to access incoming arguments when the open() method's
GET option is used to pass data to a PHP script.
?
page 19 of 21
PHP's $_POST global array is used to access incoming arguments when the open() method's
POST option is used to pass data to a PHP script. PHP: creating and accessing files:
fopen function syntax fopen(filename, mode) filename specifies the url of the file on
the web server. Mode Description r read only r+ read and write w write only (if not
existing, it's created.) w+ read and write (if not existing, it's created.) a append
mode for writing (if not existing, it's created.) a+ append mode for reading and
writing (if not existing, it's created.) X creates and opens a file for writing (if the
specified file exists, a value of false is returned.) X+ creates and opens a file for
reading and writing (if the specified file exists, a value of "false" is returned.)
PHP: writing and reading files: fwrite function: an example <body> <php $file = fopen
(mybook.txt", "w"); $data = "This year term time will start sooner than the last
term."; $data = $data."Due to the nationwide long holidays at the end of the year.";
$data = $data."to provide students enough time to study."; if (fwrite($file, $data) !=
true) { echo "errors occurs, the file cannot be written"; } fclose($file); > </body>
Reading using a while loop (iterate line by line) until the end of file, and use the
"fgets" method to retrieve a line from a file and store it in a variable named $data,
which is then displayed with "echo" function. <body> <php
$file = fopen(mybook.txt", "r"); while(!feof($file)){ $data = fgets($file); echo
$data."<br>"; } fclose($file); > </body>
page 20 of 21
Issues to think when designing an ajax application: 1. Some browsers do not support
JavaScript, including <noscript> Alternative message </noscript> will display this
message to the user. 2. Ajax disables back & forward buttons. 3. In some cases, desktop
applications are more preferable than ajax versions. 4. When making updates, do not
make unexpected changes on the page, but rather make it easy to identify by modifying
its background or foreground colors. 5. Bookmark will not save the current state, but
its initial state. 6. Lower the search engine relevancy ranking, because large amounts
of content are remained on web servers. To improve finding & indexing by spider, links
maybe left on the HTML original page, or put a page link to a hypertext page link sitemap, or
provide a static version. 7. Dynamic updates are not always easily noticed. It should
provide some type of visual indicator to notify users. Examples:
document.getElementById("DivTrgt").style.color="blue"; or document.getElementById
("DivTrgt").style.background-color="yellow"; 8. Instead of uploading user's information
immediately to web server, the application should wait until the form is completely
filled and satisfied. 9. Test the ajax application with different browsers. 10. Do not
build slow ajax applications. do not try to do all things that Ajax is capable of
doing, but use appropriate applications and request only needed data to run. (download
too much data can impact other network users by needlessly consuming network
bandwidth.) Provide a visual indicator by using an animated GIF file, like an hourglass
file, to indicate that a download is in progress. document.getElementById
("ImgTrgt").style.visibility="visible"; Once the download is done,use: if
(Request.readyState == 4 && Request.status == 200) { document.getElementById
("ImgTrgt").style.visibility="hidden"; } Other ways: changing the mouse pointer's
appearance, popping up a dialog window message, or displaying a message on browser's
status bar. 11. Client-side JavaScript is easily viewable and therefore inherently
insecure. The processing of sensitive info (IDs/passwords) should be moved to web
server and make sure that no such data makes it way into JavaScript code.
?
but a technique for creating better, faster, and more interactive web applications.
With AJAX, your JavaScript can communicate directly with the server, using the
JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with
a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP
requests) between the browser and the web server, allowing web pages to request small
bits of information from the server instead of whole pages. The AJAX technique makes
Internet applications smaller, faster and more user-friendly. AJAX is a browser
technology independent of web server software.
AJAX is Based on Web Standards
AJAX is
based on the following web standards:
¢ ¢ ¢ ¢
JavaScript XML HTML CSS
The web standards
used in AJAX are well defined, and supported by all major browsers. AJAX applications
are browser and platform independent.
AJAX is About Better Internet Applications
Web
applications have many benefits over desktop applications; they can reach a larger
audience, they are easier to install and support, and easier to develop. However,
Internet applications are not always as "rich" and user-friendly as traditional desktop
applications. With AJAX, Internet applications can be made richer and more user-
friendly.
AJAX Uses HTTP Requests
In traditional JavaScript coding, if you want to get
any information from a database or a file on the server, or send user information to a
server, you will have to make an HTML form and GET or POST data to the server. The user
will have to click the "Submit" button to send/get the information, wait for the server
to respond, then a new page will load with the results. Because the server returns a
new page each time the user submits input, traditional web applications can run slowly
and tend to be less user-friendly. With AJAX, your JavaScript communicates directly
with the server, through the JavaScript XMLHttpRequest object With an HTTP request, a
web page can make a request to, and get a response from a web server - without
reloading the page. The user will stay on the same page, and he or she will not notice
that scripts request pages, or send data to a server in the background.
The
XMLHttpRequest Object
By using the XMLHttpRequest object, a web developer can update a
page with data from the server after the page has loaded! AJAX was made popular in 2005
by Google (with Google Suggest). Google Suggest is using the XMLHttpRequest object to
create a very dynamic web interface: When you start typing in Google's search box, a
JavaScript sends the letters off to a server and the server returns a list of
suggestions. The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari
1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.
AJAX - Browser Support
The keystone
of AJAX is the XMLHttpRequest object. Different browsers use different methods to
create the XMLHttpRequest object. Internet Explorer uses an ActiveXObject, while other
browsers uses the built-in JavaScript object called XMLHttpRequest. To create this
object, and deal with different browsers, we are going to use a "try and catch"
statement. You can read more about the try and catch statement in our JavaScript
tutorial. Let's update our "testAjax.htm" file with the JavaScript that creates the
XMLHttpRequest object:
<html> <body> <script type="text/javascript"> function
ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new
XMLHttpRequest(); } catch (e)
{ // Internet Explorer try { xmlHttp=new ActiveXObject
("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { alert("Your browser does not support AJAX!"); return false; } } } }
</script> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input
type="text" name="time" /> </form> </body> </html>
Example explained: First create a
variable xmlHttp to hold the XMLHttpRequest object. Then try to create the object with
XMLHttp=new XMLHttpRequest(). This is for the Firefox, Opera, and Safari browsers. If
that fails, try xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") which is for Internet
Explorer 6.0+, if that also fails, try xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
which is for Internet Explorer 5.5+ If none of the three methods work, the user has a
very outdated browser, and he or she will get an alert stating that the browser doesn't
support AJAX. Note: The browser-specific code above is long and quite complex. However,
this is the code you can use every time you need to create an XMLHttpRequest object, so
you can just copy and paste it whenever you need it. The code above is compatible with
all the popular browsers: Internet Explorer, Opera, Firefox, and Safari.
AJAX - More
About the XMLHttpRequest Object
Before sending data to the server, we have to explain
three important properties of the XMLHttpRequest object.
The onreadystatechange Property
After a request to the server, we need a function that can receive the data that is
returned by the server. The onreadystatechange property stores the function that will
process the response from a server. The following code defines an empty function and
sets the onreadystatechange property at the same time:
xmlHttp.onreadystatechange=function()
{ // We are going to write some code here } The
readyState Property
The readyState property holds the status of the server's response.
Each time the readyState changes, the onreadystatechange function will be executed.
Here are the possible values for the readyState property: State 0 1 2 3 4 Description
The request is not initialized The request has been set up The request has been sent
The request is in process The request is complete
We are going to add an If statement to
the onreadystatechange function to test if our response is complete (this means that we
can get our data):
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) {
// Get the data from the server's response } } The responseText Property
The data sent
back from the server can be retrieved with the responseText property. In our code, we
will set the value of our "time" input field equal to responseText:
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) {
document.myForm.time.value=xmlHttp.responseText; } }
AJAX - Sending a Request to the
Server
To send off a request to the server, we use the open() method and the send()
method. The open() method takes three arguments. The first argument defines which
method to use when sending the request (GET or POST). The second argument specifies the
URL of the server-side script. The third
argument specifies that the request should be
handled asynchronously. The send() method sends the request off to the server. If we
assume that the HTML and ASP file are in the same directory, the code would be:
xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);
Now we must decide when the
AJAX function should be executed. We will let the function run "behind the scenes" when
the user types something in the username text field:
<form name="myForm"> Name: <input
type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text"
name="time" /> </form>
Our updated AJAX-ready "testAjax.htm" file now looks like this:
<html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp;
try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //
Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try
{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser
does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } }
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null); } </script> <form
name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" /> </form> </body> </html>
AJAX - The Server-Side
ASP Script
Now we are going to create the script that displays the current server time.
The responseText property (explained in the previous chapter) will store the data
returned from the server. Here we want to send back the current time. The code in
"time.asp" looks like this:
<% response.expires=-1 response.write(time) %>
Note: The
Expires property sets how long (in minutes) a page will be cached on a browser before
it expires. If a user returns to the same page before it expires, the cached version is
displayed. Response.Expires=-1 indicates that the page will never be cached.
http://w3schoolsajax/ajax_serversc ript.asp
Microsoft Office SharePoint 2007
and ASP.NET 2.0 AJAX 1.0 Web Part
Introduction
This article describes how to build your
first SharePoint 2007 Web part which supports ASP.NET 2.0 AJAX 1.0.
Software needed
¢
SharePoint Portal Server 2007 (installed with site collection created on port: 80)
¢ ¢ ¢
Visual Studio 2005 Visual Studio 2005 Extensions for SharePoint 2007 ASP.NET 2.0 AJAX
1.0
Using the code
First you need to configure your SharePoint Portal to support AJAX. To
do this, it is better to open a new AJAX web site in Visual Studio to pick a copy from
configuration sections in web.config, or you can copy from here, so let's start:
1. Add
the following part under: <configSections>
<sectionGroup name="system.web.extensions"
type="System.Web.Configuration.SystemWebExtensionsS ectionGroup, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> <sectionGroup
name="scripting" type="System.Web.Configuration.ScriptingSectionGrou p,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"> <section name="scriptResourceHandler"
type="System.Web.Configuration.ScriptingScriptRes ourceHandlerSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" requirePermission="false"
allowDefinition="MachineToApplication"/> <sectionGroup name="webServices"
type="System.Web.Configuration.ScriptingWebServices SectionGroup,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"> <section name="jsonSerialization"
?
type="System.Web.Configuration.ScriptingJsonSeria lizationSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"
/> <section name="profileService" type="System.Web.Configuration.ScriptingProfileSe
rviceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" requirePermission="false"
allowDefinition="MachineToApplication" /> <section name="authenticationService"
type="System.Web.Configuration.ScriptingAuthentic ationServiceSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" requirePermission="false"
allowDefinition="MachineToApplication" /> </sectionGroup> </sectionGroup>
</sectionGroup>
2. Add the following part under: <pages>
<controls> <add tagPrefix="asp"
namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> </controls> Add the following part
under : <compilation><assemblies> <add assembly="System.Web.Extensions,
Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> Add the
following part under: <httpHandlers> <add verb="*" path="*.asmx" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactor y, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add verb="*"
path="*_AppService.axd" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactor y, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add
verb="GET,HEAD" path="ScriptResource.axd"
type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
validate="false"/> Add the following part under: <httpModules> <add name="ScriptModule"
type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
3. At the end of web.config add the
following part under: <configuration>
<system.web.extensions>
4. <scripting>
<webServices>
<!-- Uncomment this line to enable the authentication service. Include
requireSSL="true" if appropriate. --> <!-<authenticationService enabled="true"
requireSSL = "true|false"/> --> <!-- Uncomment these lines to enable the profile
service.
To allow profile properties to be retrieved and modified in ASP.NET AJAX
applications, you need to add each property name to the readAccessProperties and
writeAccessProperties attributes. --> <!-<profileService enabled="true"
readAccessProperties="propertyname1,p ropertyname2"
writeAccessProperties="propertyname1, propertyname2" /> --> </webServices> <!-
<scriptResourceHandler enableCompression="true" enableCaching="true" /> -->
</scripting> </system.web.extensions> <system.webServer> <validation
validateIntegratedModeConfiguration="false"/> <modules> <add name="ScriptModule"
preCondition="integratedMode" type="System.Web.Handlers.ScriptModule,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/> </modules> <handlers> <remove
name="WebServiceHandlerFactoryIntegrated" /> <add name="ScriptHandlerFactory" verb="*"
path="*.asmx" preCondition="integratedMode"
type="System.Web.Script.Services.ScriptHandlerFac tory, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add
name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd"
preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFacto ry,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/> <add name="ScriptResource"
preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd"
type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> </handlers>
</system.webServer>
5. Before closing web.config we should add the AJAX controls dll to
SharePoint Safe Controls, so copy the following part under: <SafeControls>
<SafeControl
Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TypeName="*" Safe="True" />
6. It is time to include the AJAX script Manager to the master page. In my case, I've
included the script manager control in the default.master located in the following
path: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12
\TEMPLATE\GLOBAL
So, according to your portal template; locate the right master page
file or you can open the master page from the SharePoint Designer under _catalogs
folder. After you locate the master page file, open the file then put the following
line inside the top of <form> tag.
<asp:ScriptManager runat="server"
ID="ScriptManager1"> </asp:ScriptManager>
As shown below:
<form runat="server"
onsubmit="return _spFormOnSubmitWrapper();">
<WebPartPages:SPWebPartManager id="m"
runat="Server" /> <asp:ScriptManager runat="server" ID="ScriptManager1">
</asp:ScriptManager> <TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0
WIDTH="100%" HEIGHT="100%">
7. Finally it is time to write our code. Open a new web part
project from Visual Studio
2005, then add a reference of System.Web.Extensions to the
project and write the following code to web part code file:
Note: There is a SharePoint
Script included for changing the form action which may stop the form submission, so I
included the FixFormAction method which will reset the form action again
using using
using using using using using using using
System; System.Runtime.InteropServices;
System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts;
System.Xml.Serialization; Microsoft.SharePoint; Microsoft.SharePoint.WebControls;
Microsoft.SharePoint.WebPartPages;
namespace AjaxWebPart { [Guid("733ee261-6e34-49cf-
ae29-e8aeb4df4563")] public class AjaxWebPart :
System.Web.UI.WebControls.WebParts.WebPart { public AjaxWebPart() { this.ExportMode =
WebPartExportMode.All; } // ASP.NET Controls declaration private Label label; private
Label label2; private Label label3; private TextBox textBox1; private TextBox textBox2;
// ASP.NET AJAX Controls declaration protected UpdatePanel udatePanel; protected
UpdateProgress updateProgress; protected override void CreateChildControls() {
base.CreateChildControls(); // Fix Form Action this.FixFormAction(); udatePanel = new
UpdatePanel(); updateProgress = new UpdateProgress(); udatePanel.ID = "_UpdatePanel";
updateProgress.ID = "_UpdateProgress"; //Create Update Progress Template string
templateHTML = "<div><img alt= \"Loading...\" src=\"/_layouts/images/loader.gif\"/>
Loading...</div>"; updateProgress.ProgressTemplate = new ProgressTemplate
(templateHTML); updateProgress.AssociatedUpdatePanelID = udatePanel.ClientID;
udatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional; this.Controls.Add
(udatePanel); this.label = new Label(); this.label2 = new Label(); this.label3 = new
Label(); this.label.Text = "Enter 1st Number: "; this.label2.Text = "Enter 2nd Number:
";
this.textBox1 = new TextBox(); this.textBox1.ID = "TextBox1"; this.textBox2 = new
TextBox(); this.textBox2.ID = "TextBox2"; //Adding Controls
udatePanel.ContentTemplateContainer.Control s.Add(this.label);
udatePanel.ContentTemplateContainer.Control s.Add (this.textBox1);
udatePanel.ContentTemplateContainer.Control s.Add (new LiteralControl("<br />"));
udatePanel.ContentTemplateContainer.Control s.Add(this.label2);
udatePanel.ContentTemplateContainer.Control s.Add (this.textBox2); s.Add />"));
udatePanel.ContentTemplateContainer.Control (new LiteralControl("<br /><br Button
button = new Button(); button.Text = "Calculate"; button.Click += new EventHandler
(HandleButtonClick); udatePanel.ContentTemplateContainer.Control s.Add(button);
udatePanel.ContentTemplateContainer.Control s.Add (new LiteralControl(" "));
udatePanel.ContentTemplateContainer.Control s.Add(this.label3);
s.Add }
udatePanel.ContentTemplateContainer.Control (updateProgress);
private void
HandleButtonClick(object sender, EventArgs eventArgs) { //Just wait to see the progress
loader working System.Threading.Thread.Sleep(1000); this.label3.Text =
Convert.ToString(int.Parse(textBox1.Text) + int.Parse(textBox2.Text)); } //Fixing Form
Action private void FixFormAction () { if (this.Page.Form != null) { string
formOnSubmitAtt = this.Page.Form.Attributes["onsubmit"]; if(formOnSubmitAtt == "return
_spFormOnSubmitWrapper();") { this.Page.Form.Attributes["onsubmit "] =
"_spFormOnSubmitWrapper();"; } } ScriptManager.RegisterStartupScript (this, typeof
(AjaxWebPart), "UpdatePanelFixup", "_spOriginalFormAction = document.forms[0].action;
_spSuppressFormOnSubmitWrapper=true;", true); } } //Class for Building progress
tempales public class ProgressTemplate : ITemplate
{
private string template; public
ProgressTemplate(string temp) { template = temp; }
public void InstantiateIn(Control
container) { LiteralControl ltr = new LiteralControl(this.template);
container.Controls.Add(ltr); } } }
Then build the solution and deploy the web part from
Visual Studio to your portal. As you see, it is a simple web part to calculate the
summation of two integers.
http://codeprojectspoint/MossAjaxWebPart.asp?
df=100&forumi d=417786&exp=0&select=2045182
Download Ajax S/Ws :
1.Ajax Beta version
(dll)
http://ajax.schwarz-interactive.de/CSharpSample/ 2. Microsoft Asp .Net 2.0 Ajax
Extensions
http://aspajax/Default.aspx(Ajax Downloads)
Other Ajax Related links
**http://dotnet-friendsarticles/web/asp/csharp/62167d87-d1464948-8c02-
cc41d31946fe.aspx
http://weblogs.aspjan/archive/2007/02/26/new-version-of-
smartpartnow-with-ajax-connections.aspx (Communication through smart part)
http://codeprojectAjax/IntroAjaxASPNET.asp
**http://en.wikipediawiki/Ajax_(programming)
**http://w3schoolsajax/ajax_xmlfile.asp
http://dev2dev.beapub/a/2006/01/ajax-portal-1.html **
http://dotnet.org.za/zlatan/archive/2007...sharepoint-
2007.aspx http://codeprojectAjax/IntroAjaxASPNET.asp
**http://codeprojectuseritems/Ajax_Chat.asp
**http://sharepoint.microsoftblogs/mike/Lists/Posts/Post.aspx?ID=3 (with the
steps)
http://msdn2.microsoften-us/library/aa479042.aspx
