jQuery - Chapter 5 - Ajax
0 likes237 views
The document provides an overview of AJAX (Asynchronous JavaScript and XML) as a method for asynchronous data exchange with servers without full page reloads. It compares the complexity of handling AJAX with vanilla JavaScript to jQuery's simplified methods for making AJAX calls. It includes practical examples of AJAX usage in both vanilla JavaScript and jQuery, demonstrating how to fetch and display external content.
jQuery - Chapter 5 - Ajax
- 2. www.webstackacademy.com Introduction to AJAX • AJAX(Asynchronous JavaScript and XML) is a mechanism of performing data exchange with the server without reloading the whole code • It helps to fetch data in form of XML / JSON / HTML • With vanilla JavaScript, writing AJAX code is quite complex where you need to write multiple lines of code • With jQuery you can perform it very easily
- 3. www.webstackacademy.com Example usage – Vanilla JavaScript code <script> function loadDoc() { // Create a request object var xhttp = new XMLHttpRequest(); // Register the function to be called when server responds xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; // There is a file called ajax_info.txt on server xhttp.open("GET", "ajax_info.txt", true); // Send the request xhttp.send(); } </script>
- 4. www.webstackacademy.com jQuery AJAX APIs API & Description $(selector).load(URL,data,callback); Sets or returns the text content of selected elements • URL - The location from where data need to be fetched • data - Query string • callback - To get notification when the load is complete The callback function can further have three parameters: • responseTxt - contains the resulting content if the call succeeds • statusTxt - contains the status of the call • xhr - contains the XMLHttpRequest object
- 5. www.webstackacademy.com Example usage – Loading URL contents <script> $(document).ready(function() { $("button").click(function() { /* Load a page from external URL with response / error handling */ $("#div1").load("http://jsonplaceholder.typicode.com/posts/1", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") alert("External content loaded successfully!"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText); }); }); }); </script>
- 6. www.webstackacademy.com jQuery AJAX APIs Selector Description $.get(URL,callback); URL - The location from where data need to be fetched callback - To get notification when the load is complete $.post(URL,data,callback); URL - The location from where data need to be fetched data - That required to be posted callback - To get notification when the load is complete
- 7. www.webstackacademy.com Example usage – HTTP GET <script> $(document).ready(function() { $("button").click(function() { $.get("https://api.github.com/users/devendradora", function(data, status){ console.log("Data: " , data , "nStatus: " , status); }); }); }); </script>
- 8. www.webstackacademy.com WebStack Academy #83, Farah Towers, 1st Floor, MG Road, Bangalore – 560001 M: +91-809 555 7332 E: training@webstackacademy.com WSA in Social Media: