Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

AJAX-Asynchronous JavaScript and XML

72 Aufrufe

Veröffentlicht am

in this lecture you will learn about how ajax is working in web application

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

AJAX-Asynchronous JavaScript and XML

  1. 1. iFour ConsultancyAJAX web Engineering || winter 2017 wahidullah Mudaser assignment.cs2017@gmail.com  Lecture 12  AJAX
  2. 2.  What’s Ajax?  JavaScript in 10 minutes  DOM and XMLHttpRequest  Programming Ajax with Mochikit  Ajax Pitfalls  Ajax in gnizr OUTLINE
  3. 3.  Asynchronous JavaScript And 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. 4.  In the tradition 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. 5. Ajax is a 3-Legged Stool XHTML JavaScript CSS Ajax
  6. 6. JavaScript in 10 Minutes
  7. 7. Say “hello world” What’s ‘document’?
  8. 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. 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. 10. Define variables
  11. 11. Define Array and Associative Array
  12. 12. Function
  13. 13. Assign Function to a Variable  In JavaScript, you can assign function to a variable.
  14. 14. Additional Resource  JavaScript Tutorial  /http://www.w3schools.com/js/  PPK on JavaScript  http://www.quirksmode.org/ I love it!
  15. 15. DOM and XMLHttpRequest
  16. 16.  Document Object Model  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. 17. DOM Tree http://flickr.com/photos/13571173@N00/411653343/
  18. 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. 19. HTML DOM Tree – an example
  20. 20. XMLHttpRequest  Is a specification  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. 21. Clarification  Use XMLHttpRequest to 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. 22.  All modern browsers (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. 23.  we use the open() and send() methods of the XMLHttpRequest object: Send a Request To a Server
  24. 24. AJAX exmple
  25. 25. Questions? http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India

×