Ajax

1,669 views

Published on

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

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
1,669
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
84
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • CS252 S05
  • CS252 S05
  • Ajax

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

    ×