Java Script JavaScript is a new scripting language which is being developed by Netscape. With Java Script you can easily create interactive web-pages

Sunil Kumar Sahu,Lecturer RCET 1

Java Script• JavaScript is a new scripting language which is

being developed by Netscape.• With Java Script you can easily create interactive

web-pages.• You must memorize that JavaScript is not Java.• To run scripts written in JavaScript, You need a

JavaScript-enabled browser - for example the Netscape Navigator (version 2.0) or the Microsoft Internet Explorer (version 3.0).

• It can run on the browser without being compiled.• java script language is interpreted rather than

compiled.


JavaScript code is embedded directly into the HTML-page. In order to see how this works we are going to look at an easy example:

<html> <body> <br> This is a normal HTML document. <br> <script language="JavaScript"> document.write("This is JavaScript!") </script> <br> Back in HTML again. </body> </html>


• At the first glance this looks like a normal HTML-file. The only new thing is the part:

<script language="JavaScript"> document.write("This is JavaScript!") </script>• This is JavaScript. In order to see this script working

save this code as a normal HTML-file and• load it into your JavaScript-enabled browser. Here is

the output generated by the file- This is a normal HTML document. This is JavaScript! Back in HTML again.


Benefits of java script• It has a no.of big benefits to anyone who wants to

make their web site dynamically.• It is widely supported in web browser.• It gives easy access to the document objects and

manipulate most of them.• It gives interesting animation without language

download times associated with many multimedia data types.

• Web surfers don’t need a special plug ins to use your scripts.

• It is relatevely secure.


Problems with Java Script

• If your script doesn’t work then your page is useless.

• Because of broken scripts many web surfer disable java script support in their web browser.

• Scripts can run slowly and complex script can take long time to start up.


Using an external Java Script• If you want to run the same Java Script on

several pages without having to write the same script on on every page ,you can write a Java Script in an external file.

• Save the external java script file with .js extension.

• The external java script file can not contain the <script> tag.

• To use external file use src attribute of the <script> tag


Example-<html> <script type=“text/javascript” src=“abc.js”></script> <head> <body onLoad=message()> </body></html>External file (abc.js)-Function message() { alert(“Hello”); }


Data types

• Numeric literal :- java script support both integer and floating point… integer are whole number and do not contain a decimal point,

e.g. 143. floating point numbers are fractional number

such 143.56, they must contain a decimal point or exponent specifier such as 1.43e-2, exponent can be either upper case or lower case…


Data types

• String literal :- String literals are rows of characters enclosed in either double or single quotes.• Boolean :- Boolean literals are logical values that

have only one of two values, true or false. You can think of the values as yes or no, on or off, or 1 or 0. They are used to test whether a condition is true or false.


Java script variable• A variable is a "container" for information you

want to store• A variable's value can change during the script• Variable names are case sensitive • They must begin with a letter or the underscore

character • You can create a variable with the var statement:

var strname = value• You can also create a variable without the var

statement strname = value


Local JavaScript Variables• A variable declared (using var) within a JavaScript

function becomes LOCAL and can only be accessed from within that function. (the variable has local scope).

• You can have local variables with the same name in different functions, because local variables are onlyrecognized by the function in which they are declared.

• Local variables are deleted as soon as the function is completed.

Global JavaScript Variables• Variables declared outside a function, become GLOBAL,

and all scripts and functions on the web page can access it.


The Lifetime of JavaScript Variables• The lifetime JavaScript variables starts when they are

declared.• Local variables are deleted when the function is

completed.• Global variables are deleted when you close the page.Assigning Values to Undeclared JavaScript Variables• If you assign a value to variable that has not yet been

declared, the variable will automatically be declared as a GLOBAL variable.

• This statement: carname="Volvo";• will declare the variable carname as a global variable ,

even if it is executed inside a function.


Java Script Operator

• Java Script supports variety of operators- 1.Arithmetic Operator 2.Assignment Operator 3.Comparison Operator 4.Logical Operator 5.Conditional Operator






Conditional Operator• Java Script contains Conditional Operator that

assigns a value to a variable based on some condition.

Syntax- variable name=(condition)?value1:value2;Example- class=(grade==“A”)?”First”:”Second”;If variable has value of “A” then the variable classwill be assigned the value “first” otherwise“second”.


JavaScript Statements

