0
Ajax SUBMITTED BY NITIN RAMANI C.S.E 3 rd  Y 5 th  S R.N - 0712 CS 071049 SUBMITTED TO PRO. PUSHPARAJ PATEL SIR
<ul><ul><li>INTRODUCTION </li></ul></ul><ul><ul><li>PURPOSE </li></ul></ul><ul><ul><li>TECHNOLOGIES USED </li></ul></ul><u...
What is AJAX ? <ul><li>Asynchronous Javascript and XML. </li></ul><ul><li>Not a stand-alone language or technology. </li><...
Purpose of AJAX <ul><li>Prevents unnecessary reloading of a page. </li></ul><ul><li>When we submit a form, although most o...
Technologies Used <ul><li>AJAX uses: </li></ul><ul><ul><li>Javascript  (for altering the page) </li></ul></ul><ul><ul><li>...
Simple Processing <ul><li>AJAX is based on Javascript, and the main functionality is to  access the web server inside the ...
Example <ul><li>We want to input data into a textbox. </li></ul><ul><li>We want the textbox to have intellisense property;...
Data Exchange in AJAX <ul><li>In AJAX :  </li></ul>
Example(2) <ul><li>Another example:  </li></ul><ul><ul><li>http://www.w3schools.com/ajax/ajax_database.asp </li></ul></ul>...
History of AJAX <ul><li>Starts with web pages </li></ul><ul><li>Static web pages </li></ul><ul><ul><li>Static html page is...
Alternative Technologies <ul><li>Not a technology, but a combination of technologies. </li></ul><ul><li>Technologies with ...
Structure of System <ul><li>Client/Server architecture </li></ul><ul><li>XMLHTTP object is used to make request and get re...
C/S Processes <ul><li>Most of the time client requires two files </li></ul><ul><ul><li>Html page: handles GUI and calls a ...
Examination of Sample <ul><li>General process will be explained on an example at  http://www.w3schools.com/ajax/ajax_datab...
Html Code of Example <ul><li><html><head> </li></ul><ul><li><script src=&quot;selectcustomer.js&quot;> </li></ul><ul><li><...
JavaScript of Example <ul><li>function showCustomer(str) {  </li></ul><ul><li>var url=&quot;getcustomer.asp?sid=&quot; + M...
ASP Code of Example <ul><ul><li>sql=&quot;SELECT * FROM CUSTOMERS WHERE CUSTOMERID=&quot; </li></ul></ul><ul><ul><li>sql=s...
XMLHTTP Object <ul><li>The object that is used to connect to the remote server is called  XMLHTTP . </li></ul><ul><li>It r...
Creating the object <ul><li>For IE 5.5:  </li></ul><ul><li>objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”) </li></ul><ul...
Sending information <ul><li>After creating the object, we can send information to the web server and get the answer using ...
Retrieving information <ul><li>We get the returned value with the property “ xmlHttp.responseText ”. </li></ul>
Pros/Cons <ul><li>Advantages:  </li></ul><ul><ul><li>Independent of server technology. </li></ul></ul><ul><ul><li>Apart fr...
Questions and Answers <ul><li>Any questions  ? </li></ul><ul><li>Thank you for your time </li></ul>
Upcoming SlideShare
Loading in...5
×

Ajax presentation

1,070

Published on

