Thursday, April 29, 2010

AJAX


AJAX

 

Defining Ajax

Ajax isn't a technology. It's really several technologies, each flourishing in its own right, coming together in powerful new ways.

AJAX is based on the following web standards:

·    JavaScript

·      XML

·      HTML

·      CSS

 

The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing — retrieving data, crunching numbers, talking to various legacy systems — and then returns an HTML page to the client.

 

How Ajax is Different

An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame.

 

 

Q. Why did you feel the need to give this a name?

A. I needed something shorter than "Asynchronous JavaScript+CSS+DOM+XMLHttpRequest" to use when discussing this approach with clients.

Q. Is Ajax a technology platform or is it an architectural style?

A. It's both. Ajax is a set of technologies being used together in a particular way.

 

 

AJAX have some challenges as well

 

1.                          Complexity: Server-side developers will need to understand that presentation logic will be required in the HTML client pages as well as in the server-side logic to generate the XML content needed by the client HTML pages. HTML page developers need to have a basic understanding of JavaScript technology to create new Ajax functionality.

2.                          Standardization of the XMLHttpRequest object: The XMLHttpRequest object is not yet part of the JavaScript technology specification, which means that the behavior may vary depending on the client.

3.                          JavaScript technology implementations: Ajax interactions depend heavily on JavaScript technology, which has subtle differences depending on the client

4.                          Debugging: Ajax applications are also difficult to debug because the processing logic is embedded both in the client and on the server.

5.                          Securing resources and protecting your data: You can view client-side JavaScript technology simply by selecting View Source from an Ajax-enabled HTML page. A poorly designed Ajax-based application could open itself up to hackers or plagiarism.

 

Using Ajax requires that you use the latest browser versions that support the XMLHttpRequest object needed for Ajax interactions.

 

Using Ajax also requires a great deal of client-side JavaScript technology and CSS.

 

The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.

 

AJAX was made popular in 2005 by Google (with Google Suggest).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

AJAX PROGRAMMNG

 

 

It has some stages.

 

1.      Check Browser Supporting or Not

 

function GetXmlHttpObject()

{

var xmlHttp=null;

try

  {

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();

  }

catch (e)

  {

  // Internet Explorer

  try

    {

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

    }

  catch (e)

    {

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

    }

  }

        mlHttp=GetXmlHttpObject();

        if (xmlHttp==null)

        {

          alert ("Your browser does not support AJAX!");

          Return;

        }

 

2.      Analysis of Processing states Values  (ReadyState Property)

 

 

if (httpRequest.readyState == 4) {

    // everything is good, the response is received

} else {

// still not ready

}

 

a.   0: Uninitialized

b.   1: Loading (Open)

c.   2: Loaded (Sent)

d.   3: Interactive (Receiving)

e.   4: Complete (Loaded)

 

3.      The next thing to check is the status code of the HTTP server response.

 

if (httpRequest.status == 200) {

    // perfect!

} else {

    // there was a problem with the request,

    // for example the response may be a 404 (Not Found)

    // or 500 (Internal Server Error) response codes

}

 

if (httpRequest.readyState == 4) {

            if (httpRequest.status == 200) {

                alert(httpRequest.responseText);

            } else {

                alert('There was a problem with the request.');

            }

        }

 

    }

 

 

4.     You need to decide what you want to do after you receive the server response to your request.

 

httpRequest.onreadystatechange = function(){

    // do the thing

};

 

5.     After you've declared what will happen as soon as you receive the response, you need to actually make the request. You need to call the open() and send() methods of the HTTP request class.

 

AJAX - Sending a Request to the Server To send off a request to the server, we use the open() method and the send() method.

 

httpRequest.open('GET', 'http://www.example.org/some.file',true);

httpRequest.send(null);

 

You have two options to access that data (the data the server has sent to you):

§ httpRequest.responseText – will return the server response as a string of text

§ httpRequest.responseXML – will return the response as an XMLDocument object you can traverse using the JavaScript DOM functions

 

 

1        The first parameter of the call to open() is the HTTP request method – GET, POST, HEAD or any other method you want to use and that is supported by your server. Keep the method capitalized as per the HTTP standard;

2        The second parameter is the URL of the page you're requesting. As a security feature, you cannot call pages on 3rd-party domains.

3        The third parameter sets whether the request is asynchronous.