• Constructs of programming– Sequence– Conditional execution• If…Else • Switch

– Looping• Do…While • For • While

– Method/Function calls

http://www.devguru.com/Technologies/ecmascript/quickref/if...else.html

http://www.devguru.com/Technologies/ecmascript/quickref/switch.html

http://www.devguru.com/Technologies/ecmascript/quickref/do...while.html

http://www.devguru.com/Technologies/ecmascript/quickref/while.html


Conditional Statements

JavaScript supports the following control statements: if-else If-else-if Switch case The if-else structureThe if-else structure is used to conditionally execute lines of

code, depending on a condition that is usually a comparison of values.

if ( condition ) { ...statements to execute if condition is true... } else { ...statements to execute if condition is false... }


Switch Case-• Use the Switch Statements to select one of many blocks

of code to be executed.Syntax-switch(n){ case1: execute code block1 break; case2: execute code block2 break; Default: code to be executed if n is different from case

1and 2.}


Conditional Loops

• Java script provides three kinds of loops- 1.While loop 2.do-while loop 3.For loop


The while loop• The while loop is used to execute lines of code

over and over again while a certain condition is true.

• The while structure has the following syntax: while ( condition ) { ...lines to execute while condition is true... }


• For example-Reverse no. <html> <head> <title>Using JavaScript</title> </head> <body bgcolor=“blue"> <script language="JavaScript"> var num,rev; num=prompt("Enter the number :");

document.write("<br><br><br>") ; rev=0; while(num!=0) { rev=rev*10+num%10; num=parseInt(num/10); } document.write("Reverse :"+rev); </script> </body> </html>


OUTPUT


Example:while loop.

The number is 0The number is 1The number is 2The number is 3The number is 4The number is 5

<html><body>

<script type="text/javascript">i=0;while (i<=5){document.write("The number is " + i);document.write("<br />");i++;}</script></body></html>


The for loop• The for loop is used to execute a block of code

much like the while structure.• The difference is that the for structure is tailored

specifically for numerical loops, usually counting a specific number of loops.

• The for structure has the following syntax:for(initliase the

variable;condition;increament/decreament) { body of loop }


• The assignment, condition, and change blocks of the for loop work together to control the number of times the statements are executed.

• Typically, the blocks reference the same variable, similar to this example:

