Ajax
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
157
On Slideshare
157
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Week Target Achieved 1 30 22 2 30 23 3 30 25 4 30 26 Typing Speed
  • 3. Jobs Applied Week Company Designation Applied Date Current Status 1 2 3
  • 4. Ajax MuhammedAjmalIK mhdajmalik@gmail.com www.facebook.com/ajuik2008 twitter.com/username in.linkedin.com/in/profilename 9745020951
  • 5. Overview • Introduction • Ajax technologies • XMLHttpRequest • How Ajax work? • Ajax example
  • 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. Web page without Ajax
  • 8. Web page with Ajax
  • 9. Where it is used? • Google Map • Facebook • Twitter • you tube
  • 10. AJAX Technologies • HTML/CSS • DOM • XML or JSON • XMLHttpRequest • Javascript
  • 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. Properties of XMLHttpRequest object
  • 13. Methods of XMLHttpRequest object
  • 14. Status Property Value 200 = ok 201 = created 204 = no content 404 = not found
  • 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. 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. Create Request contd.. • Step 4: Send the request – xmlhttp.send(null);
  • 18. Simple Example
  • 19. How AJAX works
  • 20. Example Check username
  • 21. Example contd..
  • 22. Example contd..
  • 23. Example contd..
  • 24. Example contd..
  • 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. 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.