4        The parameter to the send () method can be any data you want to send to the server if POST-ing the request. The data should be in the form of a query string, like:

name=value&anothername=othervalue&so=on

Note that if you want to POST data, you have to change the MIME type of the request using the following line:

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Otherwise, the server will discard the POSTed data.

 

 

Client .htm

 

 

<html>

<head>

<script src="selectcustomer_xml.js"></script>

</head>

<body>

<form action="">

Select a Customer:

<select name="customers" onchange="showCustomer(this.value)">

<option value="ALFKI">Alfreds Futterkiste</option>

<option value="NORTS ">North/South</option>

<option value="WOLZA">Wolski Zajazd</option>

</select>

</form>

<b><span id="companyname"></span></b><br />

<span id="contactname"></span><br />

<span id="address"></span>

<span id="city"></span><br/>

<span id="country"></span>

</body>

</html>

 

 

This is the JavaScript code stored in the file "selectcustomer_xml.js":

 

 

var xmlHttp

function showCustomer(str)

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

  {

  alert ("Your browser does not support AJAX!");

  return;

  }

var url="getcustomer_xml.asp";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

function stateChanged()

{

if (xmlHttp.readyState==4)

{

var xmlDoc=xmlHttp.responseXML.documentElement;

document.getElementById("companyname").innerHTML=

xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;

document.getElementById("contactname").innerHTML=

xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;

document.getElementById("address").innerHTML=

xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;

document.getElementById("city").innerHTML=

xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;

document.getElementById("country").innerHTML=

xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;

}

}

 

function GetXmlHttpObject()

{

var xmlHttp=null;

try

  {

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();

  }

catch (e)

  {

  // Internet Explorer

  try

    {

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

    }

  catch (e)

    {

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

    }

  }

return xmlHttp;

}

 

The server page called by the JavaScript, is a simple ASP file called "getcustomer_xml.asp".

 

<%

response.expires=-1

response.contenttype="text/xml"

sql="SELECT * FROM CUSTOMERS "

sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"

 

on error resume next

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

rs.Open sql, conn

if err <> 0 then

response.write(err.description)

set rs=nothing

set conn=nothing

else

response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")

response.write("<company>")

response.write("<compname>" &rs.fields("companyname")& "</compname>")

response.write("<contname>" &rs.fields("contactname")& "</contname>")

response.write("<address>" &rs.fields("address")& "</address>")

response.write("<city>" &rs.fields("city")& "</city>")

response.write("<country>" &rs.fields("country")& "</country>")

response.write("</company>")

end if

on error goto 0

%>

 

 

MetaTags For Websites, Documents & Articles


MetaTags For Websites, Documents & Articles

1. MetaTag Introduction: Meta-data can be entered into an html document by placing metatags in the head of the document. The servers can then use the data to identify the html content. MetaTags allow document cataloging.

2. MetaTag Definition: META elements are placed within the HEAD element to describe document information from the HTML content. The information can be extracted by servers for use in identifying, indexing and cataloging document content.

It is common practice to use named elements that have well defined semantics for each type of meta-data. HTTP servers can then read the contents of the document head to identify the html content and to generate response headers corresponding to the meta elements with the attribute HTTP-EQUIV. This provides document authors with a mechanism for identifying information that should be included in the response headers of an HTTP request.

The META element has three attributes:

NAME
CONTENT
HTTP-EQUIV

3. NAME: The name attribute can be used to define properties such as author, language, keywords etc.
An example:

<META NAME= "Editor" CONTENT = "John Smith">

4. CONTENT: Used to supply a value for a named property. If it's used with the HTTP-EQUIV it can contain more than a single element; met-data will use the Boolean operators (AND, OR) intrinsically. The AND operator is represented by a "SPACE" (ASCII[32]) and the OR operator by a "COMMA" (ASCII[44]). The AND operator is processed before the OR operator. So a string like this: "Red Coat, Blue Coat" equates to :"Coat AND (red OR Blue)".

5. HTTP - EQUIV: This attribute binds the element to an HTTP header. If the semantics of the HTTP header named by this attribute is known, then the contents can be processed based on well defined protocols.

An HTTP Header is: "A record sent by clients and servers communicating with each other via the HTTP protocol. The header is a stream of text that may be sent without any content following it or with the content that it describes. There are headers specific to requests and to responses and others that are used for both client and server, to describe or query the content or html environment. An example of a common request header, sent to the server, is If-Modified-Since. The server returns the file only if it has been changed since a certain date and time."

