Web Technology

Easy steps to develop application using Ajax.NET Pro Library

2009-07-22T05:48:00.000-07:00

Preparing your application to use the Ajax.NET Pro library requires the following steps:

1. First, you have to set up your ASP.NET application to be Ajax.NET Pro–enabled. This is done with the reference being set to the AjaxPro.dll assembly.

2. Second, you must modify your Web.Config file to register the AjaxPro.AjaxHandlerFactory to process all the AjaxPro/*.ashx requests.

3. Now that your application is Ajax.NET Pro–enabled, you’re ready to build some Ajax functionality into your pages. On the page level, register your page class with the AjaxPro.Utility

.RegisterTypeForAjax() method.

4. Then decorate your methods with the AjaxPro.AjaxMethod() attribute.

5. Finally, the Ajax.NET Pro library will create a JavaScript proxy object for you that follows the ClassName.MethodName() naming convention. Just add a little client UI and JavaScript to activate your server response, and your application is running on Ajax fuel.

Google vs. Microsoft: What you need to know

2009-07-16T11:05:00.000-07:00

Its enough to know about competition between Google and Microsoft...

http://edition.cnn.com/2009/TECH/07/15/google.microsoft.battle/index.html

AJAX.NET Professional Library Example

2009-07-01T05:40:00.000-07:00

Get total project example for AJAX.NET Professional Library

Test here. https://www.box.net/shared/157l2cjb9s

AJAX.Net Professional Library

2009-07-01T02:59:00.000-07:00

1. Download AJAX Professional Library for Microsoft.NET 1.1

https://www.box.net/shared/eneh48e5zl

2. Download AJAX Professional Library for Microsoft.NET 2.0

https://www.box.net/shared/9cy1qxb3h8

3. Download AJAX Professional JSON Library for Microsoft.NET 1.1

https://www.box.net/shared/x1pdo1b3xz

4. Download AJAX Professional JSON Library for Microsoft.NET 2.0

https://www.box.net/shared/255mva92s7

You need to configure your web site with the web.config file as following.

https://www.box.net/shared/vja1s5ohrv

JavaScript Prototype Framework 1.6.0.3 (updated version)

2009-07-01T02:46:00.000-07:00

You can get a nice overview of JavaScript Prototype Framework here.

http://www.sergiopereira.com/articles/prototype.js.htm l

You can get the prototype 1.6.0.3.js directly from here.

https://www.box.net/shared/aqskzcb0m4

AJAX.NET Professional Library setup quick guide

2009-06-22T04:48:00.000-07:00

AJAX .Net Wrapper quick usage guide

Step 1 -
Create a reference to the ajax.dll file.
Download it from the link - https://www.box.net/shared/pzefg8bg4f

Step 2 -
Set up the HttpHandler In the web.config, set up the HttpHandler, like:

(configuration)
(system.web)
(httpHandlers)
(add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /)
(/httpHandlers)
...
(system.web)
(/configuration) ----**

Step 3 -
In the Page_Load event, call the following function:

'vb.net
Public Class Index
Inherits System.Web.UI.Page

Private Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Ajax.Utility.RegisterTypeForAjax(GetType(Index))
'...
end sub
'...
End Class

//C#
public class Index : System.Web.UI.Page{
private void Page_Load(object sender, EventArgs e){
Ajax.Utility.RegisterTypeForAjax(typeof(Index));
//...
}
//...
}

Step 4 -
In the codebehind of your page, add functions (like you normally would) that you'd like to be able to asynchrounsly called by client-side scripting. Mark these functions with the Ajax.JavascriptMethodAttribute():

//C#
[Ajax.AjaxMethod()]
public int ServerSideAdd(int firstNumber, int secondNumber)
{
return firstNumber + secondNumber;
}

'VB.Net
_
Public Function ServerSideAdd(ByVal firstNumber As Integer, ByVal secondNumber As Integer) As Integer
Return firstNumber + secondNumber
End Function

The wrapper will automatically create a JavaScript function named "ServerSideAdd"
which accepts to parameters. When called, this server-side function will be called and the result returned.

Step 5 -
Using JavaScript, you can invote the ServerSideAdd function like you would any other JavaScript function. You can call it using the two parameters, or optionally pass a call back function. The name of the function is, by default,

(name of class).(name of server side function) --- **

such as Index.ServerSideAdd:

alertIndex.ServerSideAdd(100,99));

OR

Index.ServerSideAdd(100,99, ServerSideAdd_CallBack);

function ServerSideAdd_CallBack(response){alert(response.value);}

The response exposes three properties, error, value and request.
Note that you can return more complex objects that simple types.

---** You need to use "<" instead of "(" and ">" instead of ")".

Advanced Javascript: Objects, Arrays, and Array-Like objects

2009-06-20T20:21:00.000-07:00

Earlier in this tutorial we have seen that JavaScript has several built-in objects, like String, Date, Array, and more. In addition to these built-in objects, you can also create your own.An object is just a special kind of data, with a collection of properties and methods.Let's illustrate with an example: A person is an object. Properties are the values associated with the object. The persons' properties include name, height, weight, age, skin tone, eye color, etc. All persons have these properties, but the values of those properties will differ from person to person. Objects also have methods. Methods are the actions that can be performed on objects. The persons' methods could be eat(), sleep(), work(), play(), etc.

http://nfriedly.com/techblog/2009/06/advanced-javascript-objects-arrays-and-array-like-objects/

Asynchronous client script callbacks trip Overview

2009-06-08T10:04:00.000-07:00

Client/Browser

1. Web page first requested

Web Server/Server Side

2. Event Reference generated via GetCallbackEventReference method.
3. StartAsyncCall Javascript method constructed and registered on page via RegisterClientScriptBlock method.

Client/Browser
4. Web page displayed to user (Contains Javascript code to initiate async callback event)
5. Invoke async callback via StartAsyncCall Javascript method

Web Server/Server Side
6. RaiseCallbackEvent method is tiggered, passing in the arg parameter.
7. GetCallbackResult method is triggered, returning a string result to the client/browser.

Client/Browser
8. Executes the OnServerCallComplete Javascript method, passing the result of the GetCallbackResult method as arg and the call context as ctx.
9. Update browser display with results of async callback.

Note: Here
StartAsyncCall is a JavaScript function in Serverside
OnServerCallComplete is a JavaScript function in client side.
GetCallbackResult and RaiseCallbackEvent methods are the members for ICallbackEventHandler Interface.

Asynchronous client script callbacks

2009-06-07T22:11:00.000-07:00

ASP.NET 2.0 contains a technology called Asynchronous Client Script Callbacks, or simply callbacks for a shortened name. As the name suggests, this offers the ability for ASP.NET to directly support the inclusion of JavaScript code that enables asynchronous calls to the server for processing—that is, to execute a server method asynchronously from within the browser and have ASP.NET instruct the browser to execute a JavaScript callback method when the server method completes.

How its protential for your own application?

The answer is twofold.

❑ First, there is a newly introduced interface named the ICallbackEventHandler interface.

There is another interface called the ICallbackContainer interface that indicates that a class

can generate its own script to invoke a callback, but it is not the primary interface used when

dealing with Asynchronous Client Script Callbacks and will be detailed later in this chapter.

❑ Second, in a change from ASP.NET 1.0/1.1, all client scripting functions are now housed in a

client script object (which is of type System.Web.UI.ClientScriptManager) that exists as a

member within every ASP.NET page object. This houses the required functions to support the

client-side generation and manipulation of JavaScript code, in particular to work in conjunction

with your server-side methods to be called asynchronously.

What is ICallbackEventHandler Interface?

The ICallbackEventHandler interface is the primary mechanism for enabling pages or controls to

participate in the Asynchronous Client Script process. By implementing this interface within a control or page, server code can generate the relevant JavaScript code that allows asynchronous interaction between the client browser and the server. This interface has two methods associated with it:

Interface Method/Description

string GetCallbackResult( ); / This method returns the result of the callback event/asynchronous call to the client browser.

void RaiseCallbackEvent(string eventArgument); / The method that is called asynchronously to handle the callback event. The eventArgument parameter contains any data passed in via the callback event/method.

A web control or web page that intends to provide support for Asynchronous Client Script Callbacks needs to implement this interface and provide implementations for the two interface methods described in the preceding table.

The reason there are two methods is to provide support for asynchronous datasources, a new feature in .NET 2.0. An asynchronous datasource will typically initiate a request to get data and then, at some later stage, process the results of the initial call when they become available. Having two methods to deal with asynchronous callbacks from the client provides this server-side support for asynchronous datasources.

These events are central to all callback events. This means that if a page implements this interface in order to act as the recipient for Asynchronous Client Script Callback events, the RaiseCallbackEvent method will be invoked for all client script callbacks defined within the page, whether one or one hundred. This has implications for complex situations where you have multiple ways of triggering a callback method from the client and multiple types of data associated with each event that are passed with each call. This will become more apparent as you examine some more complex scenarios that utilize Asynchronous Client Script Callback functionality.

For more information please visit -

"http://www.simple-talk.com/dotnet/asp.net/asynchronous-client-script-callbacks/"

"http://www.simple-talk.com/content/print.aspx?article=200"

"http://msdn.microsoft.com/en-us/magazine/cc163941.aspx"

"http://www.codeproject.com/KB/aspnet/ClientCallbackByNasirAliKhan.aspx?display=Print"

What is RSS?

2009-06-03T05:04:00.000-07:00

RSS (Really Simple Syndication) is a format used to deliver information from websites and pages that get updated regularly. An RSS document (which is called feed) contains either a summary or the full content from a website.

The main benefit of RSS is that it enables people to stay connected with their favorite websites without having to visit them. Once you subscribe to a particular RSS feed, you will automatically receive updates from the website that publishes the feed, whenever they release new content. The video below illustrates the process.

Before you start subscribing to the RSS feeds of your favorite sites you will need to have an RSS reader. Below you will find a list of web-based and free RSS readers that you can use:

Google Reader

Bloglines

Newsgator

Once you have your RSS reader working you can just head to your favorite website and subscribe by clicking on the RSS icon. Notice that most recent web browsers already identify RSS feeds, so you will be able to see the RSS icon ( ) both on the Navigation Bar of your browser and on the page itself, as the screenshot below illustrates.

Once you click on the RSS icon or on a “Subscribe” link you will be redirected to a page with instructions on how to subscribe to that particular RSS feed using your RSS reader. Usually it is a matter of two clicks.Sometimes you might end up seeing a strange page with several lines of code. That is the raw XML file of the RSS feed, and in order to subscribe to that feed you will need to copy the URL and paste it on your RSS reader, after clicking on “Add subscription” or similar.

The image above illustrates the standard look of an RSS reader. As you can see you will have a sidebar listing all your subscriptions (organized or not into folders and sub-folders) and a main area that will display the content of the subscriptions. This structure enables you to read the content of websites and news feeds much more efficiently, since you can access and manage them from a single location.

Now you are ready to start using RSS feeds from all over the Internet! If you want to know more about it just check the Wikipedia entry for RSS.

How can we access Web Service?

2009-06-01T19:22:00.000-07:00

First you construct a simple user interface to facilitate this:

This HTML document simply contains two text fields that accept the integer arguments and a button to calculate

the result of the addition of the two arguments. The button contains an onclick handler, which

points to a JavaScript function. This function will execute your asynchronous call to your web service.

Next, have a look at the code of your web service, which is extremely simple and should be very familiar

to all developers who have created web services. The web service itself was created using the endpoint

of AsyncService.asmx and contains a method, more specifically a WebMethod, called Adder:

using System;

using System.Collections;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

///

/// Summary description for AsyncService

///

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

// [System.Web.Script.Services.ScriptService]

public class AsyncService : System.Web.Services.WebService {

public AsyncService () {

//Uncomment the following line if using designed components

//InitializeComponent();

}

[WebMethod]

public string HelloWorld() {

return "Hello World";

}

[WebMethod]

public int Adder(int arg1, int arg2)

{

return arg1 + arg2;

}

Finally, examine the client-side code to call the web service shown previously:

function ExecWebService()

{

if (xmlHttpObj)

{

var disp = document.getElementById("spnDetailDisplay");

var ctlVal1 = document.getElementById("val1");

var ctlVal2 = document.getElementById("val2");

// We want this request synchronous

xmlHttpObj.open("POST","http://" + location.host +"/Test/AsyncService.asmx/Adder", true);

xmlHttpObj.onreadystatechange = function()

{

if (xmlHttpObj.readyState == 4)

{

// If the request was ok (ie equal to a Http Status code of 200)

if (xmlHttpObj.status == 200)

{

var xmlDoc = xmlHttpObj.responseXML;

var result = xmlDoc.lastChild.childNodes[0].nodeValue;

disp.childNodes[0].nodeValue = "Result: " + result;

}

else

{

var fault = xmlHttpObj.responseText;

alert("Error Occurred! \n\n" + fault);

}

// Execute the request

xmlHttpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlHttpObj.send("arg1=" + ctlVal1.value + "&arg2=" + ctlVal2.value);

}

HTTP Handlers Overview

2009-06-01T18:41:00.000-07:00

Amore typical approach to handling these requests is to use an HTTP handler. Ahandler has the ability to

respond to requests with more direct control over the response data. Essentially, an HTTP handler exists

very early in the ASP.NET processing pipeline and can deal directly with requests without having to worry

about HTML data being generated by the page and the unnecessary burden of the entire page lifecycle.

Additionally, the handler need not be concerned with having the initial request be a properly formed page

but can instead have it be a custom formatted message that has meaning within the context of your application.

Often, this is an XML document used to transfer data between the client and the server.

Using a HTTP Handler

To demonstrate the use of a HTTP handler to accept arguments sent from an XMLHttpRequest object,

you first define the user interface within the web page, as shown in the following code. This simply

shows a drop-down list with a list of three customers. When one of the customers is selected, that customer

ID is used as part of the asynchronous request to request a specific set of data pertaining to that

customer’s details only:

You also provide an implementation of the JavaScript function named LoadCustomer() referenced in

the onchange attribute of the select element as follows:

function LoadCustomers()

{

var xmlHttpObj;

xmlHttpObj= CreateXmlHttpRequestObject();

if (xmlHttpObj)

{

xmlHttpObj.open("GET","http://" + location.host + "/Test/DataFile.xml", false);

xmlHttpObj.send(null)

// If the request was ok (ie. equal to a Http Status code of 200)

if (xmlHttpObj.status == 200)

{

var xmlDoc = xmlHttpObj.responseXML;

// Our list of nodes selected using the X Path argument

//var nodes = xmlDoc.selectNodes(“//Customers/Customer”);

var nodes = xmlDoc.selectNodes("//Customers/Customer/Lastname/text()");

// Obtain a reference to the select drop list control.

var ctrl = document.getElementById("ddlCustomers");

for (var i=0; i less then nodes.length; i++)

{

// Get the lastname element from our XML data document

var lastName = nodes[i].nodeValue;

// Create a new node.

var htmlCode = document.createElement('option');

// Add the new node to our drop list

ctrl.options.add(htmlCode);

// Set the display text and value;

htmlCode.text = lastName;

htmlCode.value = lastName;

}

else

{

alert('There was a problem accessing the Customer data on the server.!');

}

Finally, the implementation of the server-side HTTP handler itself is shown in the following code block.

This is the handler that receives the asynchronous call from your XMLHttpRequest object, extracts the

customer number or ID, and then uses that to return an XML document containing only that customer’s

name and email address. This code resides within the AsyncRequestHandler.ashx file.

using System;

using System.Web;

public class AsyncRequestHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

// Grab the URL parameters

string param = context.Request.QueryString["arg"];

const string xmlData = @"

{0}{1}";

string returnXML = null;

switch (param)

{

case "1":

returnXML = string.Format(xmlData, "Big Bob", "big@bob.com");

break;

case "2":

returnXML = string.Format(xmlData, "Small Sammy","small@sammy.com");

break;

case "3":

returnXML = string.Format(xmlData, "Large Larry","large@larry.com");

break;

}

context.Response.ContentType = "application/xml";

context.Response.Write(returnXML);

}

public bool IsReusable {

get {

return false;

}

Document Object Model (DOM) Overview

2009-06-01T17:19:00.000-07:00

Definition:

Document Object Model (DOM), a programming interface specification being developed by the World Wide Web Consortium (W3C), lets a programmer create and modify HTML pages and XML documents as full-fledged program objects. Currently, HTML (Hypertext Markup Language) and XML (Extensible Markup Language) are ways to express a document in terms of a data structure. As program objects, such documents will be able to have their contents and data "hidden" within the object, helping to ensure control over who can manipulate the document. As objects, documents can carry with them the object-oriented procedures called methods. DOM is a strategic and open effort to specify how to provide programming control over documents. It was inspired in part by the advent of the new HTML capabilities generally called dynamic HTML and as a way to encourage consistent browser behavior with Web pages and their elements.

The Document Object Model offers two levels of interface implementation: DOM Core, which supports XML and is the base for the next level, and DOM HTML, which extends the model to HTML documents. Here are some highlights:

Any HTML or XML element (with the possibility of a few exceptions) will be individually addressable by programming.
The specification will be language-independent. The specification, when available, will be described using the interface definition language (IDL) from the industry open standard CORBA.
In addition, the interface will be described in terms of the Javaprogramming language and ECMAScript, an industry-standard scriptlanguage based on JavaScript and JScript.
DOM is not to be confused with Microsoft's Component Object Model(COM) or Distributed Component Object Model (DCOM). COM and CORBA are language-independent ways to specifiy objects and could be used to create DOM objects (documents) just as specific languages like Java could.

Progress of the Document Object Model specification can be followed at the W3C Web site.

Overview:

To manipulate an XML document you first load it into your computer's memory using an XML parser. As stated above, the parser discussed here it the Msxml parser from Microsoft. Once the XML document is loaded, its data can be manipulated using a DOM.

A DOM treats the XML document as a tree. The DocumentElement is the top or root of the tree. This root element can have one or more child nodes which represent the branches of the tree.

The four main objects exposed by a DOM are the DOMDocument, XMLDOMNode, XMLDOMNodeList and XMLDOMNamedNodeMap which are all discussed below in subsequent sections.

For most XML documents, the most common types of nodes are element, attribute, and text. Attributes differ from the other node types because they are not considered child nodes of a parent. A separate programming interface, the XMLDOMNamedNodeMap, is used for attributes.

Creating a DOM:

Using the XML DOM begins when you create a DOMDocument object. You can then load, parse, navigate, and manipulate XML files. The VB code to create a DOMDocument is:

Dim xmlDoc = New DOMDocument

Loading and Saving Data:

Use the Load or LoadXML methods to load an XML file into the DOM. The load method uses a path or url to an XML file. The loadXML method loads a string containing the XML data. After loading, XMLDoc, contains a tree consisting of the parsed contents of reports.xml.

xmlLDoc.load("http://xmlfiles/reports.xml")
xmlDoc.load("c:\temp\reports.xml")

xmlDoc.loadXML("Joe
Smith")

To save a parsed XML document to a file use the Save method. Save can take a file name as a string.

xmlDoc.save("c:\temp\reports.xml")

Load and Parse Flags:

File loading and parsing is done asynchronously by default. This means your app is free to do other work while the file is being loaded. Also by default, any well formed XML document can be loaded.

You can change this behavior by setting a few properties. Here, the XML is loaded synchronously, and validated against a DTD. Also, any external references in the DTD are resloved.

xmlDoc.async = False
xmlDoc.validateOnParse = True
xmlDoc.resolveExternals = True
xmlDoc.load("reports.xml")

Accessing Document and Error Information:

You can retrieve the DTD used by the XML document, the path or URL of the file that was loaded and a string containing the entire contents of the XML document.

You can also get detailed information on errors that occurred during parsing.

Dim mydoctype as IXMLDOMDocumentType

xmlDoc.load("reports.xml")

Set MyDocType = xmlDoc.doctype
MsgBox (mydoctype.name)      'Display the DTD used.
MsgBox (xmlDoc.url)               'Path or url of the XML file.

If xmlDoc.parseError.errorCode <> 0 Then
    MsgBox ("A parse error occurred.")
Else
    MsgBox xmlDoc.documentElement.xml    'Display the actual XML data.
End If

Here is some more error information that is available:

Error Property	Description
errorCode	Error code of the last parse error
filepos	absolute file position of the error
line	line the error occurred on
linepos	position with in the line
reason	error description
srcText	line of XML that contains the error

Accessing the DOM Tree:

You can access the tree starting at the root and walking down the tree or by querying for a specific node. You navigate to the root element using the documentElement property which returns the root element as an XMLDOMNode object.

Dim xmlDoc As New DOMDocument
Dim root As IXMLDOMElement
Dim child As IXMLDOMNode

xmlDoc.load("reports.xml")

'Set root to the root element collection.
Set root = xmlDoc.documentElement

'Walk from the root to each of its child nodes.
For Each child In root.childNodes
MsgBox child.text
Next

To navigate to a specific node in the tree use the getElementsByTagName method. This method takes a string containing a specific tag name and returns all element nodes with this tag name.

Dim ElemList As IXMLDOMNodeList
Dim xmlDoc As New DomDocument

xmlDoc.load("reports.xml")
Set ElemList = xmlDoc.getElementsByTagName("AUTHOR")
For i=0 To (ElemList.length -1)
MsgBox ElemList.item(i).xml
Next

Creating Nodes:

The DOMDocument object provides a generic createNode method that lets you create nodes by supplying a node type, name, and namespaceURI. I say generic because it also provides individual methods to create most of the following specific node types.

Node Type	Value	Description
Node_Element	1	Node is an Element
Node_Attribute	2	Node is an Attritute of an element
Node_Text	3	Node represents the text content of a tag
Node_Cdata_Section	4	A CDATA section in the XML source. CDATA sections escape text that would otherwise be interpreted as markup.
Node_Entity_Reference	5	A reference to an entity in the XML document
Node_Entity	6	Node represents an expanded entity
Node_Processing_Instruction	7	A processing instruction from the XML document
Node_Comment	8	Node represents a comment in the XML document
Node_Document	9	Represents a document object, which, as the root of the document tree, provides access to the entire XML document
Node_Document_Type	10	Represents the document type declaration (DTD, indicated by the tag
Node_Document_Fragment	11	A document fragment node associates a node or subtree with a document without actually being contained within the document
Node_Notation	12	Represents a notation in the document type declaration (DTD)

Here's an example of creating an attribute node:

Dim xmlDoc As New DomDocument
Dim MyNode As IXMLDOMNode

xmlDoc.load("C:\books.xml")
Set MyNode = xmlDoc.createNode(2, "XML", "")

XMLDOMNode

The XMLDOMNode object is the main object within a DOM. The DOMDocument object is itself an XMLDOMNode. So are the members of node lists and named node maps which are discussed later.

Accessing Node Information
The XMLDOMNode object has several properties which provide info about a node. Here are the simpler ones:

Node Property	Description
hasChildNodes	True if this node has children
namespaceURI	Returns the URI (universal resource identifier) for the namespace (the "uuu" portion of the namespace declaration xmlns:nnn="uuu").
parsed	True if the node and all descendants have been parsed and instantiated. During asynchronous access, not all of the document tree may be available. Before performing XSL transformations or pattern-matching operations, it is useful to know if the entire tree below this node is available for processing.
xml	Returns a string containing the XML representation of the node and all its descendants.
nodename	Returns the qualified name for the element, attribute, or entity reference. Ex: returns xxx:yyy for the element . The return value depends on the nodetype.
nodetype	Returns an integer representing the XML DOM node type.
nodetypestring	Returns a string representing the XML DOM node type.
specified	Returns True if the attribute is explicitly specified in the element. Returns False if the attribute value comes from the DTD or schema. Returns True on non-attribute nodes.

This example illustrates a few of the above properties. It checks if the root node has children and prints the number of child nodes.

Dim xmlDoc As New DOMDocument
Dim currNode As IXMLDOMNode
Dim strXML As String

xmlDoc.async = False
xmlDoc.load("c:\books.xml")
Set currNode = xmlDoc.documentElement.firstChild

strXML = currNode.xml

MsgBox currNode.namespaceURI

If currNode.parsed Then
  MsgBox ("node was parsed")
End If

If currNode.hasChildNodes Then
  MsgBox currNode.childNodes.length Else
  MsgBox ("no child nodes")
End If

Setting Node Information:

The data in an XML file is exposed in the DOM as node values. Node values might be the value of an attribute or the text within an XML element.

The nodeValue property provides access to values of attributes, text nodes, comments, processing instructions, and CDATA section nodes.

To get the value of an element type node, you can navigate to its element's children (the text nodes within) and call nodeValue on them or use the text property.

This code sets the value of an attribute and an element.

newAttNode = xmlDoc.createAttribute("newAtt")
newAttNode.nodeValue = "hello world"

If (elem1.text = "hello world") Then
elem1.text = "hi! world"
End If

Navigating Through Nodes:

From the XMLDOMNode object, you can navigate to its: parent node using the (parentNode)method, children (childNodes, firstChild, lastChild), siblings (previousSibling, nextSibling), or the document object the node belongs (ownerDocument) to.

If the node type is element, attribute, or entityReference, you can call the definition property to navigate to the schema definition of the node.

If the node type is element, processingInstruction, documentType, entity, or notation, you can navigate to the attributes on the node using the attributes property.

These methods return the indicated node or null if the node doesn't exists.

This example illustrates how to navigate the DOM tree.

Dim xmlDoc As New DOMDocument
Dim currNode As IXMLDOMNode
Dim newNode As IXMLDOMNode
Dim rootNode As IXMLDOMNode
Dim oNodeList As IXMLDOMNodeList

xmlDoc.async = False
xmlDoc.load("c:\books.xml")
Set rootNode = xmlDoc.documentElement
'
' Create a new node from another node's parent and display its XML.
'
Set currNode = xmlDoc.documentElement.childNodes.item(1).childNodes.item(0)
Set newNode = currNode.parentNode
MsgBox newNode.xml
'
' Display the XML for the root node's first child.
'
Set currNode = xmlDoc.documentElement.firstChild
MsgBox currNode.xml
'
' Create a new element and insert it before the last child of the top-level node.
'
Set newNode = xmlDoc.createNode (1, "VIDEOS", "")
Set currNode = rootNode.insertBefore(newNode, rootNode.lastChild)
'
' Get a list of the root's children and display the XML for each child.
'
Set oNodeList = rootNode.childNodes
For Each currNode in oNodeList
MsgBox currNode.xml
Next
'
' Get a node, get its left sibling, display its XML.
'
Set currNode = xmlDoc.documentElement.childNodes.item(1)
Set newNode = currNode.previousSibling
MsgBox newNode.xml

You can also navigate to other nodes in the tree using the selectNodes and selectSingleNodemethods. These methods take an XSL Pattern as an argument and return the node or nodes that match that query. For more information about XSL Patterns, see my XSL Tutorial.

Manipulating the Children of a Node:

There are four methods that let you manipulate the children of a node. Each one takes a node object as an argument. They are: appendChild, replaceChild, removeChild and insertBefore.

Dim xmlDoc As New DOMDocument
Dim refNode As IXMLDOMNode
Dim newNode As IXMLDOMNode
Dim root As IXMLDOMNode

xmlDoc.async = False
xmlDoc.load("c:\books.xml")
Set root = xmlDoc.documentElement
'
' Create a new "pages" node. Insert it before the root's first child. Display its XML.
'
Set newNode = xmlDoc.createElement("PAGES")
Set refNode = rootNode.childNodes.item(1).firstChild
root.childNodes.item(1).insertBefore newNode, refNode
MsgBox root.childNodes.item(1).xml
'
' Remove a child node.
'
Set refNode = root.childNodes.item(1).firstChild
root.childNodes.item(1).removeChild refNode
MsgBox root.childNodes.item(1).xml
'
' Replace the specified child with the new "pages" node.
'
Set newNode = xmlDoc.createElement("PAGES")
root.childNodes.item(1).replaceChild newNode, root.childNodes.item(1).childNodes.item(0)

XMLDOMNodeList

The XMLDOMNodeList object is a collection of nodes. It is returned by the childNodes,selectNodes and getElementsByTagName methods.

You can iterate sequentially through the nodes in the list as shown in this previous example or by using the nextNode method shown below. The length property indicates the number of nodes in the list.

Dim xmlDoc As New DOMDocument
Dim currNode As IXMLDOMNode
Dim oNodeList As IXMLDOMNodeList

xmlDoc.async = False
xmlDoc.load("c:\books.xml")
'
' Get a list of the nodes and display their text.
'
Set oNodeList = xmlDoc.getElementsByTagName("AUTHOR")
For i = 0 TO (oNodeList.length -1)
Set currNode = oNodeList.nextNode
MsgBox currNode.text
Next

To access nodes randomly, use the item property. This allows you to navigate directly to a specific node. The first node has an index of zero.

Dim xmlDoc As New DOMDocument
Dim oNodeList As IXMLDOMNodeList

xmlDoc.async = False
xmlDoc.load("c:\books.xml")
'
' Get a list of the nodes and display their text.
'
Set oNodeList = xmlDoc.getElementsByTagName("AUTHOR")
For i = 0 TO (oNodeList.length -1)
MsgBox oNodeList(i).text
Next

XMLDOMNamedNodeMap

An XMLDOMNamedNodeMap object is returned by the attributes property. The XMLDOMNamedNodeMap object differs from the node list because it is a collection of nodes that can also be accessed by name.

Just like a node list, a named node map has a length property and can be accessed using itsitem method. It also exposes the nextNode property

However, you can also access the members of a named node map name by usinggetNamedItem and getQualifiedItem. The getNamedItem method takes the name of the desired node as a parameter; the getQualifiedItem method takes the name and namespaceURI of the desired node. Each method returns an node object.

This code gets the value of the ID attribute on the elem1 element and assigns that value to the variable "idValue".

idValue = elem1.attributes.getNamedItem("ID").nodeValue

Manipulating a Named Node Map:

These methods allow you to manipulate named node maps: setNamedItem, removeNamedItemand removeQualifiedItem.

The setNamedItem method takes an XML node object as a parameter, adding that node to the named node map. If an attribute already exists with the same name, the old attribute is replaced. This example creates a new attribute node with the name "ID" and adds it to the attributes of elem1:

idAtt = XMLDoc.createAttribute("ID") elem1.setNamedItem(idAtt)

The removeNamedItem method takes a node name as a parameter, removing the node with that name. The removeQualifiedItem method takes a node name and namespaceURI as its parameters, removing the corresponding attribute.

Index of DOM Terms
Accessing a DOM Child Nodes childNodes Method Creating a DOM Creating Nodes Document Information Document Node Document Object Model (DOM) DOM Document Error Information firstChild Method lastChild Method Loading a Dom Load and Parse Options Manipulating Nodes Microsoft XML Products	Named Node map namespaceURI Node Property Navigating Through Nodes nextSibling Method Node Information Node Lists Node Types ownerDocument Method parentNode Method Parsed Node Property previousSibling Method Saving Dom Data Schemas Setting Node Information World Wide Web Consortium (W3C)

DHTML/JavaScript concept

2009-06-01T17:14:00.000-07:00

Dynamic HTML (DHTML) is a combination of three technologies: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript. With these technologies, the content in a browser becomes dynamic, not having to rely on time-consuming updates from round trips back to the server. Additionally, finer control over the user experience is available by leveraging the various events inherent in HTML, such as playing a small sound when the mouse moves over an image or providing custom context menus instead of the standard one provided by the browser.

How to Determine and Construct the XMLHttpRequest Object by checking browser type ?

2009-05-27T19:46:00.000-07:00

Into JavaScripr file TestScript.js, we need to write the following function to contruct the XMLHTTPRequest object.

var xmlHttpObj;

xmlHttpObj= CreateXmlHttpRequestObject();

function CreateXmlHttpRequestObject()

{

var xmlHttpObj;

if (window.ActiveXObject)

{

try

{

xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e)

{

xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");

}

else

xmlHttpObj = new XMLHttpRequest();

return xmlHttpObj;

}

Then we need to call it from any aspx page TestAJAXOne.aspx as following...

into the TestScript.js file we need to add these following function

function MakeXMLHTTPSynchronousCall()

{

var xmlHttpObj;

xmlHttpObj= CreateXmlHttpRequestObject();

if (xmlHttpObj)

{

xmlHttpObj.open("GET","http://" + location.host + "/Test/EffectiveDateHAS.xml", false);

xmlHttpObj.send(null);

alert("Request/Response Complete.");

}

function MakeXMLHTTPAsynchronousCall()

{

var xmlHttpObj;

xmlHttpObj= CreateXmlHttpRequestObject();

if (xmlHttpObj)

{

xmlHttpObj.open("GET","http://" + location.host + "/Test/EffectiveDateHAS.xml", true);

xmlHttpObj.onreadystatechange= function()

{

if(xmlHttpObj.readyState == 4)

{

alert("Request/Response Complete.");

}

xmlHttpObj.send(null)

}

What Is the XMLHttpRequest Object?

2009-05-27T19:41:00.000-07:00

The XMLHttpRequest object is the heart of all asynchronous operations related to Ajax. It is the object responsible for providing the asynchronous behavior through which Ajax-style applications can interact.

XMLHTTP is a protocol that is designed to package data as XML and send it via the network to a specific destination, or endpoint. This information is typically processed in some way, and the result is returned to the caller. The XMLHttpRequest object is an object that is implemented by most modern browsers to facilitate this communication protocol.

What is AJAX?

2009-05-23T01:20:00.000-07:00

So into this development environment comes a set of technologies that are collectively referred to as Ajax. If you are an “old guy” developer like us, then Ajax represents a similar concept to the clientserver development we mentioned earlier in the chapter. With client-server development, the amount of data transferred is minimized over a terminal application by transferring only the necessary data back and forth. Similarly, with Ajax, only the necessary data is transferred back and forth between the client and the web server. This minimizes the network utilization and processing on the client. Figure 1-3 shows that typically Ajax operates with the assistance of some type of proxy.

Advantages of Ajax

The advantages of Ajax over classical web based applications are:

❑ Asynchronous—Ajax allows for the ability to make asynchronous calls to a web server. This

allows the client browser to avoid waiting for all data to arrive before allowing the user to act

once more.

❑ Minimal data transfer—By not performing a full postback and sending all form data to the

server, the network utilization is minimized and quicker operations occur. In sites and locations

with restricted pipes for data transfer, this can greatly improve network performance.

❑ Limited processing on the server—With the fact that only the necessary data is sent to the

server, the server is not required to process all form elements. By sending only the necessary

data, there is limited processing on the server. There is no need to process all form elements,

process the viewstate, send images back to the client, and no need to send a full page back to

the client.

❑ Responsiveness—Because Ajax applications are asynchronous on the client, they are perceived

to be very responsive.

❑ Context—With a full postback, the user may lose the context of where they are. The user

may be at the bottom of a page, hit the Submit button, and be redirected back to the top of

the page. With Ajax there is no full postback. Clicking the Submit button in an application that

uses Ajax will allow the user to maintain their location. The user state is maintained, and the

user is no longer required to scroll down to the location that he or she was at before clicking

Submit.

Figure 1-4 shows how the user interface can still operate while using Ajax. The UI is not locked during the server processing.

History of Ajax

For all of its perceived newness and sexiness, the technologies that make up Ajax are really not new. The ability to communicate back to the server through a hidden frame without posting the main page back to the server has been around for a long time. Communication between client and server has been available—back to the release of Internet Explorer’s ability to script ActiveX controls on the client browser and to the MSXML component, both of which date back into the late 1990s. Personally, I saw the first formal usage of client script and MSXML in 2003. The problem with the technology at that time was the need to manually create the necessary client-side JavaScript. In 2003, there was too much code overall that had to be written and too much custom code that had to be written to get this to work. It has been only in the second half of 2005 that client-side libraries and server-side support for ASP.NET have started to make their presence felt and been used significantly. The mainstream development community has only recently started using the technique. The release of Google’s Suggest and Maps are what really opened the eyes of the users to the development technologies. These applications sent a shockwave through the development community.

Technologies That Make Up Ajax

Ajax is a general umbrella term. As mentioned earlier, Ajax itself stands for Asynchronous JavaScript And XML. The term Ajax was actually coined by Jesse James Garret of Adaptive Path in an essay that was published in February 2005 (www.adaptivepath.com/publications/essays/archives/000385.php) and was quickly accepted by the development community.Based on this general umbrella term, take a look at the specific items that make up Ajax:

❑ XmlHttpRequest—XmlHttpRequest allows the browser to communicate to a back-end server.

This object allows the browser to talk to the server without requiring a postback of the entire

web page. With Internet Explorer, this capability is provided by the MSXML ActiveX component. With the Mozilla Firefox and other web browsers, this capability is provided by an object literally called XmlHttpRequest. The XmlHttpRequest object is modeled after the MSXML component. The client-side JavaScript libraries hide the differences between the various browser environments. Sometimes these communications are done through a hidden FRAME or IFRAME.

❑ JavaScript—JavaScript provides the capabilities to communicate with the back-end server.

The JavaScript must be version 1.5 or later. Although JavaScript is not specifically required, it

is needed from the standpoint that JavaScript is the only client-side scripting environment supported across the major modern web browsers. There are other client script languages; however, these are not supported across all browsers.

❑ DHTML/DOM support—The browser must support the ability to dynamically update form

elements, and the ability to do this in a standard way comes through the support for the

Document Object Model (DOM). By supporting the DOM, it becomes easy for developers to

write a single piece of code that targets multiple browsers.

❑ Data transport with XML or JSON—Using XML allows for the ability to communicate with

the web server in a standard mechanism. There are situations where the JavaScript Object

Notation (JSON) is used as the communication notation instead of straight XML.

Running Ajax Applications

Unfortunately, not all web browsers ever produced will support Ajax. To run Ajax, a web browser must:

❑ Be relatively modern. Ajax style applications are not available in all versions of all web browsers. Whereas Internet Explorer version 6, Firefox version 1.5, and Opera 8.5 provide support for these applications, older versions may be problematic because of their support for different versions of the other requirements.

❑ Support DOM.

❑ Utilize JavaScript.

❑ Support Extensible Markup Language (XML) and Extensible Style Language Transformation

(XSLT).

❑ Possibly have ActiveX enabled on the client. If you are using the Internet Explorer browser

while running on Windows, you may have problems if ActiveX is not enabled.