AJAX - A New Approach to Web Applications
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
computer science crazy
Super Moderator
******

Posts: 3,048
Joined: Dec 2008
#1
22-09-2008, 09:44 AM


Introduction


Web application designing has by far evolved in a number of ways since the time of its birth. To make web pages more interactive various techniques have been devised both at the browser level and at the server level. The introduction of XMLHttpRequest class in the Internet Explorer 5 by Microsoft paved the way for interacting with the server using JavaScript, asynchronously. AJAX, a shorthand for Asynchronous Java And XML, is a technique which uses this MLHttpRequest object of the browser features plus the Document Object Model and DHTML and provides for making highly interactive web applications in which the entire web page need not be changed by a user action, only parts of the page are loaded dynamically by exchanging information with the server. This approach has been able to enhance the interactivity and speed of the web applications to a great extent. Interactive applications such as Google Maps, Orkut, Instant Messengers are making extensive use of this technique. This report presents an overview of the basic concepts of AJAX and how it is used in making web applications.

Creating Web applications has been considered as one of the most exciting jobs under current interaction design. But, Web interaction designers can't help feel a little envious of their colleagues who create desktop software. Desktop applications have a richness and responsiveness that has seemed out of reach on the Web. The same simplicity that enabled the Web's rapid proliferation also creates a gap between the experiences that can be provided through web applications and the experiences users can get from a desktop application.
In the earliest days of the Web, designers chafed against the constraints of the medium. The entire interaction model of the Web was rooted in its heritage as a hypertext system: click the link, request the document, wait for the server to respond. Designers could not think of changing the basic foundation of the web that is, the call-response model, to improve on the web applications because of the various caveats, restrictions and compatibility issues associated with it.
But the urge to enhance the responsiveness of the web applications, made the designers take up the task of making the Web work the best it could within the hypertext interaction model, developing new conventions for Web interaction that allowed their applications to reach audiences who never would have attempted to use desktop applications designed for the same tasks. The designers' came up with a technique called AJAX, shorthand for Asynchronous Java And XML, which is a web development technique for creating interactive web applications. The intent of this is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability. AJAX is not a single new technology of its own but is a bunch of several technologies, each ourishing in its own right, coming together in powerful new ways.

What is AJAX?


AJAX is a set of technologies combined in an efficient manner so that the web application runs in a better way utilizing the benefits of all these simultaneously. AJAX incorporates:
1. standards-based presentation using XHTML and CSS;
2. dynamic display and interaction using the Document Object Model;
3. data interchange and manipulation using XML and XSLT;
4. asynchronous data retrieval using XMLHttpRequest;
5. and JavaScript binding everything together
Use Search at http://topicideas.net/search.php wisely To Get Information About Project Topic and Seminar ideas with report/source code along pdf and ppt presenaion
Reply
project report tiger
Active In SP
**

Posts: 1,062
Joined: Feb 2010
#2
09-02-2010, 12:40 AM

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 (francisshanahanzuggest.aspx),Dictionary:
ObjectGraph (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 (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 developer.yahooyui/ 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) 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: "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 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: 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 link to a hypertext 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.
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 and implimentation from Visual Studio
2005, then add a reference of System.Web.Extensions to the
project and implimentation 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("&nbsp;&nbsp;"));
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.
codeproject and implimentationspoint/MossAjaxWebPart.asp?
df=100&forumi d=417786&exp=0&select=2045182
Download Ajax S/Ws :
1.Ajax Beta version
(dll) ajax.schwarz-interactive.de/CSharpSample/ 2. Microsoft Asp .Net 2.0 Ajax
Extensions
aspajax/Default.aspx(Ajax Downloads)
Other Ajax Related links
**dotnet-friendsarticles/web/asp/csharp/62167d87-d1464948-8c02-
cc41d31946fe.aspx