for ( x = 1; x <= 10; x++; ) {


• In this case, the loop’s execution is as follows: ✦ The variable x is set to 1 at the beginning of the loop. ✦ The value of variable x is checked—if it is less than or equal to 10, the loop’s statements are executed. ✦ At the end of each loop the variable x is incre

• Two additional loop-related commands come in handy when using loops in

break and continue-• The break command ends the loop, and code execution

continues after the loop structure.• The continue command ends the current iteration of the

loop, and execution continues with the next iteration of the loop.mented by one, and the loop is repeated.


<html><body>

<script type="text/javascript">var i=0;

for (i=0;i<=5;i++){

document.write("The number is " + i); document.write("<br />"); }</script></body></html>


Example: for loop


Do-while loop• The do while loop first executes the code and then

checks for the condition being tested.• It means it executes atleast once regardless of

whether the condition being tested is successful or not.

• Syntax- Do { Statements; }while(condition);


• For example- Armstrong Number <html> <head> <title>Using JavaScript</title> </head> <body bgcolor=“blue"> <script language="JavaScript"> var num,sum,org; num=prompt("Enter the number :"); num=parseInt(num); org=num; document.write("<br><br><br>") ; sum=0; do { sum=sum+(num%10)*(num%10)*(num%10); num=parseInt(num/10); }while(num!=0); if(sum==org) document.write("Armstrong Number ."); else document.write("Not an armstrong number."); </script> </body> </html>


OUTPUT


Example:do-while loop.


<html><body>

<script type="text/javascript">i = 0;do{document.write("The number is " + i);document.write("<br />");i++;}while (i <= 5);</script>

</body></html>


Functions• A function is a block of code that will be executed when "someone"

calls it.• Functions are a means of grouping code fragments together into

cohesive pieces.• Typically, those pieces perform very specific tasks—receiving values

to execute upon and returning values to indicate their success, failure, or result.

• There are essentially two types of functions, built-in JavaScript functions and user-defined functions.

Built-in functions• JavaScript has quite a few built-in functions to perform a variety of

tasks.• Augmenting the functions are a bunch of properties and methods

that can be used with just about any object, from browser function to variable.


• The scope of built-in JavaScript functions, methods, and properties is too vast to adequately convey here. However, comprehensive references can be found on the Internet, including the following:

There are two types of functions: 1. When the function will return a value. 2. When the function will not return a valueThe general form is- function functionname(argument list) { body of the function }


When the function will return a value

<html> <head> <title>Using JavaScript</title> <script language="JavaScript"> function factorial(num) { var fact,i; fact=1; for(i=1;i<=num;i++) fact=fact*i; return fact; } </script> </head> <body bgcolor="#ccffee"> <script language="JavaScript"> var num,fact; num=prompt("Enter the number:"); document.write("<br><br><br>") ; fact=factorial(num); document.write("Factorial of " + num + " is = " + fact); </script> </body> </html>


OUTPUT-


When the function will not return a value <html> <head> <title>Using JavaScript</title> <script

language="JavaScript"> function factorial(num) { var fact,i; fact=1 for(i=1;i<=num;i++) fact=fact*i; document.write("Factorial of " + num + " is = "+ fact); } </script> </head> <body bgcolor="#ccffee"> <script language="JavaScript"> var num; num=prompt("Enter the number:");

document.write("<br><br><br>") ; factorial(num);</script> </body> </html>


OUTPUT-


User-defined functions

• Like any other robust programming language, JavaScript allows for user-defined functions. User-defined functions allow you to better organize your code into discrete, reusable chunks.

• User-defined functions have the following syntax: function function_name (arguments) { ...code of function... return value_to_return; }


Calling a Function with Arguments• When you call a function, you can pass along some values

to it, these values are called arguments or parameters.• These arguments can be used inside the function.• You can send as many arguments as you like, separated by

commas (,) Function(argument1,argument2)• Declare the argument, as variables, when you declare the

function:function myFunction(var1,var2){ some code}


Java Script Pop up Box (Dialog Box)

• Java script boxes are interesting title “pop up” boxes that can used to display a message,ask for conformation,user input etc.

• They are very easy to create.• Three types of dialog box exist in javascript.. 1.Alert 2.Confirm 3.Prompt


1) alert( )-• This function will display a dialog box on the

screen ,via, which we can display the information on the screen.

The general form is , alert("message"); Consider the following code <html> <head> <title>Using the JavaScript </title> </head> <body > <script language="JavaScript"> alert("Welcome to JavaScript"); </script> </body> </html>


Output-


2)Confirm()-It is often used if you want the user to verify or

accept something. <script language=“javascript”> var answer=confirm(“jump to google?”) if(answer) window.location=http://google.com; </script>


<html><head><script type="text/javascript">function show_confirm(){

var r=confirm("Press a button!");if (r==true)

{ alert("You pressed OK!"); }

else { alert("You pressed Cancel!"); }}</script></head><body><input type="button" onclick="show_confirm()" value="Show a confirm box" /></body></html>

Example-

http://www.google.co.in/imgres?imgurl=http://www.mmncs.com/wp-content/uploads/javascript_logo.gif&imgrefurl=http://www.mmncs.com/2011/07/solve-the-problem-with-the-div-height-100-by-using-simple-javascript/&usg=__jIJJ0esmOF8CF_pP1kulUpKBAG0=&h=65&w=100&sz=2&hl=en&start=4&zoom=1&tbnid=BA0WpKqbheI80M:&tbnh=53&tbnw=82&ei=OJsvT7KMA8frrQfw7rjjDA&prev=/search?q=javascript+logo&hl=en&safe=active&gbv=2&tbm=isch&itbs=1


3)prompt( ) -This function is used to read the information from the

user. The general form is , prompt("message"); Consider the following code- <html> <head> <title>Using JavaScript</title> </head> <body > <script language="JavaScript"> var sname; sname=prompt("Enter your name :");

document.write(“your name is”+sname)</script> </body> </html>


Output-


Objects in Java Script• Java Script uses objects to perform many tasks and

therefore it is referred to as object based programming language.

• Java Script objects are classified as. Math Object String Object Date Object Boolean Object Number Object Document Object Window Object Array Object


JavaScript Methods

• Methods are functions and procedures used to perform an operation on an object, variable, or constant. With the exception of built-in functions, methods must be used with an object:object.method()

