HTML DOM getElementById()

californiamandrillSoftware and s/w Development

Dec 13, 2013 (3 years and 4 months ago)

229 views

HTML DOM getElementById()
Method

The getElementById() method returns a
reference to the first object with the
specified ID.


Syntax

document.getElementById(id)


<html>

<head>

<script type="text/javascript">

function getValue()


{


var x=document.getElementById("myHeader")


alert(x.innerH)


}

</script>

</head>

<body>


<h1 id="myHeader" onclick="getValue()">This is a header</h1>

<p>Click on the header to alert its value</p>


</body>

</html>

DHTML

http://www.midlandstech.com/edu/ed/ism/k
irkpatrick/dhtml.html




AJAX

Asynchronous JavaScript And XML

AJAX is a type of programming made popular in 2005.


AJAX is not a new programming language, but a new way to use
existing standards combining JavaScript, CSS, HTML and XML.


Asynchronous

Not synchronized; that is, not occurring at
predetermined or regular intervals. The
term asynchronous is usually used to
describe communications in which data
can be transmitted intermittently rather
than in a steady stream.


For example, a telephone conversation is
asynchronous because both parties can
talk whenever they like. If the
communication were synchronous, each
party would be required to wait a specified
interval before speaking.


http://www.webopedia.com/TERM/A/asynch
ronous.html


AJAX uses JavaScript’s capability to use a
built
-
in object, XMLHttpRequest, to
communicate with a web server without
submitting a form or loading a page. It is
supported by most modern browsers.

Client
-
side
-

JavaScript


The script creates an XMLHttpRequest
object and sends to the web server.


The server responds by sending the
contents of a file, or the output of a
server
-
side program.



When the response arrives from the
server, a JavaScript function is triggered
to act on the data.


Because the goal is a more responsive
user interface, the script usually displays
the data from the server using the DOM,
eliminating the need for a page refresh.


Server
-
Side


The server responds to the client
-
side
request by sending the contents of a file,
or the output of a server
-
side program.



Not limited to XML on the server side. Can
be a program running a language such as
PHP, Perl, ASP.net, ColdFusion or even a
static file.

JavaScript can send data to a server
-
side
program using GET or POST methods, the
same two ways and HTML form works.


In a GET request, the data is encoded in the
URL that loads the program. In a post
request, it is sent separately and can
contain more data.

Example


EW.com

poll

Limitations of AJAX


The script and the XML data or server
-
side
program it requests data from must be on
the same domain.


IE 6 uses ActiveX to implement
XMLHttpRequest. Security settings in the
browser must be set to allow ActiveX.


Older browsers don’t support
XMLHttpRequest.


Can compromise the accessibility of a site
for users with disabilities


Users unaccustomed to AJAX may have
learning curve.


AJAX is based on the XMLHttpRequest
object.



Different browsers use different methods
to create the XMLHttpRequest object.



Internet Explorer 5 and IE 6 use an Active
Object, while other browsers use the built
-
in JavaScript object called
XMLHttpRequest.


Example


http://www.midlandstech.com/edu/ed/ism
/kirkpatrick/ajax/ajaxquiz.html

Files used


Ajax.js


Questions.xml


Quiz.js


List17.4.js