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
