Download as PDF, PPTX
Uploaded bywahidullah mudaser
AJAX-Asynchronous JavaScript and XML
This document provides an outline and overview of Asynchronous JavaScript and XML (AJAX). It discusses how AJAX allows for interactive web pages without page refreshes by using JavaScript to asynchronously communicate with the server in the background. The document outlines the key components of AJAX including the XMLHttpRequest object for sending and receiving data from servers, and how this allows modifying page content without refreshing. It also provides examples of using AJAX and the DOM to dynamically update parts of an existing HTML page with new content from the server.
More Related Content
Similar to AJAX-Asynchronous JavaScript and XML
AJAX-Asynchronous JavaScript and XML
- 1. iFour ConsultancyAJAX web Engineering|| winter 2017 wahidullah Mudaser assignment.cs2017@gmail.com Lecture 12 AJAX
- 2. What’s Ajax? JavaScript in 10 minutes DOM and XMLHttpRequest Programming Ajax with Mochikit Ajax Pitfalls Ajax in gnizr OUTLINE
- 3. Asynchronous JavaScriptAnd XML The idea is to enable interactive Web pages without requiring the browser to refresh. Browser JavaScript code Web Server “Here, data” Modify the page content, without refreshing the page “Give me some data”
- 4. In thetradition HTTP world Every request results in a new page loading Dynamic pages are created on the server-side Data, format and styling are done on the server In the Ajax world The result of an Ajax call may only change a small parts of an existing HTML page Server sets up the page structure, JavaScript code performs the content creation Data, format and styling are done via JavaScript (CSS and XHTML) Ajax vs. tradition HTTP paradigm
- 5. Ajax is a3-Legged Stool XHTML JavaScript CSS Ajax
- 6. JavaScript in 10Minutes
- 7. Say “hello world” What’s‘document’?
- 8. Write into HTML<body/> ‘document’ is a predefined JavaScript variable that represents the entire HTML document. You can read from and write to the current document via this ‘document’ variable.
- 9. Loading JavaScript code Two ways to load your JS code Inline within the same HTML document From a separate file on the server e.g., Replace ‘xxx.js’ with http://path/to/myprogram.js
- 10.
- 11. Define Array andAssociative Array
- 12.
- 13. Assign Function toa Variable In JavaScript, you can assign function to a variable.
- 14. Additional Resource JavaScriptTutorial /http://www.w3schools.com/js/ PPK on JavaScript http://www.quirksmode.org/ I love it!
- 15.
- 16. Document ObjectModel All XHTML doc are XML doc DOM is a process-model for XML For reading and writing XML doc We can use DOM to manipulate XHTML DOM
- 17.
- 18. An XML DOM(not XHTML) <bookstore> <book category=“c1”> <title lang=“en”>Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> </bookstore>
- 19. HTML DOM Tree– an example
- 20. XMLHttpRequest Is aspecification Defines an API that provides scripted client functionality for transferring data between a client and a server. The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Browser JavaScript code Web Server “Give me some data” “Here, data.” Modify the page content, without refreshing the page Done via XMLHttpRequest
- 21. Clarification Use XMLHttpRequestto send and receive data from servers via HTTP Data sent and received can be any text format, not just XML. Works over HTTP and HTTPS
- 22. All modernbrowsers (Chrome, IE7+, Firefox, Safari, and Opera) have a built-in XMLHttpRequest object. var xhttp; if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
- 23. we usethe open() and send() methods of the XMLHttpRequest object: Send a Request To a Server
- 24.
- 25. Questions? http://www.ifourtechnolab.com/ ASP.NET SoftwareDevelopment Companies India