• The object methods are called by writing the name of the object followed by dot(.) and the name of the method.

• Example window.alert("Welcome to IST 229 Java Script")Here The Object is window and the method is alert.


JavaScript Properties

• A JavaScript object has properties associated with it. You access the properties of an object with a simple notation: objectName.propertyName

• Different Objects have a different set of properties


Example-document.bgColor="228B22"document.bgColor="forestgreen"window.status="Background set to green”

Property examples of document and window objects


Java Script Math object• It allow you to perform the common mathematical task.• It includes several mathematical constants and

functions.• The object methods are called by writing the

name of the object followed by dot(.) and the name of the method.

• Syntax- Math.[{property | method}]• Example:- document.writeln(math.sqrt(64));Here writeln is a method of document object


• Some math objects methods are-

Methods Description

abs(x) Absolute value of x

ceil(x) Rounds x to the smallest integer not less than x

cos(x) Cosine of x (in radians)

exp(x) Exponential method e to the power of x

floor(x) Rounds x to the largest integer not greater than x

Log(x) Logrithm x (base e)

max(x,y) Larger value of x and y

min(x,y) Smaller value of x and ypow(x,y) X raised to the power of y

round(x) Round x the closet integer

sin(x) sine of x (in radians)

sqrt(x) Square root of x

tan(x) Tangent of x (in radians)


abs()-• The abs() method of math object is used to get

the absolute value of a number.



Ceil(x)-The ceil() method of math object is used to get the smallest integer, greater than

or equal to a number


Cos(x)-• The cos() method of math object is used to get the the cosine of a number.


Exp(x)-• The exp() method of math object returns Ex, where x is the argument, and E is

Euler's constant, the base of the natural logarithms.




Properties




Example-• //calculate e5

Math.exp(5)• //calculate cos(2PI) Math.cos(2*Math.PI)• Math.round(X); // round X to an integer • Math.round(10*X)/10; // round X to tenths• Math.round(100*X)/100; // round X to

hundredths • Math.round(1000*X)/1000; // round X to

thousandths


Java Script Date Object• It is used to work with dates and times.• Date objects are created with new Date().• There are four ways of instantiating a date: 1)var d = new Date();

2)var d = new Date(milliseconds);3)var d = new Date(dateString);4)var d = new Date(year, month, day, hours,

minutes, seconds, milliseconds);


dateString-• String value representing a date.Year-• Integer value representing the year.Month-• Integer value representing the month, beginning with 0 for January to 11 for

December.day-• Integer value representing the day of the month (1-31).hour-• Integer value representing the hour of the day (0-23)minute-• Integer value representing the minute segment (0-59) of a time reading.Second-• Integer value representing the second segment (0-59) of a time reading.millisecond-• Integer value representing the millisecond segment (0-999) of a time

reading.






getDate()-• The getDate() method is used to get the day of the month of a

given date according to local time.The value returned by getDate() method is an integer between 1 and 31.



getHours()• The getHours() method is used to get the hour of a given date according to

local time. The value returned by getHours() method is an integer between 0 and 23.


The setTime()-• The setTime() method is used to set the value of a Date object according to

local time.


toSource()-• The toSource() method returns a string which represents the source code of

the date object.


toString()-• The toString() method is used to convert a date to a string.














Java script Boolean object• It is an object wrapper for boolean value.• The Javascript Boolean object is the data type

for boolean values(true or false). • Boolean values are used by programmers of

many languages as a way in which they can toggle between true and false in a variable or evaluate expressions.

• You do not have to use the "new Boolean" syntax and it is said to be more efficient NOT to use the constructor when establishing boolean objects.


All of the approaches shown above will establish Boolean objects in Javascript with initial values of either true or false.


Syntax-object.constructor

ExampleReturn the function that created the myvar object's prototype:var myvar = new Boolean(1);myvar.constructor;

The result will be:function Boolean() { [native code] }






toString()-

Example-Convert a Boolean value to a string:var bool = new Boolean(1);var myvar = bool.toString();

The result of myvar will be:true

valueOf()-

ExampleReturn the primitive value of a Boolean object:var bool = new Boolean(0);var myvar = bool.valueOf();

The result of myvar will be:false


toSource()-Javascript boolean toSource() method returns a string representing the source code of the object.