HTTP header names are not case sensitive, however common practice is to make the first letter of a header name to be capitalized. It is possible to use any text string, but if you want to be well defined, these properties will have to use the following well defined words:

Refresh :  to indicate when to refresh a page

Copyright :  to indicate if a copyright is held.

Content-Type :  to indicate text/html; and the language
    charset=ISO-8859-1

Timestamp :  to indicate when the document is authored

Expire :  to indicate the expire date of the document

Content-Language :  to indicate the language of the document

Abstract :  to indicate the abstract of the document

Organization :  to indicate the organization of the author

Revision :  to indicate the revision number of the document

Public :  to indicate if the document is available to the public.

Last Modified :  to indicate the last time a document
    or article has been Modified.

------------------------------------------------------------------

These are tipicle MetaTags to place in the head of a "front page" document.

<meta name="description" content="Resource for vacations.">
<meta name="keywords" content="travel,agency,travel agency,
    vacations,travel resource">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-
    8859-1">
<meta name="resource-type" content="Document"/>
<meta name="DocumentCountryCode" content="us"/>
<meta http-equiv="Content-Language" content="en">
<meta name="Language" content="en"/>
<meta name="classification" content="Internet"/>
<meta name="distribution" content="Global"/>
<meta name="rating" content="General">
<meta name="Author" content="Tech Systems.com"/>
<meta http-equiv="copyright" content="PortalDepot.net"/>
<meta name="revisit-after" content="10 days"/>
<meta name="robots" content="all"/>

These are tipicle MetaTags to place in the head of an "Article Page" document.

<meta name="description" content="Where To Put Your
    Advertising Dollars" />
<meta name="keywords" content="web promotion,website
    advertising,website marketing" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-
    8859-1"/>
<meta name="resource-type" content="Document" />
<meta name="type" content="article" />
<meta name="Language" content="en"/>
<meta name="DocumentCountryCode" content="us"/>
<meta name="distribution" content="Global"/>
<meta name="rating" content="General">
<meta name="Author" content="Tech Systems.com"/>
<meta http-equiv="pubdate" content="20050409"/>
<meta http-equiv="Last Modified" content="Wed, 26 Feb 2005
    08:21:57 gmt">
<meta http-equiv="copyright" content="TechSystems.com"/>
<meta name="ROBOTS" content="all">

These are Robot Meta Commands, that tell the search engines wether to index a page or not and wether to follow any hyperlinks, within the page.

<meta name="ROBOTS" content="all">
<meta name="ROBOTS" content="none">
<meta name="ROBOTS" content="index">
<meta name="ROBOTS" content="index,follow">
<meta name="ROBOTS" content="noindex,follow">
<meta name="ROBOTS" content="noindex,nofollow">

MISCILLANIOUS METATAG COMMANDS

<meta name="creation_date" content="9/1/2003">
<meta name="Reply-to" content="admin@spiderweblogic.com">

This command tells the search engines to spider your document every 10 days.
<meta name="revisit-after" content="10 days"/>

This command tells the search engines not to spider your document for harvesting email addresses.
<meta name="no-email-collection" value="http://portaldepot.com/nospam.html"/>

This command tells the search engines not to cache your document. Its use is intended when you are making a lot of changes to your document.
<meta http-equiv="Pragma" content="no-cache">

Disables IE 6 Image Toolbar for copying images.
<meta http-equiv="imagetoolbar" content="no">

These are filters developed by MS to fadein web pages. They are ignored by all browsers other then IE Browsers.
<meta http-equiv="Page-Enter" content= "progid: DXImageTransform.Microsoft.Fade(Duration=2.3)">
<meta http-equiv="Page-Exit" content= "progid: DXImageTransform.Microsoft.Fade(Duration=2.3)">

Refreshes curent page every 5 seconds.
<meta http-equiv="refresh" content="5">
Redirects a page to a new address and Loads the new address after 5 seconds.
<meta http-equiv="refresh" content="5;URL= http://www.newAddress.com">

This is one method of setting a "cookie" in the user's Web browser. If you use an expiration date, the cookie is considered permanent and will be saved to disk (until it expires), otherwise it will be considered valid only for the current session and will be erased upon closing the Web browser.
<meta http-equiv="Set-Cookie" content="cookievalue= xxx;expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<meta name="CODE_LANGUAGE" content="C#">