weblogs.aspjan/archive/2007/02/26/new-version-of-
smartpartnow-with-ajax-connections.aspx (Communication through smart part)
codeproject and implimentationAjax/IntroAjaxASPNET.asp
**en.wikipediawiki/Ajax_(programming)
**w3schoolsajax/ajax_xmlfile.asp
dev2dev.beapub/a/2006/01/ajax-portal-1.html **
dotnet.org.za/zlatan/archive/2007/10/12/developing-ajax-webparts-in-sharepoint-
2007.aspx codeproject and implimentationAjax/IntroAjaxASPNET.asp
**codeproject and implimentationuseritems/Ajax_Chat.asp
**sharepoint.microsoftblogs/mike/Lists/Posts/Post.aspx?ID=3 (with the
steps) msdn2.microsoften-us/library/aa479042.aspx
Reply
computer science topics
Active In SP
**

Posts: 610
Joined: Jun 2010
#3
29-06-2010, 12:33 AM

AJAX
Abstract
Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page\'s interactivity, speed, and usability.Ajax incorporates: * standards-based presentation using XHTML and CSS. * dynamic display and interaction using the Document Object Model. * data interchange and manipulation using XML and XSLT. * asynchronous data retrieval using XMLHttpRequest. * and JavaScript binding everything together.
Use Search at http://topicideas.net/search.php wisely To Get Information About Project Topic and Seminar ideas with report/source code along pdf and ppt presenaion
Reply
project report helper
Active In SP
**

Posts: 2,270
Joined: Sep 2010
#4
06-10-2010, 05:23 PM


.ppt   ajax(2).ppt (Size: 993.5 KB / Downloads: 126)
AJAX - A New Approach

E.Soundararajan
SIRD, IGCAR


Introduction



Web application designing has by far evolved in a number of ways since the time of its birth. To make web pages more interactive various techniques have been devised both at the browser level and at the server level. The introduction of XMLHttpRequest class in the Internet Explorer 5 by Microsoft paved the way for interacting with the server using JavaScript, asynchronously. AJAX, a shorthand for Asynchronous Java And XML, is a technique which uses this MLHttpRequest object of the browser features plus the Document Object Model and DHTML and provides for making highly interactive web applications in which the entire web page need not be changed by a user action, only parts of the page are loaded dynamically by exchanging information with the server. This approach has been able to enhance the interactivity and speed of the web applications to a great extent. Interactive applications such as Google Maps, Orkut, Instant Messengers are making extensive use of this technique. This report presents an overview of the basic concepts of AJAX and how it is used in making web applications.

Creating Web applications has been considered as one of the most exciting jobs under current interaction design. But, Web interaction designers can't help feel a little envious of their colleagues who create desktop software. Desktop applications have a richness and responsiveness that has seemed out of reach on the Web. The same simplicity that enabled the Web's rapid proliferation also creates a gap between the experiences that can be provided through web applications and the experiences users can get from a desktop application.
In the earliest days of the Web, designers chafed against the constraints of the medium. The entire interaction model of the Web was rooted in its heritage as a hypertext system: click the link, request the document, wait for the server to respond. Designers could not think of changing the basic foundation of the web that is, the call-response model, to improve on the web applications because of the various caveats, restrictions and compatibility issues associated with it.
But the urge to enhance the responsiveness of the web applications, made the designers take up the task of making the Web work the best it could within the hypertext interaction model, developing new conventions for Web interaction that allowed their applications to reach audiences who never would have attempted to use desktop applications designed for the same tasks. The designers' came up with a technique called AJAX, shorthand for Asynchronous Java And XML, which is a web development technique for creating interactive web applications. The intent of this is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability. AJAX is not a single new technology of its own but is a bunch of several technologies, each ourishing in its own right, coming together in powerful new ways.

What is AJAX?

Reference: topicideashow-to-ajax-a-new-approach-to-web-applications#ixzz11ZvHldMz


for more :-

topicideashow-to-ajax-a-new-approach-to-web-applications
Reply
projectsofme
Active In SP
**

Posts: 1,124
Joined: Jun 2010
#5
12-10-2010, 03:09 PM