Java script Array object

• It is used to store a set of values in single variabe name.


OUTPUT-

Vanila is very yummy.Chocolate is very yummy.Strawberry is very yummy.Orange is very yummy.



constructor property-Syntaxobject.constructor


length property


Prototype property








JavaScript try and catch

• The try statement allows you to define a block of code to be tested for errors while it is being executed.

• The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.

• The JavaScript statements try and catch come in pairs.


Syntax-try { //Run some code here } catch(err) { //Handle}


Example 1-


OUTPUT-


Example 2-<html><head><script type="text/javascript"> function showBankBalance() { try { alert("My bank balance is $" + myBankBalance); } catch(err) { alert("Sorry, an error has occurred. We will fix the problem as soon as we get a pay

rise!"); } </script> </head> <body><input type="button" onclick="showBankBalance();" value="Show My Bank

Balance!" /> </body><html>


OUTPUT-


The Throw Statement

• The throw statement allows you to create a custom error.

• The correct technical term is to create or throw an exception.

• If you use the throw statement together with try and catch, you can control program flow and generate custom error messages.

Syntax- throw exception• The exception can be a JavaScript String, a

Number, a Boolean or an Object.


Example-


OUTPUT-


The innerHTML

• The innerHTML property is used to get or set the HTML content of an element node.

Example-1)get the element with the "someElement" id, and

give it new content.document.getElementById('someElement').innerHTML = "<p>new content</p>";

2) retrieve the content from an element. var content = document.getElementById('someElement').innerHTML; alert( content );

https://developer.mozilla.org/en/DOM/element.innerHTML




<span>and <div> Tag

• <div> and <span> tags allow you define exceptions to the general rules of your body text…and they are helpful tools for document designers and web developers

• A <span> element used to color a part of a text:Ex.<p>My mother has <span style="color:blue">blue</span> eyes.</p>



Example-



Example-


• The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

• The HTML <div> tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS.

http://www.htmldog.com/reference/htmltags/span/

http://www.htmldog.com/reference/htmltags/div/

http://www.htmldog.com/reference/htmltags/span/

http://www.htmldog.com/reference/htmltags/div/

Divisions

• Styles can be applied to blocks of HTML code using div

<head> <style>  </style></head><body> <div class="myclass"> <h2>A Simple Heading</h2> <p>some text . . . </p> </div></body>


CSS(Cascading Style Sheets)• CSS are the best approach for creating attractive

pages.• HTML was never intended to contain tags for

formatting a documet.HTML was intended to define the content of a document like:

<h1>This is Heading </h1> <p>This is Paragraph</p>• Development of large websites where fonts and

color information were added to every single page became a long and expensive process by the browsers in the form of style sheets.


• To solve this problem,In the year 1995 BERT BOAS and HAKON LIE of world wide web Consortium(W3C) put a proposal to work on style sheets.

• In HTML 4.0 all formatting could be removed from the HTML document and stored in a seprate CSS file.

• All browsers support CSS today.SYNTAX of CSS-Selector{ property:value}


Selector- it is normally the HTML element /tag you wish to

define.Property- it is the attribute you wish to change.Value- each property can take a value.• The property and value are seprated by a colon

and surrounded by curly braces.• If the value is multiple words put quotes arround

the value.


Example 1- Example 2-Body p{ { color:red font-family:”sans serif”;} text-align:center; color:pink }• If you want to specify more than one property you

must seprate each property with a semicolon.• You can group selectors with a comma.Example- h1,h2,h3,h4 { color:red }


Types of CSS

1)External Style Sheet-• An external Style Sheet is ideal when the style is

appliad to many pages.• With External Style Sheet,you can change the look of

an entire website by changing one file.• Each page must link to the style sheet using the

<link> tag.The <link>tag goes inside the head section- <head><link rel=“stylesheet” type =“text/css” href =“abc.css”> </head>


• An External Style Sheet can be written in any text editor.

• Your External style sheet should with .css extension.Example of external style sheet-hr{ color:red }P{Margin-left:20 px}Body{font-family:”sans serif”}


2)Internal Style Sheet-• It should be used when a single document has a unique

style.• You define Internal styles in the head section of an

HTML page by using the <style> tag.Example- <head> <style type =“text/css”> hr {color:red} p {margin-left:20 px} body{ background-image:url(“ “) } </style></head>


