Ajax

236 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
236
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax

  1. 1. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  2. 2. Week Target Achieved 1 30 22 2 30 23 3 30 25 4 30 26 Typing Speed
  3. 3. Jobs Applied Week Company Designation Applied Date Current Status 1 2 3
  4. 4. Ajax MuhammedAjmalIK mhdajmalik@gmail.com www.facebook.com/ajuik2008 twitter.com/username in.linkedin.com/in/profilename 9745020951
  5. 5. Overview • Introduction • Ajax technologies • XMLHttpRequest • How Ajax work? • Ajax example
  6. 6. Introduction • It is an acronym for Asynchronous Javascript And XML. • It is a group of inter-related technologies • AJAX allows you to send and receive data asynchronously without reloading the web page.
  7. 7. Web page without Ajax
  8. 8. Web page with Ajax
  9. 9. Where it is used? • Google Map • Facebook • Twitter • you tube
  10. 10. AJAX Technologies • HTML/CSS • DOM • XML or JSON • XMLHttpRequest • Javascript
  11. 11. XMLHttpRequest • The keystone of AJAX is the XMLHttpRequest object. • The XMLHttpRequest object is used to exchange data with a server behind the scenes.
  12. 12. Properties of XMLHttpRequest object
  13. 13. Methods of XMLHttpRequest object
  14. 14. Status Property Value 200 = ok 201 = created 204 = no content 404 = not found
  15. 15. Create XMLHttpRequest object var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
  16. 16. Create Request • Step 1: Creating a XML HTTP Request object – var xmlhttp = new XMLHttpRequest(); • Step 2: Specifying where and how to retrieve the resource – xmlhttp.open('GET', 'foo.jsp', true); • Step 3: Setting a function to be called when the response is returned by the server – xmlhttp.onreadystatechange = function() { // Code to handle the response here }
  17. 17. Create Request contd.. • Step 4: Send the request – xmlhttp.send(null);
  18. 18. Simple Example
  19. 19. How AJAX works
  20. 20. Example Check username
  21. 21. Example contd..
  22. 22. Example contd..
  23. 23. Example contd..
  24. 24. Example contd..
  25. 25. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
  26. 26. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com NIT-TBI, NIT Campus, Kozhikode, Kerala, India.

×