Web 2.0 & Asynchronous
Javascript and XML


Where are we?
Gliederung
Reply
project report helper
Active In SP
**

Posts: 2,270
Joined: Sep 2010
#6
02-11-2010, 01:42 PM

[/b]
.pptx   ajax.pptx (Size: 40.48 KB / Downloads: 53)
Ajax - ,AJAX - A New Approach to Web Applications

BY: Devavrata Sharma



What is Ajax

Uses combination of HTML and CSS .


Technologies involved

DOM
XML and XSLT
XMLHTTPRequest
JavaScript


Drawbacks

Browser back button doesn’t take you to the actual previous state.
Difficulty in Bookmark the pages.
If browser doesn’t support JavaScript and XMLHTTPRequest.
If huge number of request send to web-servers.


Reply
seminar class
Active In SP
**

Posts: 5,361
Joined: Feb 2011
#7
21-02-2011, 03:55 PM

presented by:
Akash K. Mehta


.doc   AJAX.doc (Size: 3.4 MB / Downloads: 59)
AJAX Asynchronous JavaScript and XML
Introduction

Making Web applications look and feel like desktop applications is what this book is all about — that’s what Ajax does. Although Web development is getting more and more popular, users still experience the nasty part of having to click a button, wait until a new page loads, click another button, wait until a new page loads, and so on. That’s where Ajax comes in. With Ajax, you communicate with the server behind the scenes, grab the data you want and display it instantly in a Web page — no page refreshes needed, no flickering in the browser, no waiting. That’s a big deal, because at last it lets Web applications start to look like desktop applications. With today’s faster connections, grabbing data from the server is usually a snap, so Web software can have the same look and feel of software on the user’s desktop. And that, in a nutshell, is going to be the future of Web programming — now the applications in your browser can look and work just like the applications installed on your computer. No wonder Ajax is the hottest topic to come along in years.
In this part . . .
This par introduces you to Ajax. You get a guided tour of the Ajax world here, and you get a chance to see how Ajax is used today. A good sampling of Ajax applications are on view in Chapter 1, just waiting for you to check them out for yourself so you can see what Ajax has to offer. From autocomplete and live searches to Google Maps, I pack a lot of Ajax in here. Next comes Chapter 2, which provides the JavaScript foundation that the rest of the book relies on. If you already know JavaScript, feel free to skip that material, but otherwise, take a look. Ajax is built on JavaScript, so you want to make sure you’ve got all the JavaScript you need under your belt before going forward.
Lets see one talking between two IT people……
We aren’t getting enough orders on our Web site,” storms the CEO.
“People just don’t like clicking all those buttons and waiting for a new page all the time. It’s too distracting.”
How about a simpler solution?” you ask. “What if people could stay on the same page and just drag the items they want to buy to a shopping cart? No page refreshes, no fuss, no muss.”
“You mean people wouldn’t have to navigate from page to page to add items to a shopping cart and then check out? Customers could do everything on a single Web page?”
“Yep,” you say. “And that page would automatically let our software on the server know what items the customer had purchased — all without having to reload the Web page.”
“I love it!” the CEO says. “What’s it called?”
“Ajax,” you say.
Welcome to the world of Ajax, the technology that lets Web software act like desktop software. One of the biggest problems with traditional Web applications is that they have that “Web” feel — you have to keep clicking buttons to move from page to page, and watch the screen flicker as your browser loads a new Web page. Ajax is here to take care of that issue, because it enables you grab data from the server without reloading new pages into the browser.
1.1 How Does Ajax Work?
With Ajax, Web applications finally start feeling like desktop applications to your users. That’s because Ajax enables your Web applications to work behind the scenes, getting data as they need it, and displaying that data as you want. And as more and more people get fast Internet connections, working behind the scenes to access data is going to become all the rage. Soon, it’ll be impossible to distinguish dedicated desktop software from software that’s actually on the Internet, far from the user’s machine. To help you understand how Ajax works, the following sections look at Ajax from a user’s and a programmer’s perspective.
1.2 A user’s perspective
To show you how Ajax makes Web applications more like desktop applications,I’ll use a simple Web search as an example. When you open a typical search engine, you see a text box where you type a search term. So say you type Ajax XML because you’re trying to figure out what XML has to do with Ajax. Then, you click a Search the Web button to start the search. After that, the browser flickers, and a new page is loaded with your search results. That’s okay as far as it goes — but now take a look at an Ajax-enabled version of Yahoo! search. To see for yourself, go to openricorico/ yahooSearch.page. When you enter your search term(s) and click Search Yahoo!, the page doesn’t refresh; instead, thesearch results just appear in the box,
That’s the Ajax difference. In the first case, you got a new page with search results, but to see more than ten results, a user has to keep loading pages. In the second case, everything happens on the same page. No page reloads, no fuss, no muss. You can find plenty of Ajax on the openrico.org Web site. If you’re inclined to, browse around and discover all the good stuff there.
1.3 A developer’s perspective
In the article “Ajax: A New Approach to Web Applications” (adaptive pathpublications/essays/archives/000385.php), Jesse James Garrett, who was the first to call this technology Ajax, made important insights about how it could change the Web. He noted that although innovative new project and implimentations are typically online, Web programmers still feel that the rich capabilities of desktop software were out of their reach. But Ajax is closing the gap.
So how does Ajax do its stuff? The name Ajax is short for Asynchronous JavaScript and XML, and it’s made up of several components:
 Browser-based presentation using HTML and Cascading Style Sheets (CSS)
 Data stored in XML format and fetched from the server.
 Behind-the-scenes data fetches using XMLHttpRequest objects in the browser
 JavaScript to make everything happen.
