Ajax
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Ajax

  • 1,922 views
Uploaded on

Ajax means to make request from the server without reloading a page......

Ajax means to make request from the server without reloading a page...
by shah Khalid
UOP Peshawar.

More in: Technology
  • 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
1,922
On Slideshare
1,914
From Embeds
8
Number of Embeds
7

Actions

Shares
Downloads
80
Comments
0
Likes
0

Embeds 8

http://uni-mania.blogspot.com 2
http://uni-mania.blogspot.mx 1
http://uni-mania.blogspot.fr 1
http://uni-mania.blogspot.ca 1
http://uni-mania.blogspot.co.uk 1
http://uni-mania.blogspot.de 1
http://uni-mania.blogspot.tw 1

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
  • CS252 S05
  • CS252 S05

Transcript

  • 1. Asynchronous JavaScript and XML (AJAX) BY: Shah Khalid Ms (CS) 2 nd semester. Department of Computer Science University Of Peshawar AJAX
  • 2. AJAX
    • Why we need Ajax?
    • What actually Ajax?
    • • How does it work?
    • • Web standards used in Ajax.
    • Benefits and Drawbacks
    • • Example.
    Department of Computer Science University Of Peshawar Agenda
  • 3. AJAX
    • To build rich internet applications.
    Department of Computer Science University of Peshawar Why we need AJAX? What is the Rich internet applications ? (RIAs)
  • 4. AJAX
    • AJAX = Asynchronous JavaScript and XML
    • not a new programming language.
    • technique for creating
      • better, faster, and more interactive web applications
    • communicate directly with the server, using XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.
    Department of Computer Science University of Peshawar What is Ajax?
  • 5. AJAX
    • uses asynchronous data transfer (HTTP requests) between the browser and the web server.
      • allowing web pages to request small bits of information from the server instead of whole pages.
    • makes Internet applications smaller, faster and more user-friendly.
    Department of Computer Science University Of Peshawar
  • 6. AJAX
    • JavaScript
    • XML
    • HTML
    • CSS
      • well defined, and supported by all major browsers.
    Department of Computer Science University Of Peshawar Web Standards used in AJAX
  • 7. AJAX
    • A client event occurs.
    • An XMLHttpRequest object is created and configured.
    • The XMLHttpRequest object makes a call.
    • The request is processed by the ValidateServlet.
    • The ValidateServelte returns an XML document containing the result.
    • The XML HttpRequest object calls the callback() function and processes the result.
    • The HTML DOM is updated.
    Department of Computer Science University of Peshawar How it works
  • 8. AJAX
    • A page element must make a javascript call
    • The javascript function must create an XMLHttpRequest object which is used to contact the server
    • Javascript must determine whether the client is IE or Firefox
    • http = new ActiveXObject("Microsoft.XMLHTTP"); (IE)
    • http = new XMLHttpRequest(); (Mozilla)
    Department of Computer Science University Of Peshawar 1 – XMLHttpRequest object
  • 9. AJAX
    • Once the XMLHttpRequest object has been created it must be set up to call the server
    • http.open("GET", serverurl, true);
    • http.onreadystatechange = jsMethodToHandleResponse;
    • he code above utilizes the XMLHttpRequest object to contact the server and retrieve server data
    • When the response returns the javascript method jsMethodToHandleResponse can update the page
    Department of Computer Science University Of Peshawar 2 - Sending the request
  • 10. AJAX
    • Implementation of the javascript method which will be used to handle the response (Event Handler)
    • function jsMethodToHandleResponse(str)
    • {
    • //simply take the response returned an update an html element with the returned value from the server
    • document.getElementById("result").innerHTML = str;
    • }
    • Now the page has communicated with the server without having to refresh the entire page
    Department of Computer Science University Of Peshawar 3 - Handling the Response
  • 11. AJAX Department of Computer Science University Of Peshawar
  • 12. AJAX
    • Traditional web applications can run slowly.
    • less user-friendly.
    • With AJAX.
      • communicates directly with the server, through the JavaScript XMLHttpRequest object.
    • With an HTTP request, a web page can make a request to, and get a response from a web server without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.
    Department of Computer Science University Of Peshawar AJAX Uses HTTP Requests
  • 13. AJAX
    • Based on open standards.
    • Can decrease bandwidth by only updating content that needs to be updated.
    • Allows sites to be more interactive, yet quicker than static sites.
    • If a page section encounters an error, other sections are not affected.
    • Traffic to and from the server is reduced.
    Department of Computer Science University Of Peshawar Ajax Advantages
  • 14. AJAX
    • May not register with browser’s history engine, making back button only semi-functional
    • Does not work if user has JavaScript disabled in browser
    • Increase development time and costs.
    Department of Computer Science University Of Peshawar Ajax Disadvantages
  • 15. AJAX
    • http://www.w3schools.com/Ajax/Default.Asp
    • http://en.wikipedia.org/wiki/Ajax_(programming)
    • http://www.ajaxwith.com .
    Department of Computer Science University Of Peshawar References
  • 16. AJAX
    • Any questions?
      • Thank you very much for attending!
    Department of Computer Science University Of Peshawar