SlideShare a Scribd company logo
 
AJAX: Ajax is a way of developing Web applications that combines: * XHTML and CSS standards based presentation * Interaction with the page through the DOM * Data interchange with XML and XSLT * Asynchronous data retrieval wit XMLHttpRequest * JavaScript to tie it all together
What is XMLHttpRequest (XHR)? XMLHttpRequest (XHR) is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script.The data might be received from the server as XML textor as plain text
ASYNCHRONOUS This is the key. In standard Web applications, the interaction between the customer and the server is  synchronous . This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the results back. With Ajax, the JavaScript that is loaded when the page loads handles most of the basic tasks such as data validation and manipulation, as well as display rendering the Ajax engine handles without a trip to the server. At the same time that it is making display changes for the customer, it is sending data back and forth to the server. But the data transfer is not dependent upon actions of the customer.
How does it work?
Creating XMLHttpRequest Objects: Most of the modern browsers have the XMLHttpRequest support. However, in Internet Explorer browsers till IE7 XMLHttpRequest was offered only using ActiveX object. The later versions of Internet Explorer would support XMLHttpRequest. The following function would create an XMLHttpRequest Object in most of the Browsers function createXMLHttpRequest() { try { return new XMLHttpRequest(); } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} alert("Sorry, the XMLHttpRequest is not supported"); return null; } var xhrObj = createXMLHttpRequest();
Request  SENDING REQUEST: To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); GET Requests: xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send(); POST Requests: xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
Making a request: 1.  Get whatever data you need from the Web  form. 2. Build the URL to connect to. 3. Open a connection to the server. 4. Set up a function for the server to run when it's done. 5. Send the request.
SIMPLE EXAMPLE: Inorder to make a text box ,and getting values thereby sending request to the server ,we need to make a text box and make the javascript with the coding and also calling functions with in the server ,by return sending the values back to the webpage,the javascript is as follows:
STEP 1 :TEST <html> <head> <title>AJAX Hello World Test Page</title> <link rel=&quot;stylesheet&quot; href=&quot;http://www.EXAMPLE.com&quot; type=&quot;text/css&quot; title=&quot;default&quot; media=&quot;screen&quot;> <script type=&quot;text/javascript&quot; src=&quot;ajax.js&quot;></script> </head> <body> <p> <input id=&quot;testmsg&quot; type=&quot;text&quot; value=&quot;Hello AJAX&quot;> <button onclick=&quot;talktoServer()&quot;>Say Hello to Server</button> <div id=&quot;msg_display&quot; style=&quot;{ background: yellow; font-weight: bold; }&quot;>  The data from the server will go here  ...</div> </body> </html>
STEP 2: POST function talktoServer(){ var req = newXMLHttpRequest(); //register the callback handler function var callbackHandler = getReadyStateHandler(req, updateMsgOnBrowser); req.onreadystatechange = callbackHandler; req.open(&quot;POST&quot;, &quot;servertime.php&quot;, true); req.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;); //get the value from the text input element and send it to server var testmsg = document.getElementById(&quot;testmsg&quot;); var msg_value = testmsg.value; req.send(&quot;msg=&quot;+msg_value); }
NOTE: If browser is mozilla or safari or opera Then it creates new  xmlhttprequest Otherwise it is Internet explorer Then it creates new  activexoject Else ,browser does not support  xmlhttprequest
Step 3: response from server // This is the callback functions that gets called // for the response from the server with the XML data var lastPing = 0; function updateMsgOnBrowser(testXML) { var test = testXML.getElementsByTagName(&quot;test&quot;)[0]; var message = testXML.getElementsByTagName(&quot;message&quot;)[0]; var ip = testXML.getElementsByTagName(&quot;ip&quot;)[0]; var timestamp = test.getAttribute(&quot;timestamp&quot;); if (timestamp > lastPing) { astPing = timestamp; var ip_value = ip.firstChild.nodeValue; var message_value = message.firstChild.nodeValue; var msg_display = document.getElementById(&quot;msg_display&quot;); msg_display.innerHTML = &quot; Server got the  message: amp;quot;&quot; +  message_value + &quot;amp;quot;&quot; + &quot;<br>Server IP: &quot;+ ip_value +  &quot; Server Timestamp: amp;quot;&quot;+ timestamp + &quot;amp;quot;&quot; ; } }
For callback functions //the following two functions are helper infrastructure to  //craete a XMLHTTPRequest and register a listner callback function function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Try ActiveX try {  xmlreq = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (e1) {  // first method failed  try { xmlreq = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch (e2) {   // both methods failed  } }}return xmlreq;}
function getReadyStateHandler(req, responseXmlHandler) { return function () { if (req.readyState == 4) { if (req.status == 200) { responseXmlHandler(req.responseXML); } else { var hellomsg = document.getElementById(&quot;hellomsg&quot;); hellomsg.innerHTML = &quot;ERROR: &quot;+ req.status; } } } }
<? header('Content-Type: application/xml'); $msg = htmlentities(trim(stripslashes($_REQUEST['msg']))); $ts = time(); $ip = gethostbyname(&quot;example.com&quot;);  print (&quot;<?xml version=amp;quot;1.0amp;quot;?>&quot;); print (&quot;<test timestamp=amp;quot;$tsamp;quot;>&quot;); print (&quot;<ip>$ip</ip>&quot;); print (&quot;<message>$msg</message>&quot;); print (&quot;</test>&quot;); ?> Thus the data request sent from the webpage to server and after certain schematic conditions,the data is back on the [as said asynchronous] it displayed without affecting the process Step 4:Data back to the weboage
RESPONSE HANDLING: There are two types of response *response text and response xml *many other forms like json,html etc[ these may come under one of the those two categories]
USAGE IN BLOGS: 1.We need to check whether the client can actually handle this or we need to import one [just the same of creating xml request] 2.we can link in the database as we needed ,example lets take calender,it need to be updated from a site and then that particular data need to be used in here. AJAX  is combination of two AJAX =DOM +XMLhttprequest
DRAWBACKS: 1.AJAX are mainly suitable for thier dynamic pages,so its harder to develop them in static web pages 2.Dynamically created pages will not go on with the brower's page ,so when the user click on the back button,they might not go to the previous page but to a very first page 3.Dynamic webpages will make bookmarking difficult for the uers 4.Many web crawlers will not allow java script,so inorder to prevent it,alternate method must be induced in order to index them using the search engines 5.AJAX powered webpages generate lot of user requests ,taking longer access rate in server to respong the user

More Related Content

What's hot

AJAX
AJAXAJAX
Web II - 02 - How ASP.NET Works
Web II - 02 - How ASP.NET WorksWeb II - 02 - How ASP.NET Works
Web II - 02 - How ASP.NET Works
Randy Connolly
 
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax
Anand Kumar Rajana
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
Raja V
 
Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
John Coggeshall
 
1 ppt-ajax with-j_query
1 ppt-ajax with-j_query1 ppt-ajax with-j_query
1 ppt-ajax with-j_query
Fajar Baskoro
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
Bharat_Kumawat
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
Nir Elbaz
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentationthinkphp
 
Ajax
AjaxAjax
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 

What's hot (19)

ajax_pdf
ajax_pdfajax_pdf
ajax_pdf
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
AJAX
AJAXAJAX
AJAX
 
Web II - 02 - How ASP.NET Works
Web II - 02 - How ASP.NET WorksWeb II - 02 - How ASP.NET Works
Web II - 02 - How ASP.NET Works
 
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
 
1 ppt-ajax with-j_query
1 ppt-ajax with-j_query1 ppt-ajax with-j_query
1 ppt-ajax with-j_query
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Copy of ajax tutorial
Copy of ajax tutorialCopy of ajax tutorial
Copy of ajax tutorial
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
 
RicoAjaxEngine
RicoAjaxEngineRicoAjaxEngine
RicoAjaxEngine
 
Ajax
AjaxAjax
Ajax
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Ajax
AjaxAjax
Ajax
 
Vb.Net Web Forms
Vb.Net  Web FormsVb.Net  Web Forms
Vb.Net Web Forms
 

Similar to Ajax

Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
engcs2008
 
AJAX
AJAXAJAX
AJAXARJUN
 
M Ramya
M RamyaM Ramya
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
Adnan Sohail
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
Oliver Cai
 
Ajax
AjaxAjax
Unit-5.pptx
Unit-5.pptxUnit-5.pptx
Unit-5.pptx
itzkuu01
 
AJAX
AJAXAJAX
AJAX
AJAXAJAX
Core Java tutorial at Unit Nexus
Core Java tutorial at Unit NexusCore Java tutorial at Unit Nexus
Core Java tutorial at Unit Nexus
Unit Nexus Pvt. Ltd.
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
Pamela Fox
 
AJAX.pptx
AJAX.pptxAJAX.pptx
AJAX.pptx
Ganesh Chavan
 
Ajax
AjaxAjax
Ajax tutorial by bally chohan
Ajax tutorial by bally chohanAjax tutorial by bally chohan
Ajax tutorial by bally chohan
WebVineet
 

Similar to Ajax (20)

Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
ajax_pdf
ajax_pdfajax_pdf
ajax_pdf
 
Ajax
AjaxAjax
Ajax
 
AJAX
AJAXAJAX
AJAX
 
M Ramya
M RamyaM Ramya
M Ramya
 
Ajax
AjaxAjax
Ajax
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
 
Ajax
AjaxAjax
Ajax
 
Unit-5.pptx
Unit-5.pptxUnit-5.pptx
Unit-5.pptx
 
AJAX
AJAXAJAX
AJAX
 
AJAX
AJAXAJAX
AJAX
 
Core Java tutorial at Unit Nexus
Core Java tutorial at Unit NexusCore Java tutorial at Unit Nexus
Core Java tutorial at Unit Nexus
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
 
AJAX.pptx
AJAX.pptxAJAX.pptx
AJAX.pptx
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax tutorial by bally chohan
Ajax tutorial by bally chohanAjax tutorial by bally chohan
Ajax tutorial by bally chohan
 

More from Rathan Raj

Database Normalization
Database NormalizationDatabase Normalization
Database Normalization
Rathan Raj
 
Photochemical smog
Photochemical smogPhotochemical smog
Photochemical smogRathan Raj
 

More from Rathan Raj (9)

Database Normalization
Database NormalizationDatabase Normalization
Database Normalization
 
Photochemical smog
Photochemical smogPhotochemical smog
Photochemical smog
 
Web20
Web20Web20
Web20
 
Apache
ApacheApache
Apache
 
Css
CssCss
Css
 
Html
HtmlHtml
Html
 
Linux
LinuxLinux
Linux
 
Mysql
MysqlMysql
Mysql
 
Php
PhpPhp
Php
 

Recently uploaded

Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
Jean Carlos Nunes Paixão
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
Vivekanand Anglo Vedic Academy
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
Jisc
 
Normal Labour/ Stages of Labour/ Mechanism of Labour
Normal Labour/ Stages of Labour/ Mechanism of LabourNormal Labour/ Stages of Labour/ Mechanism of Labour
Normal Labour/ Stages of Labour/ Mechanism of Labour
Wasim Ak
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
Balvir Singh
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
vaibhavrinwa19
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Thiyagu K
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
MysoreMuleSoftMeetup
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
Levi Shapiro
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
Peter Windle
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
Jisc
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
DhatriParmar
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
Delapenabediema
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
Vikramjit Singh
 
Advantages and Disadvantages of CMS from an SEO Perspective
Advantages and Disadvantages of CMS from an SEO PerspectiveAdvantages and Disadvantages of CMS from an SEO Perspective
Advantages and Disadvantages of CMS from an SEO Perspective
Krisztián Száraz
 
The basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptxThe basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptx
heathfieldcps1
 
Best Digital Marketing Institute In NOIDA
Best Digital Marketing Institute In NOIDABest Digital Marketing Institute In NOIDA
Best Digital Marketing Institute In NOIDA
deeptiverma2406
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
TechSoup
 

Recently uploaded (20)

Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
 
Normal Labour/ Stages of Labour/ Mechanism of Labour
Normal Labour/ Stages of Labour/ Mechanism of LabourNormal Labour/ Stages of Labour/ Mechanism of Labour
Normal Labour/ Stages of Labour/ Mechanism of Labour
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
 
Advantages and Disadvantages of CMS from an SEO Perspective
Advantages and Disadvantages of CMS from an SEO PerspectiveAdvantages and Disadvantages of CMS from an SEO Perspective
Advantages and Disadvantages of CMS from an SEO Perspective
 
The basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptxThe basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptx
 
Best Digital Marketing Institute In NOIDA
Best Digital Marketing Institute In NOIDABest Digital Marketing Institute In NOIDA
Best Digital Marketing Institute In NOIDA
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
 

Ajax

  • 1.  
  • 2. AJAX: Ajax is a way of developing Web applications that combines: * XHTML and CSS standards based presentation * Interaction with the page through the DOM * Data interchange with XML and XSLT * Asynchronous data retrieval wit XMLHttpRequest * JavaScript to tie it all together
  • 3. What is XMLHttpRequest (XHR)? XMLHttpRequest (XHR) is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script.The data might be received from the server as XML textor as plain text
  • 4. ASYNCHRONOUS This is the key. In standard Web applications, the interaction between the customer and the server is synchronous . This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the results back. With Ajax, the JavaScript that is loaded when the page loads handles most of the basic tasks such as data validation and manipulation, as well as display rendering the Ajax engine handles without a trip to the server. At the same time that it is making display changes for the customer, it is sending data back and forth to the server. But the data transfer is not dependent upon actions of the customer.
  • 5. How does it work?
  • 6. Creating XMLHttpRequest Objects: Most of the modern browsers have the XMLHttpRequest support. However, in Internet Explorer browsers till IE7 XMLHttpRequest was offered only using ActiveX object. The later versions of Internet Explorer would support XMLHttpRequest. The following function would create an XMLHttpRequest Object in most of the Browsers function createXMLHttpRequest() { try { return new XMLHttpRequest(); } catch(e) {} try { return new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (e) {} alert(&quot;Sorry, the XMLHttpRequest is not supported&quot;); return null; } var xhrObj = createXMLHttpRequest();
  • 7. Request SENDING REQUEST: To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: xmlhttp.open(&quot;GET&quot;,&quot;ajax_info.txt&quot;,true); xmlhttp.send(); GET Requests: xmlhttp.open(&quot;GET&quot;,&quot;demo_get.asp&quot;,true); xmlhttp.send(); POST Requests: xmlhttp.open(&quot;POST&quot;,&quot;demo_post.asp&quot;,true); xmlhttp.send();
  • 8. Making a request: 1. Get whatever data you need from the Web form. 2. Build the URL to connect to. 3. Open a connection to the server. 4. Set up a function for the server to run when it's done. 5. Send the request.
  • 9. SIMPLE EXAMPLE: Inorder to make a text box ,and getting values thereby sending request to the server ,we need to make a text box and make the javascript with the coding and also calling functions with in the server ,by return sending the values back to the webpage,the javascript is as follows:
  • 10. STEP 1 :TEST <html> <head> <title>AJAX Hello World Test Page</title> <link rel=&quot;stylesheet&quot; href=&quot;http://www.EXAMPLE.com&quot; type=&quot;text/css&quot; title=&quot;default&quot; media=&quot;screen&quot;> <script type=&quot;text/javascript&quot; src=&quot;ajax.js&quot;></script> </head> <body> <p> <input id=&quot;testmsg&quot; type=&quot;text&quot; value=&quot;Hello AJAX&quot;> <button onclick=&quot;talktoServer()&quot;>Say Hello to Server</button> <div id=&quot;msg_display&quot; style=&quot;{ background: yellow; font-weight: bold; }&quot;> The data from the server will go here ...</div> </body> </html>
  • 11. STEP 2: POST function talktoServer(){ var req = newXMLHttpRequest(); //register the callback handler function var callbackHandler = getReadyStateHandler(req, updateMsgOnBrowser); req.onreadystatechange = callbackHandler; req.open(&quot;POST&quot;, &quot;servertime.php&quot;, true); req.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;); //get the value from the text input element and send it to server var testmsg = document.getElementById(&quot;testmsg&quot;); var msg_value = testmsg.value; req.send(&quot;msg=&quot;+msg_value); }
  • 12. NOTE: If browser is mozilla or safari or opera Then it creates new xmlhttprequest Otherwise it is Internet explorer Then it creates new activexoject Else ,browser does not support xmlhttprequest
  • 13. Step 3: response from server // This is the callback functions that gets called // for the response from the server with the XML data var lastPing = 0; function updateMsgOnBrowser(testXML) { var test = testXML.getElementsByTagName(&quot;test&quot;)[0]; var message = testXML.getElementsByTagName(&quot;message&quot;)[0]; var ip = testXML.getElementsByTagName(&quot;ip&quot;)[0]; var timestamp = test.getAttribute(&quot;timestamp&quot;); if (timestamp > lastPing) { astPing = timestamp; var ip_value = ip.firstChild.nodeValue; var message_value = message.firstChild.nodeValue; var msg_display = document.getElementById(&quot;msg_display&quot;); msg_display.innerHTML = &quot; Server got the message: amp;quot;&quot; + message_value + &quot;amp;quot;&quot; + &quot;<br>Server IP: &quot;+ ip_value + &quot; Server Timestamp: amp;quot;&quot;+ timestamp + &quot;amp;quot;&quot; ; } }
  • 14. For callback functions //the following two functions are helper infrastructure to //craete a XMLHTTPRequest and register a listner callback function function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Try ActiveX try { xmlreq = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (e1) { // first method failed try { xmlreq = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch (e2) { // both methods failed } }}return xmlreq;}
  • 15. function getReadyStateHandler(req, responseXmlHandler) { return function () { if (req.readyState == 4) { if (req.status == 200) { responseXmlHandler(req.responseXML); } else { var hellomsg = document.getElementById(&quot;hellomsg&quot;); hellomsg.innerHTML = &quot;ERROR: &quot;+ req.status; } } } }
  • 16. <? header('Content-Type: application/xml'); $msg = htmlentities(trim(stripslashes($_REQUEST['msg']))); $ts = time(); $ip = gethostbyname(&quot;example.com&quot;); print (&quot;<?xml version=amp;quot;1.0amp;quot;?>&quot;); print (&quot;<test timestamp=amp;quot;$tsamp;quot;>&quot;); print (&quot;<ip>$ip</ip>&quot;); print (&quot;<message>$msg</message>&quot;); print (&quot;</test>&quot;); ?> Thus the data request sent from the webpage to server and after certain schematic conditions,the data is back on the [as said asynchronous] it displayed without affecting the process Step 4:Data back to the weboage
  • 17. RESPONSE HANDLING: There are two types of response *response text and response xml *many other forms like json,html etc[ these may come under one of the those two categories]
  • 18. USAGE IN BLOGS: 1.We need to check whether the client can actually handle this or we need to import one [just the same of creating xml request] 2.we can link in the database as we needed ,example lets take calender,it need to be updated from a site and then that particular data need to be used in here. AJAX is combination of two AJAX =DOM +XMLhttprequest
  • 19. DRAWBACKS: 1.AJAX are mainly suitable for thier dynamic pages,so its harder to develop them in static web pages 2.Dynamically created pages will not go on with the brower's page ,so when the user click on the back button,they might not go to the previous page but to a very first page 3.Dynamic webpages will make bookmarking difficult for the uers 4.Many web crawlers will not allow java script,so inorder to prevent it,alternate method must be induced in order to index them using the search engines 5.AJAX powered webpages generate lot of user requests ,taking longer access rate in server to respong the user