JavaScript is the scripting language that nearly all browsers support, which will let you fetch data behind the scenes, and XML is the popular language that lets you store data in an easy format. Here’s an overview of how Ajax works:
1. In the browser, you write code in JavaScript that can fetch data from the server as needed.
2. When more data is needed from the server, the JavaScript uses a special item supported by browsers, the XMLHttpRequest object, to send a request to the server behind the scenes — without causing a page refresh.
The JavaScript in the browser doesn’t have to stop everything to wait for that data to come back from the server. It can wait for the data in the background and spring into action when the data does appear (that’s called asynchronous data retrieval).
3. The data that comes back from the server can be XML (more on XML in Chapters 2 and 8), or just plain text if you prefer. The JavaScript code in the browser can read that data and put it to work immediately. That’s how Ajax works — it uses JavaScript in the browser and the XMLHttpRequest object to communicate with the server without page refreshes, and handles the XML (or other text) data sent back from the server. In Chapter 3, I explain how all these components work together in more detail. This also points out what you’ll need to develop Web pages with Ajax. You’ll add JavaScript code to your Web page to fetch data from the server (I cover JavaScript in Chapter 2), and you’ll need to store data and possibly write server-side code to interact with the browser behind the scenes. In other words, you’re going to need access to an online server where you can store the data that you will fetch using Ajax. Besides just storing data on the server, you might want to put code on the server that your JavaScript can interact with. For example, a popular server-side language is PHP, and many of the examples in this book show how you can connect to PHP scripts on Web servers by using Ajax. (Chapter 10 is a PHP primer, getting you up to speed on that language if you’re interested.) So you’re going to need a Web server to store your data on, and if you want to run server-side programs as
well, your server has to support server-side coding for the language you want to work with (such as PHP).
2 What Can You Do with Ajax?
The technology for Ajax has been around since 1998, and a handful of applications (such as Microsoft’s Outlook Web Access) have already put it to use. But Ajax didn’t really catch on until early 2005, when a couple of high-profile Web applications (such as Google Suggest and Google Maps, both reviewed later in this chapter) put it to work, and Jesse James Garrett wrote his article coining the term Ajax and so putting everything under one roof. Since then, Ajax has exploded as people have realized that Web software can finally start acting like desktop software. What can you do with Ajax? That’s what the rest of this chapter is about. Searching in real time with live searches One of the truly cool things you can do with Ajax is live searching, where you get search results instantly, as you enter the term you’re searching for. For example,
1.2. As you enter a term to search for, Ajax contacts Google behind the scenes, and you see a drop-down menuthat displays common search terms from Google that might match what you’re typing. If you want to select one of those terms, just click it in the menu. That’s all there is to it. You can also write an Ajax application that connects to Google in this way behind the scenes
Getting the answer with autocomplete
Closely allied to live search applications are autocomplete applications, which try to guess the word you’re entering by getting a list of similar words from the server and displaying them. You can see an example at paper mountaindemos/live, which appears in Figure 1-3. As you enter a word, this example looks up words that might match in a dictionary on the server and displays them, as you see in Figure 1-3. If you see
the right one, just click it to enter it in the text field, saving you some typing.

