1 / 19

HTML DOM getElementById () Method

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 ")

ilyssa
Download Presentation

HTML DOM getElementById () Method

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML DOM getElementById() Method The getElementById() method returns a reference to the first object with the specified ID. Syntax document.getElementById(id)

  2. <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>

  3. DHTML http://www.midlandstech.com/edu/ed/ism/kirkpatrick/dhtml.html

  4. AJAX Asynchronous JavaScript And XML

  5. 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.

  6. 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.

  7. 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/asynchronous.html

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. 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.

  13. Example • EW.com poll

  14. 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.

  15. Can compromise the accessibility of a site for users with disabilities • Users unaccustomed to AJAX may have learning curve.

  16. AJAX is based on the XMLHttpRequest object. • Different browsers use different methods to create the XMLHttpRequest object.

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

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

  19. Files used • Ajax.js • Questions.xml • Quiz.js • List17.4.js

More Related