3)Inline Style sheet-• it can be appliad to individual elements in the

web page.• An inline losses many of the advantages of style

sheet by mixing content with presentation.• To use inline style, you use the style attribute in

the relevant tag.The style attribute can contain any CSS property.

• The example shows how to change the color and the left margin of a paragraph-

<p style =“color:black;margin-left:20px”> this is Paragraph </p>


• When all types of style sheet are used in a file, the highest preference is given in following order-

1.Inline Style Sheet 2.Internal Style Sheet 3.External Style Sheet


• Program that demonstrates the types of CSS-one.css (external CSS file) Body{background-color:lightblue}h2{text-align:center;color:blue}P{font-family:”sans serif”}

One.html (original html file)<html><head><link rel=“styelsheet” type=“text/css”

href=one.css>


<style type =“text/css”>hr{color:red}P{margin-left:20px}</style></head><body><h1 style=“margin-right:50px;text-

decoration:underline”> This is Inline CSS</h1><h2> this is new Header </h2> <hr><p> See the effect of Internal CSS here </p></body></html>


The id and class Selectors

• In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

The id Selector-• The id selector is used to specify a style for a

single, unique element.• The id selector uses the id attribute of the HTML

element, and is defined with a "#".Example-• The style rule below will be applied to the

element with id="para1":


<html> <head> <style> #para1 { text-align:center; color:red; } </style> </head><body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>


OUTPUT- Hello World!This paragraph is not affected by the style.


The class selector-• The class selector is used to specify a style for a

group of elements. Unlike the id selector, the class selector is most often used on several elements.

• This allows you to set a particular style for many HTML elements with the same class.

• The class selector uses the HTML class attribute, and is defined with a ".“(DOT)

• In the example below, all HTML elements with class="center" will be center-aligned:

Example .center {text-align:center;}


Example-<html> <head> <style> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html>


OUTPUT-

Center-aligned heading Center-aligned paragraph.


• You can also specify that only specific HTML elements should be affected by a class.

• In the example below, all p elements with class="center" will be center-aligned:

Example- p.center { text-align:center; }


Example-<html> <head> <style> p.center { text-align:center; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> </body></html>


OUTPUT-

This heading will not be affected This paragraph will be center-aligned.


AJAX(Asynchronous JavaScript and XML)• AJAX is a technique for creating fast and dynamic web

pages.• AJAX allows web pages to be updated asynchronously by

exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

• Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

• AJAX applications are browser- and platform-independent.

• Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.


How AJAX Works


Data Exchange in AJAX


AJAX is Based on Internet StandardsAJAX is based on internet standards, and uses a

combination of:• XMLHttpRequest object (to exchange data

asynchronously with a server)• JavaScript/DOM (to display/interact with the

information)• CSS (to style the data)• XML (often used as the format for transferring

data)


• Firefox, Safari, Opera, and some other browsers can create one of these objects simply using the “new” keyword.

<script type=“text/javascript”> ajaxRequest = new XMLHttpRequest(); </script>

• An XMLHTTPRequest object is in one of 5 states, as indicated by the readyState property 0. The request is not initialized 1. The request has been set up 2. The request has been sent 3. The request is in process 4. The request is complete

The XMLHttpRequest object


Example Code (Client Side)function sendRequest(textNode)var xmlHttp = GetXmlHttpObject();if (!xmlHttp) {return false;}xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState == 4) {textNode.nodeValue =xmlHttp.responseText;}}var requestURI ="http://greatbeyond.org/cgi-bin/request.cgi";xmlHttp.open("GET", requestURI, true);xmlHttp.send(null);}


Example Code (Server Side)

#!/usr/bin/perlprint("Content-type: text/plain\n\n");print("57 channels and nuthin' on");


Pros/Cons• Advantages:

– Independent of server technology.– Apart from obtaining the XMLHTTP object, all processing is same for all

browser types, because Javascript is used.– Permits the development of faster and more interactive web

applications.• Disadvantages:

– The back button problem. People think that when they press back button, they will return to the last change they made, but in AJAX this doesn not hold.

– Possible network latency problems. People should be given feedback about the processing.

– Does not run on all browsers.

Documents

Java Script JavaScript is a new scripting language which is being developed by Netscape. With Java Script you can easily create interactive web-pages