Reply
seminar class
Active In SP
**

Posts: 5,361
Joined: Feb 2011
#8
30-03-2011, 09:33 AM


.ppt   AJAX.ppt (Size: 1.01 MB / Downloads: 57)
AJAX
“JavaScript technology doesn’t suck, after all”
Rich User Experience
 Take a look at a typical desktop application (Spreadsheet app, etc.)
 The program responses intuitively and quickly
 The program gives a user meaningful feedback's instantly
• A cell in a spreadsheet changes color when you hover your mouse over it
• Icons light up as mouse hovers them
 Things happen naturally
• No need to click a button or a link to trigger an event
Characteristics of Conventional Web Applications
 “Click, wait, and refresh” user interaction
• Page refreshes from the server needed for all events, data submissions, and navigation
 Synchronous “request/response” communication model
• The user has to wait for the response
 Page-driven: Workflow is based on pages
• Page-navigation logic is determined by the server
Issues of Conventional Web Application
 Interruption of user operation
• Users cannot perform any operation while waiting for a response
 Loss of operational context during refresh
• Loss of information on the screen
• Loss of scrolled position
 No instant feedback's to user activities
• A user has to wait for the next page
 Constrained by HTML
• Lack of useful widgets
These are the reasons why Rich Internet Application (RIA) technologies were born.
 UI Technology Richness Scale
Rich Internet Application (RIA) Technologies
 Applet (Swing)
 Macromedia Flash
 Java WebStart
 DHTML
 DHTML with Hidden IFrame
 AJAX
AJAX
 Asynchronous JavaScript and XML
 AJAX is using JavaScript, namely the XmlHttpRequest object, to communicate asynchronously with a server-side component and dynamically update the source of an HTML page based on the resulting XML/Text response.
 DHTML plus Asynchronous communication capability through XMLHttpRequest
 Pros
• Most viable RIA technology so far
• Tremendous industry momentum
• Several toolkits and frameworks are emerging
• No need to download code & no plug-in required
 Cons
• Still browser incompatibility
• JavaScript is hard to maintain and debug
 AJAX-enabled JSF components will help
Why AJAX?
 Intuitive and natural user interaction
• No clicking required
• Mouse movement is a sufficient event trigger
 "Partial screen update" replaces the "click, wait, and refresh" user interaction model
• Only user interface elements that contain new information are updated (fast response)
• The rest of the user interface remains displayed without interruption (no loss of operational context)
 Data-driven (as opposed to page-driven)
• UI is handled in the client while the server provides data
 Asynchronous communication replaces "synchronous request/response model."
• A user can continue to use the application while the client program requests information from the server in the background
• Separation of displaying from data fetching
Real-Life Examples of AJAX Apps
 Google maps
• maps.google
 Goolgle Suggest
• googlewebhp?complete=1&hl=en
 NetFlix
• netflixBrowseSelection?lnkctr=nmhbs
 Gmail
• gmail
 Yahoo Maps (new)
• maps.yahoo
Many more are popping everywhere
Technologies Used In AJAX
 JavaScript
• Loosely typed scripting language
• JavaScript function is called when an event in a page occurs
• Glue for the whole AJAX operation
 DOM
