Jqeury ajax plugins
0 likes372 views
This document discusses jQuery and plugins. It begins by showing how to perform AJAX requests without jQuery using XMLHttpRequest. It then demonstrates how to simplify AJAX requests using jQuery's $.post, $.get, and $.ajax methods. The document concludes by explaining that many jQuery plugins exist to add functionality, how to include plugin code in a webpage, and provides examples of plugin usage and structure.
Jqeury ajax plugins
- 1. jQuery ajax & plugins Inbal Geffen
- 2. ajax before jQuery function getXMLHttp() { var xmlHttp; if (window.XMLHttpRequest) { // Mozilla, Safari, ... var xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlHttp; } function MakeRequest() { var xmlHttp = getXMLHttp(); xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4) { HandleResponse(xmlHttp.responseText); } } xmlHttp.open("GET", "ajax.php", true); xmlHttp.send(); } function HandleResponse(response) { document.getElementById('ResponseDiv').innerHTML = response;} Inbal Geffen
- 3. ajax using jQuery - $.post function MakeRequest() { var url = "ajax.php"; $.post(url, ' ' ,function(data) { $("#ResponseDiv").html(data).show(); }); } Inbal Geffen
- 4. ajax using jQuery - $.get function MakeRequest() { var url = "ajax.php"; $.get(url, ' ' ,function(data) { $("#ResponseDiv").html(data).show(); }); } Inbal Geffen
- 5. ajax using jQuery - $.ajax function MakeRequest() { $.ajax({ type: "GET", url: "ajax.php", success: function (result) { $("#ResponseDiv").html(result); }, error: function (error) { alert(error); } }); } Inbal Geffen
- 6. jQuery plugins ● Many plugins exist in the web ● http://archive.plugins.jquery.com - main jQuery plugins archive ● Plugins usually include instructions and example code for how to use them ● http://www.simplefadeslideshow.com/ ● http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/ ● http://plugins.in1.com/socialist/demo ● http://nbartlomiej.github.com/foggy/ ● http://tsvensen.github.com/equalize.js/ Inbal Geffen
- 7. jQuery plugins <!--Add the jQuery.js and the plugin.js--> <head> <title>Example</title> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.plugin.js" type="text/javascript"></script> </head> <!--Carousel example Add the jQuery.js and the plugin.js--> <script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8" ></script> Inbal Geffen
- 8. jQuery plugins <!--For each image we want to add to the carousel we need to add this kind of div--> <div class="carousel-feature"> <img class="carousel-image" src="images/flowers1.jpg" alt="Image1" /> <div class="carousel-caption"> <p>Amazing flower</p> </div> </div> Inbal Geffen
- 9. jQuery plugins <!--All divs need to be nested under div with id="carousel" --> <body> <div id="carousel-container"> <div id="carousel"> <div class="carousel-feature"> <img class="carousel-image" src="images/flowers1.jpg" alt="Image1" /> <div class="carousel-caption"> <p>Amazing flower</p> </div> </div> <div class="carousel-feature"> ..... </div> </div> </body> Inbal Geffen