SlideShare a Scribd company logo

Jqeury ajax plugins

•
•
Inbal Geffen
Inbal Geffen

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.

1 of 9
Download to read offline
jQuery ajax & plugins Inbal Geffen
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
ajax using jQuery - $.post function MakeRequest() { var url = "ajax.php"; $.post(url, ' ' ,function(data) { $("#ResponseDiv").html(data).show(); }); } Inbal Geffen
ajax using jQuery - $.get function MakeRequest() { var url = "ajax.php"; $.get(url, ' ' ,function(data) { $("#ResponseDiv").html(data).show(); }); } Inbal Geffen
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
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
jQuery plugins <head> <title>Example</title> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.plugin.js" type="text/javascript"></script> </head> <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
jQuery plugins <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
jQuery plugins <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

More Related Content

Jqeury ajax plugins

  • 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