• API for accessing and manipulating structured documents
• Represents the structure of XML and HTML documents
 CSS
• Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript
 XMLHttpRequest
• JavaScript object that performs asynchronous interaction with the server
XMLHttpRequest
 JavaScript object
 Adopted by modern browsers
• Mozilla™, Firefox, Safari, and Opera
• Communicates with a server via standard HTTP GET/POST
 XMLHttpRequest object works in the background for performing asynchronous communication with the backend server
• Does not interrupt user operation
Server-Side AJAX Request Processing
 Server programming model remains the same
• It receives standard HTTP GETs/POSTs
• Can use Servlet, JSP, JSF, ...
 With minor constraints
• More frequent and finer-grained requests from client
• Response content type can be
 text/xml
 text/plain
 text/json
 text/javascript
 AJAX: Sample App
Steps of AJAX Operation
 1.A client event occurs
 2.An XMLHttpRequest object is created
 3.The XMLHttpRequest object is configured
 4.The XMLHttpRequest object makes an async. request
 5.The ValidateServlet returns an XML document containing the result
 6.The XMLHttpRequest object calls the callback() function and processes the result
 7.The HTML DOM is updated
XMLHttpRequest Properties
 onreadystatechange
• Set with an JavaScript event handler that fires at each state change
 readyState – current status of request
• 0 = uninitialized
• 1 = loading
• 2 = loaded
• 3 = interactive (some data has been returned)
• 4 = complete
 status
• HTTP Status returned from server: 200 = OK
XMLHttpRequest Properties
 responseText
• String version of data returned from the server
 responseXML
• XML document of data returned from the server
 statusText
• Status text returned from server
Reply
seminar paper
Active In SP
**

Posts: 6,455
Joined: Feb 2012
#9
14-02-2012, 12:55 PM

to get information about the topic web application full report ,ppt and related topic refer the link bellow

topicideashow-to-web-application-project and implimentation

topicideashow-to-ajax-a-new-approach-to-web-applications

topicideashow-to-ajax-a-new-approach-to-web-applications?page=2

topicideashow-to-finding-bugs-in-web-applications-using-dynamic-test-generation-and-explicit-state-mod

Reply

Important Note..!

If you are not satisfied with above reply ,..Please

ASK HERE

So that we will collect data for you and will made reply to the request....OR try below "QUICK REPLY" box to add a reply to this page

Quick Reply
Message
Type your reply to this message here.


Image Verification
Please enter the text contained within the image into the text box below it. This process is used to prevent automated spam bots.
Image Verification
(case insensitive)

Possibly Related Threads...
Thread Author Replies Views Last Post
  web spoofing full report computer science technology 13 8,922 20-05-2016, 11:59 AM
Last Post: Dhanabhagya
  web image re-ranking using query-specific semantic signatures ppt jaseelati 0 249 02-03-2015, 01:23 PM
Last Post: jaseelati
  web operating system seminar jaseelati 0 308 17-02-2015, 02:20 PM
Last Post: jaseelati
  web enabled automated manufacturing system jaseelati 0 211 13-01-2015, 02:34 PM
Last Post: jaseelati
  web based claim processing system pdf jaseelati 0 361 10-01-2015, 02:34 PM
Last Post: jaseelati
  nanochemistry applications ppt jaseelati 0 258 18-12-2014, 02:11 PM
Last Post: jaseelati
  embedded web technology ppt jaseelati 0 497 16-12-2014, 04:34 PM
Last Post: jaseelati
  Calling a Web Service from an ASP.NET Web Page ppt study tips 1 526 19-10-2014, 11:24 PM
Last Post: LICjKYTCf
  Computer Science and Applications seminar ideas 2 6,675 20-03-2014, 04:28 PM
Last Post: navasfiroz
  Intrusion Detection: An Energy Efficient Approach in Heterogeneous WSN pdf study tips 1 932 09-02-2014, 05:40 PM
Last Post: Guest