Ajax is the web technology by which we remove the unnecessary refreshing the whole page

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,070
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
53
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax presentation"

  1. 1. Ajax SUBMITTED BY NITIN RAMANI C.S.E 3 rd Y 5 th S R.N - 0712 CS 071049 SUBMITTED TO PRO. PUSHPARAJ PATEL SIR
  2. 2. <ul><ul><li>INTRODUCTION </li></ul></ul><ul><ul><li>PURPOSE </li></ul></ul><ul><ul><li>TECHNOLOGIES USED </li></ul></ul><ul><ul><li>DATA EXCHANGE/ </li></ul></ul><ul><ul><li>HISTORY </li></ul></ul><ul><ul><li>STRUCTURE OF SYSTEM AND C/S PROCESS </li></ul></ul><ul><ul><li>ADVANTAGES </li></ul></ul><ul><ul><li>DISADVANTAGES </li></ul></ul>Contents
  3. 3. What is AJAX ? <ul><li>Asynchronous Javascript and XML. </li></ul><ul><li>Not a stand-alone language or technology. </li></ul><ul><li>It is a technique that combines a set of known technologies in order to create faster and more user friendly web pages. </li></ul><ul><li>It is a client side technology . </li></ul>
  4. 4. Purpose of AJAX <ul><li>Prevents unnecessary reloading of a page. </li></ul><ul><li>When we submit a form, although most of the page remains the same, whole page is reloaded from the server. </li></ul><ul><li>This causes very long waiting times and waste of bandwidth. </li></ul><ul><li>AJAX aims at loading only the necessary innformation, and making only the necessary changes on the current page without reloading the whole page. </li></ul>
  5. 5. Technologies Used <ul><li>AJAX uses: </li></ul><ul><ul><li>Javascript (for altering the page) </li></ul></ul><ul><ul><li>XML (for information exchange) </li></ul></ul><ul><ul><li>ASP or JSP (server side) </li></ul></ul>
  6. 6. Simple Processing <ul><li>AJAX is based on Javascript, and the main functionality is to access the web server inside the Javascript code . </li></ul><ul><li>We access to the server using special objects; we send data and retrieve data. </li></ul><ul><li>When user initiates an event, a javascript function is called which accesses server using the objects. </li></ul><ul><li>The received information is shown to the user by means of the Javascript’s function s. </li></ul>
  7. 7. Example <ul><li>We want to input data into a textbox. </li></ul><ul><li>We want the textbox to have intellisense property; guess entries according to input. </li></ul><ul><li>http://www.w3schools.com/ajax/ajax_example.asp </li></ul><ul><li>Only the ‘span’ part of the html code is changed. </li></ul>
  8. 8. Data Exchange in AJAX <ul><li>In AJAX : </li></ul>
  9. 9. Example(2) <ul><li>Another example: </li></ul><ul><ul><li>http://www.w3schools.com/ajax/ajax_database.asp </li></ul></ul><ul><li>Therefore, by using AJAX, unnecessary exchange of data is prevented, web pages become: </li></ul><ul><ul><li>More interactive </li></ul></ul><ul><ul><li>Faster </li></ul></ul><ul><ul><li>More user friendly </li></ul></ul>
  10. 10. History of AJAX <ul><li>Starts with web pages </li></ul><ul><li>Static web pages </li></ul><ul><ul><li>Static html page is loaded </li></ul></ul><ul><ul><li>No interaction with user </li></ul></ul><ul><li>Dynamic web pages </li></ul><ul><ul><li>Html page is generated dynamically </li></ul></ul><ul><ul><li>Interaction with user </li></ul></ul><ul><ul><li>Becomes slower as functionality increases </li></ul></ul><ul><ul><li>Speed becomes untolerable, so AJAX has been born </li></ul></ul>
  11. 11. Alternative Technologies <ul><li>Not a technology, but a combination of technologies. </li></ul><ul><li>Technologies with similar tasks: URLConnection, ASP and JSP </li></ul><ul><li>Other technologies returns whole page and client loads it. </li></ul><ul><li>Only necessary data is returned and that part is updated </li></ul>
  12. 12. Structure of System <ul><li>Client/Server architecture </li></ul><ul><li>XMLHTTP object is used to make request and get response in Client side </li></ul><ul><li>Request can be done via “GET” or “POST” methods </li></ul><ul><ul><li>“ GET”: parameters are attached to the url used to connect. </li></ul></ul><ul><ul><li>“ POST”: parameters are sent as parameters to a function </li></ul></ul><ul><li>Not many changes in Server side </li></ul><ul><ul><li>Response is a combination of xml tags </li></ul></ul>
  13. 13. C/S Processes <ul><li>Most of the time client requires two files </li></ul><ul><ul><li>Html page: handles GUI and calls a function of JavaScript. </li></ul></ul><ul><ul><li>JavaScript: handles the business logic of the system </li></ul></ul><ul><li>In JavaScript, a request is sent to client and response is taken from server via XMLHTTP object </li></ul><ul><li>Response of server should be returned in xml file structure </li></ul><ul><li>Only requested data is returned </li></ul>
  14. 14. Examination of Sample <ul><li>General process will be explained on an example at http://www.w3schools.com/ajax/ajax_database.asp . </li></ul><ul><li>In this example, one html page and one JavaSocket reside in Client side of the system while an ASP page resides in Server sides . </li></ul>
  15. 15. Html Code of Example <ul><li><html><head> </li></ul><ul><li><script src=&quot;selectcustomer.js&quot;> </li></ul><ul><li></script></head><body> </li></ul><ul><li><form> Select a Customer: </li></ul><ul><li>< select name=&quot;customers&quot; onchange=&quot;showCustomer(this.value)&quot;> </li></ul><ul><li><option value=&quot;ALFKI&quot;>Alfreds Futterkiste </li></ul><ul><li><option value=&quot;NORTS &quot;>North/South </li></ul><ul><li><option value=&quot;WOLZA&quot;>Wolski Zajazd </li></ul><ul><li></select></form><p> </li></ul><ul><li><div id=&quot;txtHint&quot;><b>Customer info will be listed here.</b></div> </li></ul><ul><li></p></body></html> </li></ul>
  16. 16. JavaScript of Example <ul><li>function showCustomer(str) { </li></ul><ul><li>var url=&quot;getcustomer.asp?sid=&quot; + Math.random() + &quot;&q=&quot; + str </li></ul><ul><li>xmlHttp=GetXmlHttpObject( stateChanged ) </li></ul><ul><li>xmlHttp.open(&quot;GET&quot;, url , true) </li></ul><ul><li>xmlHttp.send(null) </li></ul><ul><li>} </li></ul><ul><li>function stateChanged() { </li></ul><ul><li>if (xmlHttp.readyState==4 || xmlHttp.readyState==&quot;complete&quot;){ document.getElementById (&quot;txtHint&quot;) .innerHTML = xmlHttp.responseText </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  17. 17. ASP Code of Example <ul><ul><li>sql=&quot;SELECT * FROM CUSTOMERS WHERE CUSTOMERID=&quot; </li></ul></ul><ul><ul><li>sql=sql & request.querystring(&quot;q&quot;) </li></ul></ul><ul><ul><li>............ Open Connection to the DB </li></ul></ul><ul><ul><li>rs.Open sql, conn </li></ul></ul><ul><ul><li>response.write(&quot;<table>&quot;) </li></ul></ul><ul><ul><li>do until rs.EOF </li></ul></ul><ul><ul><li>for each x in rs.Fields </li></ul></ul><ul><ul><li>response.write(&quot;<tr><td><b>&quot; & x.name & &quot;</b></td>&quot;) </li></ul></ul><ul><ul><li>response.write(&quot;<td> & x.value & &quot;</td></tr>&quot;) </li></ul></ul><ul><ul><li>next </li></ul></ul><ul><ul><li>rs.MoveNext </li></ul></ul><ul><ul><li>loop </li></ul></ul><ul><ul><li>response.write(&quot;</table>&quot;) </li></ul></ul>
  18. 18. XMLHTTP Object <ul><li>The object that is used to connect to the remote server is called XMLHTTP . </li></ul><ul><li>It resembles the Java’s URL object that is used to access a specific URL and get the contents. </li></ul>
  19. 19. Creating the object <ul><li>For IE 5.5: </li></ul><ul><li>objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”) </li></ul><ul><li>For Mozilla: </li></ul><ul><li>objXmlHttp=new XMLHttpRequest() </li></ul>
  20. 20. Sending information <ul><li>After creating the object, we can send information to the web server and get the answer using this object’s functions: </li></ul><ul><li>GET METHOD: xmlhttp.open(“GET”, url, true) </li></ul><ul><li> xmlhttp.send() </li></ul><ul><li>POST METHOD: xmlhttp.open(&quot;POST&quot;, url, true) </li></ul><ul><li>xmlhttp.send(“date=11-11-2006&name=Ali&quot;) </li></ul><ul><li>Third argument tells that data will be processes asynchronously. When server responds, the “OnReadyStateChange” event handler will be called. </li></ul>
  21. 21. Retrieving information <ul><li>We get the returned value with the property “ xmlHttp.responseText ”. </li></ul>
  22. 22. Pros/Cons <ul><li>Advantages: </li></ul><ul><ul><li>Independent of server technology. </li></ul></ul><ul><ul><li>Apart from obtaining the XMLHTTP object, all processing is same for all browser types, because Javascript is used. </li></ul></ul><ul><ul><li>Permits the development of faster and more interactive web applications. </li></ul></ul><ul><li>Disadvantages: </li></ul><ul><ul><li>The back button problem. People think that when they press back button, they will return to the last change they made, but in AJAX this doesn not hold. </li></ul></ul><ul><ul><li>Possible network latency problems. People should be given feedback about the processing. </li></ul></ul><ul><ul><li>Does not run on all browsers. </li></ul></ul>
  23. 23. Questions and Answers <ul><li>Any questions ? </li></ul><ul><li>Thank you for your time </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×