AJAX y JQUERY Manual

What is AJAX?
AJAX
stands
for Asynchronous JavaScript
and XML.
AJAX
is
new
technique for creating better, faster, and more interactive web applications
with the help of XML, HTML, CSS, and Java Script.
Ajax uses XHTML for content, CSS for presentation, along with Document
Object Model and JavaScript for dynamic content display.
Conventional web applications transmit information to and from the server
using synchronous requests. It means you fill out a form, hit submit, and get
directed to a new page with new information from the server.
With AJAX, when you hit submit, JavaScript will make a request to the
server, interpret the results, and update the current screen. In the purest
sense, the user would never know that anything was even transmitted to the
server.
XML is commonly used as the format for receiving server data, although
any format, including plain text, can be used.
AJAX is a web browser technology independent of web server software.
A user can continue to use the application while the client program requests
information from the server in the background.
Intuitive and natural user interaction. Clicking is not required, mouse
movement is a sufficient event trigger.
Data-driven as opposed to page-driven.
Rich Internet Application Technology

AJAX is the most viable Rich Internet Application (RIA) technology
so far. It is getting tremendous industry momentum and several tool kit
and frameworks are emerging. But at the same time, AJAX has browser
incompatibility and it is supported by JavaScript, which is hard to
maintain and debug.
AJAX is Based on Open Standards

AJAX is based on the following open standards:
Browser-based presentation using HTML and Cascading Style Sheets (CSS).
Data is stored in XML format and fetched from the server.
Behind-the-scenes data fetches using XMLHttpRequest objects in the

browser.
JavaScript to make everything happen.
AJAX cannot work independently. It is used in combination with other

technologies to create interactive webpages.
JavaScript
Loosely typed scripting language.
JavaScript function is called when an event occurs in a page.
Glue for the whole AJAX operation.
DOM
API for accessing and manipulating structured documents.
Represents the structure of XML and HTML documents.
CSS
Allows for a clear separation of the presentation style from the content and
may be changed programmatically by JavaScript.
XMLHttpRequest
JavaScript object that performs asynchronous interaction with the server.
Here is a list of some famous web applications that make use of AJAX.
Difference in AJAX and Conventional CGI

Program
Try these two examples one by one and you will feel the difference.
While trying AJAX example, there is not discontinuity and you get the
response very quickly, but when you try the standard GCI example, you
would have to wait for the response and your page also gets refreshed.
AJAX Example:
*
=
AJAX
Standard Example:
*
0
=
0
Standard
NOTE: We have given a more complex example in AJAX Database

All the available browsers cannot support AJAX. Here is a list of major
browsers, that support AJAX.
Mozilla Firefox 1.0 and above.
Netscape version 7.1 and above.
Apple Safari 1.2 and above.
Microsoft Internet Explorer 5 and above.
Konqueror.
Opera 7.6 and above.
When you write your next application, do consider the browsers that do
not support AJAX.
NOTE: When we say that a browser does not support AJAX, it simply
means that the browser does not support creation of Javascript object
XMLHttpRequest object.
Writing Browser Specific Code

The Simplest way to make your source code compatible with a browser
is to use try...catch blocks in your JavaScript.
<html>
<body>
<script language="javascript" type="text/javascript">
<!-//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers

try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong

alert("Your browser broke!");
return false;
}
}
}
}
//-->
</script>
<form name='myForm'>
Name: <input type='text' name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</html>
In the above JavaScript code, we try three times to make our

XMLHttpRequest object. Our first attempt:
It is for Opera 8.0+, Firefox, and Safari browsers. If it fails, we try two
more times to make the correct object for an Internet Explorer browser
with:
If it doesn't work, then we can use a very outdated browser that

doesn't support XMLHttpRequest, which also means it doesn't support
Ajax.
Most likely though, our variable ajaxRequest will now be set to
whateverXMLHttpRequest standard the browser uses and we can start
sending data to the server. The step-wise AJAX workflow is explained in
the next chapter.
This chapter gives you a clear picture of the exact steps of AJAX
operation.
Steps of AJAX Operation
A client event occurs.
An XMLHttpRequest object is created.
The XMLHttpRequest object is configured.
The XMLHttpRequest object makes an asynchronous request to the

Webserver.
The Webserver returns the result containing XML document.
The XMLHttpRequest object calls the callback() function and processes the
result.
The HTML DOM is updated.
Let us take these steps one by one.
A Client Event Occurs
A JavaScript function is called as the result of an event.
Example: validateUserId() JavaScript function is mapped as an event

handler to an onkeyup event on input form field whose id is set to"userid"
<input
type="text"
size="20"
id="userid"
onkeyup="validateUserId();">.
The XMLHttpRequest Object is Created

try{

}catch (e){

try{
name="id"
}catch (e) {
try{
}catch (e){

return false;
}
}
}
}
The XMLHttpRequest Object is Configured

In this step, we will write a function that will be triggered by the client
event and a callback function processRequest() will be registered.
function validateUserId() {
ajaxFunction();
// Here processRequest() is the callback function.

ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);

ajaxRequest.send(null);
}
Making Asynchronous Request to the

Webserver
Source code is available in the above piece of code. Code written in

bold typeface is responsible to make a request to the webserver. This is
all being done using the XMLHttpRequest object ajaxRequest.
function validateUserId() {
ajaxFunction();
// Here processRequest() is the callback function.

ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);

}
Assume you enter Zara in the userid box, then in the above request,
the URL is set to "validate?id=Zara".
Webserver Returns the Result Containing

XML Document
You can implement your server-side script in any language, however its
logic should be as follows.
Get a request from the client.
Parse the input from the client.
Do required processing.
Send the output to the client.
If we assume that you are going to write a servlet, then here is the
piece of code.
public void doGet(HttpServletRequest request, HttpServletResponse response) throws

IOException, ServletException
{
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim()))

{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("true");
}
else
{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("false");
}
}
Callback Function processRequest() is Called

The XMLHttpRequest object was configured to call the processRequest()
function when there is a state change to the readyState of
the XMLHttpRequestobject. Now this function will receive the result
from the server and will do the required processing. As in the following
example, it sets a variable message on true or false based on the
returned value from the Webserver.
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}
The HTML DOM is Updated

This is the final step and in this step, your HTML page will be updated.
It happens in the following way:
JavaScript gets a reference to any element in a page using DOM API.
The recommended way to gain a reference to an element is to call.
document.getElementById("userIdMessage"),
// where "userIdMessage" is the ID attribute
// of an element appearing in the HTML document
JavaScript may now be used to modify the element's attributes; modify the
element's style properties; or add, remove, or modify the child elements.
Here is an example:
<script type="text/javascript">
<!-function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
}
else
{
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// if the messageBody element has been created simple
// replace it otherwise append the new element

if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody,
userMessageElement.childNodes[0]);
}
else
{
userMessageElement.appendChild(messageBody);
}
}
-->
</script>
<body>
<div id="userIdMessage"><div>
</body>
If you have understood the above-mentioned seven steps, then you are
almost
done
with
AJAX.
In
the
next
chapter, we
will
see XMLHttpRequest object in more detail.
The XMLHttpRequest object is the key to AJAX. It has been available
ever since Internet Explorer 5.5 was released in July 2000, but was not
fully discovered until AJAX and Web 2.0 in 2005 became popular.
XMLHttpRequest (XHR) is an API that can be used by JavaScript,
JScript, VBScript, and other web browser scripting languages to
transfer and manipulate XML data to and from a webserver using HTTP,
establishing an independent connection channel between a webpage's
Client-Side and Server-Side.
The data returned from XMLHttpRequest calls will often be provided by
back-end databases. Besides XML, XMLHttpRequest can be used to
fetch data in other formats, e.g. JSON or even plain text.
You already have seen a couple of examples on how to create an
XMLHttpRequest object.
Listed below is listed are some of the methods and properties that you
have to get familiar with.
XMLHttpRequest Methods
abort()
Cancels the current request.
getAllResponseHeaders()
Returns the complete set of HTTP headers as a string.
getResponseHeader( headerName )
Returns the value of the specified HTTP header.
open( method, URL )

open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )
Specifies the method, URL, and other optional attributes of a request.
The method parameter can have a value of "GET", "POST", or "HEAD".
Other HTTP methods, such as "PUT" and "DELETE" (primarily used in REST
applications) may be possible.
The "async" parameter specifies whether the request should be handled
asynchronously or not. "true" means that the script processing carries on
after the send() method without waiting for a response, and "false" means
that the script waits for a response before continuing script processing.
send( content )
Sends the request.
setRequestHeader( label, value )

Adds a label/value pair to the HTTP header to be sent.
XMLHttpRequest Properties
onreadystatechange
An event handler for an event that fires at every state change.
readyState
The readyState property defines the current state of the XMLHttpRequest
object.
The following table provides a list of the possible values for the readyState
property:
State
Description
The request is not initialized.
The request has been set up.
The request has been sent.
The request is in process.
The request is completed.
readyState = 0 After you have created the XMLHttpRequest object, but

before you have called the open() method.
readyState = 1 After you have called the open() method, but before you
have called send().
readyState = 2 After you have called send().
readyState = 3 After the browser has established a communication with
the server, but before the server has completed the response.
readyState = 4 After the request has been completed, and the response
data has been completely received from the server.
responseText
Returns the response as a string.
responseXML
Returns the response as XML. This property returns an XML document
object, which can be examined and parsed using the W3C DOM node tree
methods and properties.
status
Returns the status as a number (e.g., 404 for "Not Found" and 200 for
"OK").
statusText
Returns the status as a string (e.g., "Not Found" or "OK").
To clearly illustrate how easy it is to access information from a database

using AJAX, we are going to build MySQL queries on the fly and display
the results on "ajax.html". But before we proceed, let us do the ground
work. Create a table using the following command.
NOTE: We are assuming you have sufficient privilege to perform the
following MySQL operations
CREATE TABLE 'ajax_example' (
'name' varchar(50) NOT NULL,
'age' int(11) NOT NULL,
'sex' varchar(1) NOT NULL,
'wpm' int(11) NOT NULL,
PRIMARY KEY ('name')
)
Now dump the following data into this table using the following SQL
statements:
INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);

INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);
Client Side HTML File

Now let us have our client side HTML file, which is ajax.html, and it will
have the following code:
<html>
<body>
<script language="javascript" type="text/javascript">
<!-//Browser Support Code
try{

}catch (e){

try{
}catch (e) {
try{
}catch (e){

return false;
}
}
}
// Create a function that will receive data

// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to

// server script.
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age=" + age ;
queryString += "&wpm=" + wpm + "&sex=" + sex;

ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
}
//-->
</script>
<form name='myForm'>
Max Age: <input type='text' id='age' /> <br />

Max WPM: <input type='text' id='wpm' /> <br />
Sex:
<select id='sex'>
<option value="m">m</option>
<option value="f">f</option>
</select>
<input type='button' onclick='ajaxFunction()' value='Query MySQL'/>
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>
NOTE: The way of passing variables in the Query is according to HTTP

standard and have formA.
URL?variable1=value1;&variable2=value2;
The above code will give you a screen as given below:

NOTE: This is dummy screen and would not work
Max Age:
Max WPM:
Sex:
Your result will display here in this section after you have made your
entry.
NOTE: This is a dummy screen.
Server Side PHP File

Your client-side script is ready. Now, we have to write our server-side
script, which will fetch age, wpm, and sex from the database and will
send it back to the client. Put the following code into the file "ajaxexample.php".
<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
//Connect to MySQL Server

mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String

$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// Escape User Input to help prevent SQL Injection

$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
if(is_numeric($age))
$query .= " AND age <= $age";
if(is_numeric($wpm))
$query .= " AND wpm <= $wpm";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String

$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned

while($row = mysql_fetch_array($qry_result)){
$display_string .= "<tr>";
$display_string .= "<td>$row[name]</td>";
$display_string .= "<td>$row[age]</td>";
$display_string .= "<td>$row[sex]</td>";
$display_string .= "<td>$row[wpm]</td>";
$display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";

$display_string .= "</table>";
echo $display_string;
?>
Now try by entering a valid value (e.g., 120) in Max Age or any other
box and then click Query MySQL button.
Max Age:
Max WPM:
Sex:
Your result will display here in this section after you have made your entry.
If you have successfully completed this lesson, then you know how to
use MySQL, PHP, HTML, and Javascript in tandem to write AJAX
applications.
AJAX Security: Server Side
AJAX-based Web applications use the same server-side security schemes of

regular Web applications.
You specify authentication, authorization, and data protection requirements

in your web.xml file (declarative) or in your program (programmatic).
AJAX-based Web applications are subject to the same security threats as

regular Web applications.
AJAX Security: Client Side
JavaScript code is visible to a user/hacker. Hacker can use JavaScript code

for inferring server-side weaknesses.
JavaScript code is downloaded from the server and executed ("eval") at the
client and can compromise the client by mal-intended code.
Downloaded JavaScript code is constrained by the sand-box security model

and can be relaxed for signed JavaScript.
AJAX is growing very fast and that is the reason that it contains many
issues with it. We hope with the passes of time, they will be resolved
and AJAX will become ideal for web applications. We are listing down a
few issues that AJAX currently suffers from.
Complexity is increased
Server-side developers will need to understand that presentation logic will

be required in the HTML client pages as well as in the server-side logic.
Page developers must have JavaScript technology skills.
AJAX-based applications can be difficult to debug, test, and

maintain
JavaScript is hard to test - automatic testing is hard.
Weak modularity in JavaScript.
Lack of design patterns or best practice guidelines yet.
Toolkits/Frameworks are not mature yet
Most of them are in beta phase.
No standardization of the XMLHttpRequest yet
Future version of IE will address this.
No support of XMLHttpRequest in old browsers
Iframe will help.
JavaScript technology dependency and incompatibility
Must be enabled for applications to function.
Still some browser incompatibilities exist.
JavaScript code is visible to a hacker
Poorly designed JavaScript code can invite security problems.
jQuery - Ajax
Advertisements
Previous Page
Next Page
AJAX is an acronym standing for Asynchronous JavaScript and XML and

this technology help us to load data from the server without a browser
page refresh.
If you are new with AJAX, I would recommend you go through our Ajax
Tutorial before proceeding further.
JQuery is a great tool which provides a rich set of AJAX methods to
develop next generation web application.
Loading simple data

This is very easy to load any static or dynamic data using JQuery AJAX.
JQuery provides load() method to do the job
Syntax
Here is the simple syntax for load() method
[selector].load( URL, [data], [callback] );
Here is the description of all the parameters
URL The URL of the server-side resource to which the request is sent. It
could be a CGI, ASP, JSP, or PHP script which generates data dynamically or
out of a database.
data This optional parameter represents an object whose properties are

serialized into properly encoded parameters to be passed to the request. If
specified, the request is made using the POST method. If omitted,
the GET method is used.
callback A callback function invoked after the response data has been
loaded into the elements of the matched set. The first parameter passed to
this function is the response text received from the server and second
parameter is the status code.
Example
Consider the following HTML file with a small JQuery coding
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">

$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file </p>
<div id = "stage" style = "background-color:cc0;">

STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Here load() initiates

an
Ajax
request
to
the
specified
URL/jquery/result.html file. After loading this file, all the content
would be populated inside <div> tagged with ID stage. Assuming,
our /jquery/result.html file has just one HTML line
<h1>THIS IS RESULT...</h1>
When you click the given button, then result.html file gets loaded.
Getting JSON data

There would be a situation when server would return JSON string
against your request. JQuery utility function getJSON() parses the
returned JSON string and makes the resulting string available to the
callback function as first parameter to take further action.
Syntax
Here is the simple syntax for getJSON() method
[selector].getJSON( URL, [data], [callback] );
URL The URL of the server-side resource contacted via the GET method.
data An object whose properties serve as the name/value pairs used to

construct a query string to be appended to the URL, or a preformatted and
encoded query string.
callback A function invoked when the request completes. The data value
resulting from digesting the response body as a JSON string is passed as
the first parameter to this callback, and the status as the second.
Example
<html>
<head>

$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.json file </p>
<div id = "stage" style = "background-color:#eee;">

STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Here JQuery utility method getJSON() initiates an Ajax request to the

specified URL result.json file. After loading this file, all the content
would be passed to the callback function which finally would be
populated inside <div> tagged with ID stage. Assuming, our result.json
file has following json formatted content
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}
When you click the given button, then result.json file gets loaded.
Passing data to the Server

Many times you collect input from the user and you pass that input to
the server for further processing. JQuery AJAX made it easy enough to
pass collected data to the server using data parameter of any available
Ajax method.
Example
This example demonstrate how can pass user input to a web server
script which would send the same result back and we would print it
<html>
<head>

var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>

<input type = "input" id = "name" size = "40" /><br />
<div id = "stage" style = "background-color:cc0;">

STAGE
</div>
<input type = "button" id = "driver" value = "Show Result" />
</body>
</html>
Here is the code written in result.php script

<?php
if( $_REQUEST["name"] ){
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
Now you can enter any text in the given input box and then click "Show
Result" button to see what you have entered in the input box.
JQuery AJAX Methods

You have seen basic concept of AJAX using JQuery. Following table lists
down all important JQuery AJAX methods which you can use based your
programming need
S.N
.
Methods & Description
jQuery.ajax( options )
Load a remote page using an HTTP request.
jQuery.ajaxSetup( options )
Setup global settings for AJAX requests.
jQuery.get( url, [data], [callback], [type] )

Load a remote page using an HTTP GET request.
jQuery.getJSON( url, [data], [callback] )

Load JSON data using an HTTP GET request.
jQuery.getScript( url, [callback] )

Loads and executes a JavaScript file using an HTTP GET request.
jQuery.post( url, [data], [callback], [type] )

Load a remote page using an HTTP POST request.
load( url, [data], [callback] )

Load HTML from a remote file and inject it into the DOM.
serialize( )
Serializes a set of input elements into a string of data.
serializeArray( )
Serializes all forms and form elements like the .serialize() method but
returns a JSON data structure for you to work with.
JQuery AJAX Events
You can call various JQuery methods during the life cycle of AJAX call
progress. Based on different events/stages following methods are
available
You can go through all the AJAX Events.
S.N
.
ajaxComplete( callback )
Attach a function to be executed whenever an AJAX request completes.
ajaxStart( callback )
Attach a function to be executed whenever an AJAX request begins and
there is none already active.
ajaxError( callback )
Attach a function to be executed whenever an AJAX request fails.
ajaxSend( callback )
Attach a function to be executed before an AJAX request is sent.
ajaxStop( callback )
Attach a function to be executed whenever all AJAX requests have ended.
ajaxSuccess( callback )
Attach a function to be executed whenever an AJAX request completes
successfully.
jQuery provides a trivially simple interface for doing various kind of

amazing effects. jQuery methods allow us to quickly apply commonly
used effects with a minimum configuration.
This tutorial covers all the important jQuery methods to create visual
effects.
Showing and Hiding elements

The commands for showing and hiding elements are pretty much what
we would expect show() to show the elements in a wrapped set
and hide() to hide them.
Syntax
Here is the simple syntax for show() method
[selector].show( speed, [callback] );
speed A string representing one of the three predefined speeds ("slow",

"normal", or "fast") or the number of milliseconds to run the animation
(e.g. 1000).
callback This optional parameter represents a function to be executed

whenever the animation completes; executes once for each element
animated against.
Following is the simple syntax for hide() method

[selector].hide( speed, [callback] );

(e.g. 1000).

animated against.
Example
<html>
<head>

$("#show").click(function () {
$(".mydiv").show( 1000 );
});
$("#hide").click(function () {
$(".mydiv").hide( 1000 );
});
});
</script>
<style>
.mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px;

height:100px;}
</style>
</head>
<body>
<div class = "mydiv">

This is a SQUARE
</div>
<input id = "hide" type = "button" value = "Hide" />

<input id = "show" type = "button" value = "Show" />
</body>
</html>
This will produce following result
Toggling the elements

jQuery provides methods to toggle the display state of elements
between revealed or hidden. If the element is initially displayed, it will
be hidden; if hidden, it will be shown.
Syntax
Here is the simple syntax for one of the toggle() methods
[selector]..toggle([speed][, callback]);

(e.g. 1000).

animated against.
Example
We can animate any element, such as a simple <div> containing an
image
<html>
<head>
$(".clickme").click(function(event){
$(".target").toggle('slow', function(){
$(".log").text('Transition Complete');
});
});
});
</script>
<style>
.clickme{ margin:10px;padding:12px; border:2px solid #666; width:100px;
height:50px;}
</style>
</head>
<body>
<div class = "content">

<div class = "clickme">Click Me</div>
<div class = "target">
<img src = "./images/jquery.jpg" alt = "jQuery" />
</div>
<div class = "log"></div>
</div>
</body>
</html>
This will produce following result
JQuery Effect Methods

You have seen basic concept of jQuery Effects. Following table lists
down all the important methods to create different kind of effects
S.N
.
animate( params, [duration, easing, callback] )

A function for making custom animations.
fadeIn( speed, [callback] )

Fade in all matched elements by adjusting their opacity and firing an
optional callback after completion.
fadeOut( speed, [callback] )

Fade out all matched elements by adjusting their opacity to 0, then setting
display to "none" and firing an optional callback after completion.
fadeTo( speed, opacity, callback )

Fade the opacity of all matched elements to a specified opacity and firing
an optional callback after completion.
hide( )
Hides each of the set of matched elements if they are shown.
hide( speed, [callback] )

Hide all matched elements using a graceful animation and firing an
show( )
Displays each of the set of matched elements if they are hidden.
show( speed, [callback] )

Show all matched elements using a graceful animation and firing an
slideDown( speed, [callback] )

Reveal all matched elements by adjusting their height and firing an
10
slideToggle( speed, [callback] )

Toggle the visibility of all matched elements by adjusting their height and
firing an optional callback after completion.
11
slideUp( speed, [callback] )

Hide all matched elements by adjusting their height and firing an optional
callback after completion.
12
stop( [clearQueue, gotoEnd ])

Stops all the currently running animations on all the specified elements.
13
toggle( )
Toggle displaying each of the set of matched elements.
14
toggle( speed, [callback] )

Toggle displaying each of the set of matched elements using a graceful
animation and firing an optional callback after completion.
15
toggle( switch )
Toggle displaying each of the set of matched elements based upon the
switch (true shows all elements, false hides all elements).
16
jQuery.fx.off
Globally disable all animations.
UI Library Based Effects
To use these effects you can either download latest jQuery UI

Library jquery-ui-1.11.4.custom.zip from jQuery UI Library or use
Google CDN to use it in the similar way as we have done for jQuery.
We have used Google CDN for jQuery UI using following code snippet in
the HTML page so we can use jQuery UI
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
</head>
S.N.
Blind
Blinds the element away or shows it by blinding it in.
Bounce
Bounces the element vertically or horizontally n-times.
Clip
Clips the element on or off, vertically or horizontally.
Drop
Drops the element away or shows it by dropping it in.
Explode
Explodes the element into multiple pieces.
Fold
Folds the element like a piece of paper.
Highlight
Highlights the background with a defined color.
Puff
Scale and fade out animations create the puff effect.
Pulsate
Pulsates the opacity of the element multiple times.
10
Scale
Shrink or grow an element by a percentage factor.
11
Shake
Shakes the element vertically or horizontally n-times.
12
Size
Resize an element to a specified width and height.
13
Slide
Slides the element out of the viewport.
14
Transfer
Transfers the outline of an element to another.
Interactions could be added basic mouse-based behaviours to any

element. Using with interactions, We can create sortable lists,
resizeable elements, drag & drop behaviours.Interactions also make
great building blocks for more complex widgets and applications.
S.N.
Interactions & Description
Drag able
Enable drag able functionality on any DOM element.
Drop able
Enable any DOM element to be drop able.
Resize able
Enable any DOM element to be resize-able.
Select able
Enable a DOM element (or group of elements) to be selectable.
Sort able
Enable a group of DOM elements to be sortable.
a jQuery UI widget is a specialized jQuery plug-in.Using plug-in, we can

apply behaviours to the elements. However, plug-ins lack some built-in
capabilities, such as a way to associate data with its elements, expose
methods, merge options with defaults, and control the plug-in's
lifetime.
S.N
.
Widgets & Description
Accordion
Enable to collapse the content, that is broken into logical sections.
Autocomplete
Enable to provides the suggestions while you type into the field.
Button
Button is an input of type submit and an anchor.
Datepicker
It is to open an interactive calendar in a small overlay.
Dialog
Dialog boxes are one of the nice ways of presenting information on an
HTML page.
Menu
Menu shows list of items.
Progressbar
It shows the progress information.
Select menu
Enable a style able select element/elements.
Slider
The basic slider is horizontal and has a single handle that can be moved
with the mouse or by using the arrow keys.
10
Spinner
It provides a quick way to select one value from a set.
11
Tabs
It is used to swap between content that is broken into logical sections.
12
Tooltip
Its provides the tips for the users.
Jquery has two different styling themes as A And B.Each with different
colors for buttons, bars, content blocks, and so on.
The syntax of J query theming as shown below
<div data-role = "page" data-theme = "a|b">
A Simple of A theming Example as shown below

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script
src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone" data-theme = "a">
<div data-role = "header">

<h1>Tutorials Point</h1>
</div>
<div data-role = "main" class = "ui-content">
<p>Text link</p>
<a href = "#">A Standard Text Link</a>
<a href = "#" class = "ui-btn">Link Button</a>

<p>A List View:</p>
<ul data-role = "listview" data-autodividers = "true" data-inset = "true">

<li><a href = "#">Android </a></li>
<li><a href = "#">IOS</a></li>
</ul>
<label for = "fullname">Input Field:</label>

<input type = "text" name = "fullname" id = "fullname"
placeholder = "Name..">
<label for = "switch">Toggle Switch:</label>
<select name = "switch" id = "switch" data-role = "slider">

<option value = "on">On</option>
<option value = "off" selected>Off</option>
</select>
</div>
<div data-role = "footer">

<h1>Tutorials point</h1>
</div>
</div>
</body>
</html>
This should produce following result

A Simple of B theming Example as shown below
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script
src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone" data-theme = "b">
<div data-role = "header">

<h1>Tutorials Point</h1>
</div>
<div data-role = "main" class = "ui-content">

<p>Text link</p>
<a href = "#">A Standard Text Link</a>
<a href = "#" class = "ui-btn">Link Button</a>
<p>A List View:</p>
<ul data-role = "listview" data-autodividers = "true" data-inset = "true">

<li><a href = "#">Android </a></li>
<li><a href = "#">IOS</a></li>
</ul>
<label for = "fullname">Input Field:</label>
<input type = "text" name = "fullname" id = "fullname"

placeholder = "Name..">
<label for = "switch">Toggle Switch:</label>
<select name = "switch" id = "switch" data-role = "slider">

<option value = "on">On</option>
<option value = "off" selected>Off</option>
</select>
</div>
<div data-role = "footer">

<h1>Tutorials point</h1>
</div>
</div>
</body>
</html>

Jquery provides serveral utilities in the formate of $(name space).
These methods are helpful to complete the programming tasks.a few of
the utility methods are as show below.
$.trim()
$.trim() is used to Removes leading and trailing whitespace
$.trim( "
lots of extra whitespace
$.each()
" );
$.each() is used to Iterates over arrays and objects

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
console.log( "element " + idx + " is " + val );
});
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {

console.log( k + " : " + v );
});
.each() can be called on a selection to iterate over the elements

contained in the selection. .each(), not $.each(), should be used for
iterating over elements in a selection.
$.inArray()
$.inArray() is used to Returns a value's index in an array, or -1 if the
value is not in the array.
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {

console.log( "found it!" );
}
$.extend()
$.extend() is used to Changes the properties of the first object using
the properties of subsequent objects.
var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
var newObject = $.extend( firstObject, secondObject );
console.log( firstObject.foo );
console.log( newObject.foo );
$.proxy()
$.proxy() is used to Returns a function that will always run in the
provided scope that is, sets the meaning of this inside the passed
function to the second argument
var myFunction = function() {
console.log( this );
};
var myObject = {
foo: "bar"
};
myFunction(); // window
var myProxyFunction = $.proxy( myFunction, myObject );
myProxyFunction();
$.browser
$.browser is used to give the information about browsers
jQuery.each( jQuery.browser, function( i, val ) {
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
});
$.contains()
$.contains() is used to returns true if the DOM element provided by the

second argument is a descendant of the DOM element provided by the
first argument, whether it is a direct child or nested more deeply.
$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );
$.data()
$.data() is used to give the information about data
<html lang = "en">
<head>
<title>jQuery.data demo</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
The values stored were <span></span>
and <span></span>
</div>
<script>
var div = $( "div" )[ 0 ];
jQuery.data( div, "test", {

first: 25,
last: "tutorials"
});
$( "span:first" ).text( jQuery.data( div, "test" ).first );
$( "span:last" ).text( jQuery.data( div, "test" ).last );

</script>
</body>
</html>
An output would be as follows

The values stored were 25 and tutorials
$.fn.extend()
$.fn.extend() is used to extends the jQuery prototype
<html lang = "en">
<head>
</head>
<body>
<label><input type = "checkbox" name = "android">

Android</label>
<label><input type = "checkbox" name = "ios"> IOS</label>
<script>
jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
this.checked = false;
});
}
});
// Use the newly created .check() method

$( "input[type = 'checkbox']" ).check();
</script>
</body>
</html>
It provides the output as shown below
$.isWindow()
$.isWindow() is used to recognise the window
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery.isWindow demo</title>
</head>
<body>
Is 'window' a window? <b></b>
<script>
$( "b" ).append( "" + $.isWindow( window ) );
</script>
</body>
</html>
$.now()
It returns a number which is representing the current time
(new Date).getTime()
$.isXMLDoc()
$.isXMLDoc() checks whether a file is an xml of not
jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )
$.globalEval()
$.globalEval() is used to execute the javascript globally
function test() {
jQuery.globalEval( "var newVar = true;" )
}
test();
$.dequeue()
$.dequeue() is used to execute the next function in the queue
<!doctype html>
<html lang = "en">
<head>
<title>jQuery.dequeue demo</title>
<style>
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: green;
border-radius: 50px;
}
div.red {
background-color: blue;
}
</style>

</head>
<body>
<button>Start</button>
<div></div>
<script>
$( "button" ).click(function() {
$( "div" )
.animate({ left: '+ = 400px' }, 2000 )
.animate({ top: '0px' }, 600 )
.queue(function() {
$( this ).toggleClass( "red" );
$.dequeue( this );
})
.animate({ left:'10px', top:'30px' }, 700 );

});
</script>
</body>
</html>

A plug-in is piece of code written in a standard JavaScript file. These
files provide useful jQuery methods which can be used along with
jQuery library methods.
There are plenty of jQuery plug-in available which you can download
from repository link at http://jquery.com/plugins.
How to use Plugins

To make a plug-in's methods available to us, we include plug-in file very
similar to jQuery library file in the <head> of the document.
We must ensure that it appears after the main jQuery source file, and
before our custom JavaScript code.
Following example shows how to include jquery.plug-in.js plugin
<html>
<head>

<script src = "jquery.plug-in.js" type = "text/javascript"></script>
<script src = "custom.js" type = "text/javascript"></script>
.......your custom code.....
});
</script>
</head>
<body>
.............................
</body>
</html>
How to develop a Plug-in

This is very simple to write your own plug-in. Following is the syntax to
create a a method
jQuery.fn.methodName = methodDefinition;
Here methodNameM is
the
name
of
and methodDefinition is actual method definition.
new
method
The guideline recommended by the jQuery team is as follows
Any methods or functions you attach must have a semicolon (;) at the end.
Your method must return the jQuery object, unless explicity noted
otherwise.
You should use this.each to iterate over the current set of matched
elements - it produces clean and compatible code that way.
Prefix the filename with jquery, follow that with the name of the plugin and
conclude with .js.
Always attach the plugin to jQuery directly instead of $, so users can use a
custom alias via noConflict() method.
For example, if we write a plugin that we want to name debug, our

JavaScript filename for this plugin is
jquery.debug.js
The use of the jquery. prefix eliminates any possible name collisions
with files intended for use with other libraries.
Example
Following is a small plug-in to have warning method for debugging
purpose. Keep this code in jquery.debug.js file
jQuery.fn.warning = function() {
alert('Tag Name:"' + $(this).prop("tagName") + '".');
});
};
Here is the example showing usage of warning() method. Assuming we

putjquery.debug.js file in same directory of html page.
<html>
<head>

<script src = "jquery.debug.js" type = "text/javascript"></script>

$("div").warning();
$("p").warning();
});
</script>
</head>
<body>
<p>This is paragraph</p>
<div>This is division</div>
</body>
</html>
This would alert you with following result

This is paragraph
This is division
pagePiling.js is a jQuery plug-in for 'piling' your layout sections over

one another and accessing them by scrolling.
A Simple of theming example as shown below
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<link rel = "stylesheet" type = "text/css"
href = "http://fonts.googleapis.com/css?family=Lato:300,400,700" />

href = "/jquery/src/pagepilling/jquery.pagepiling.css" />

href = "/jquery/src/pagepilling/examples.css" />
<script

src = "/jquery/src/pagepilling/jquery.pagepiling.min.js"></script>
<script type = "text/javascript">

$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
},
afterRender: function(){
//playing the video
$('video').get(0).play();
}
});
});
</script>
<style>
.section {
text-align:center;
}
#myVideo {
position: absolute;
z-index: 4;
right: 0;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;

background-color: black; /* in case the video doesn't fit the whole page*/
background-image: /* our video */;
background-position: center center;
background-size: contain;
object-fit: cover; /*cover video background */
}
#section1 .layer {
position: absolute;
z-index: 5;
width: 100%;
left: 0;
top: 43%;
height: 100%;
}
#section1 h1 {
color:#fff;
}
#infoMenu li a {
color: #fff;
</style>
</head>
<body>
<ul id = "menu">
<li data-menuanchor = "page1" class = "active">
<a href = "#page1">Page 1</a></li>
<li data-menuanchor = "page2"><a href = "#page2">
Page 2</a></li>
<li data-menuanchor = "page3"><a href = "#page3">
Page 3</a></li>
</ul>
<div id = "pagepiling">
<div class = "section" id = "section1">
<video autoplay loop muted id = "myVideo">

<source src = "imgs/flowers.mp4" type = "video/mp4">
<source src = "imgs/flowers.webm" type = "video/webm">
</video>
</div>
<div class = "intro">

<h1>No limits</h1>
<p>Anything is possible with Tutorialspoint</p>
</div>
</div>

<h1></h1>
<p>Simple Easy Learning</p>
</div>
</div>
</div>
</body>
</html>

Flickerplate is a jQuery plugin for creating a slider which allows you
cycle through images with animated arrows and dots navigation.
A Simple of flickerplate example as shown below
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width,
initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<script src = "/jquery/src/flickerplate/js/min/jquery-v1.10.2.min.js"

type = "text/javascript"></script>
<script src = "/jquery/src/flickerplate/js/min/modernizr-custom-v2.7.1.min.js"

<script src = "/jquery/src/flickerplate/js/min/hammer-v2.0.3.min.js"

<link href = "/jquery/src/flickerplate/css/flickerplate.css"

type = "text/css" rel = "stylesheet">
<script src = "/jquery/src/flickerplate/js/min/flickerplate.min.js"

<script>
$(function(){
$('.flicker-example').flickerplate({
auto_flick
: true,
auto_flick_delay : 8,
flick_animation : 'transform-slide'
});
});
</script>
<link href = "/jquery/src/flickerplate/css/demo.css"

type = "text/css" rel = "stylesheet">
</head>
<body>
<div class = "flicker-example">
<ul>
<li
data-background = "http://genblock.com/wpcontent/uploads/2015/05/download-circles-abst
ract-wallpaper-abstract-photo-abstract-wallpaper.jpg">
<img src = "http://www.tutorialspoint.com/about/images/mohtashim.jpg"

style = "margin-left: 428px;">
<div class = "flick-title">Mohtashim M.</div>
<div class = "flick-sub-text">

Mohtashim is an MCA from AMU (Aligarah) and a Project
Management Professional. He has more than 17 years of
experience in Telecom and Datacom industries covering
complete SDLC. He is managing in-house innovations,
business planning, implementation, finance and the overall
business development of Tutorials Point.
</div>
</li>
<li
<img src = "http://www.tutorialspoint.com/about/images/gopal_verma.jpg"

style = "margin-left: 428px;">
<div class = "flick-title">Gopal K Verma</div>

Gopal is an MCA from GJU (Hisar) and a Cisco Certified Network
Professional. He has more than 11 years of experience in core
data networking and telecommunications. He develops contents
for Computer Science related subjects. He is also involved in
developing Apps for various Mobile devices.
</div>
</li>
<li
<img src = "http://www.tutorialspoint.com/about/images/mukesh_kumar.jpg"

style = "margin-left: 428px;>
<div class = "flick-title">Mukesh Kumar</div>

Mukesh Kumar, having 7+years experience in writing on various
topics ranging from IT products and services, legal, medical,
online advertisement & education to e-commerce businesses.
He also has experience of text & copy-editing, & online
research. He has done two masters MA (Geography) from
University of Delhi and MA (Mass Communication &
Journalism) from Kurukshetra University.
</div>
</li>
</ul>
</div>
</body>
</html>
multiscroll.js is a jQuery plugin for creating split pages with two vertical
scrolling panels.
A Simple of multiscroll example as shown below
<!DOCTYPE html>
<head>
<title>multiscroll.js - split multi-scrolling pages plugin</title>

href = "/jquery/src/multiscroller/jquery.multiscroll.css" />
href = "/jquery/src/multiscroller/examples.css" />
<script
src = "/jquery/src/multiscroller/jquery.easings.min.js"></script>
src = "/jquery/src/multiscroller/jquery.multiscroll.js"></script>

$('#myContainer').multiscroll({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
anchors: ['first', 'second', 'third'],
menu: '#menu',
navigation: true,
navigationTooltips: ['One', 'Two', 'Three'],
loopBottom: true,
loopTop: true
});
});
</script>
</head>
<body>
<ul id = "menu">
<li data-menuanchor = "first"><a href = "#first">First slide</a></li>
<li data-menuanchor = "second"><a href = "#second">Second slide</a></li>
<li data-menuanchor = "third"><a href = "#third">Third slide</a></li>
</ul>
<div id = "myContainer">
<div class = "ms-left">
<div class = "ms-section" id = "left1">

<h1>Left 1</h1>
</div>

<h1>Left 2 </h1>
</div>

<h1>Left 3</h1>
</div>
</div>
<div class = "ms-right">
<div class = "ms-section" id = "right1">

<h1>Right 1</h1>
</div>

<h1>Right 2</h1>
</div>

<h1>Right 3</h1>
</div>
</div>
</div>
</body>
</html>

Click hereSlidebars is a jQuery plugin for quickly and easily implementing
app style off-canvas menus and sidebars into your website.

A Simple of slidebar example as shown below
<!doctype html>
<html>
<head>
<title>Slidebars Animation Styles</title>
initial-scale = 1.0, minimum-scale = 1.0,
maximum-scale = 1.0, user-scalable = no">
<link rel = "stylesheet" href = "slidebars.css">
<link rel = "stylesheet" href = "example-styles.css">
</head>
<body>
<div id = "sb-site">
<h1>Tutorilaspoint</h1>
<p>Slidebars is a jQuery plugin for quickly and easily

implementing app style off-canvas menus and sidebars into your website.</p>
<ul>
<li class = "sb-toggle-left">Click here for slider</li>
</ul>
</div>
<div class = "sb-slidebar sb-left sb-style-push">

<p>Android</p>
<hr/>
<p>Java</p>
<hr/>
<p>CSS</p>
<hr/>
<p>PHP</p>
<hr/>
</div>
<script
<script src = "slidebars.js"></script>
<script>
(function($) {
$.slidebars();
});
}) (jQuery);
</script>
</body>
</html>

Click hereRowgrid.js is a jQuery plugin for showing images in a row.
A Simple of rowgrid example as shown below

<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<style>
.container:before,
.container:after {
content: "";
display: table;
.container:after {
clear: both;
}
.item {
float: left;
margin-bottom: 15px;
}
.item img {
max-width: 100%;
max-height: 100%;
vertical-align: bottom;
}
.first-item {
clear: both;
}
.last-row, .last-row ~ .item {

margin-bottom: 0;
}
</style>
<script
src = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src = "/jquery/src/rowgrid/jquery.row-grid.js"></script>
<script>
$(document).ready(function(){
$(".container").rowGrid({itemSelector: ".item",
minMargin: 10, maxMargin: 25, firstItemClass: "first-item"});
});
</script>
</head>
<body>

<div class = "container">
<div class = "item">

<img src = "http://www.tutorialspoint.com/images/75-logo.jpg"
width = "220" height = "200" />
</div>

<img src = "http://www.tutorialspoint.com/images/absolute-classes-free.jpg"
width = "180" height = "200" />
</div>

<img src = "http://www.tutorialspoint.com/images/absolute-classes-latesttechnologies.jpg"
width = "250" height = "200" />
</div>

<img src = "http://www.tutorialspoint.com/images/absolute-classes.jpg"
width = "200" height = "200" />
</div>

<img src = "http://lorempixel.com/240/200?5" width = "240" height = "200" />
</div>

<img src = "http://lorempixel.com/210/200?6" width="210" height="200" />
</div>

<img src = "http://lorempixel.com/260/200?21" width = "260" height = "200"
/>
</div>

/>
</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<img src = "http://lorempixel.com/190/200?8" width="190" height = "200" />
</div>

<img src = "http://lorempixel.com/260/200?9" width = "260" height="200" />
</div>

/>
</div>
</div>
</body>
</html>
Click hereAlertify.js is a jQuery plugin for showing alert messages in
different format
A Simple of alertify example as shown below
<!doctype html>
<html lang = "en">
<head>
<title>alertify.js - example page</title>
<link rel = "stylesheet" href = "alertify.core.css" />
<link rel = "stylesheet" href = "alertify.default.css" id = "toggleCSS" />
<meta name = "viewport" content = "width = device-width">
<style>
.alertify-log-custom {
background: blue;
}
</style>
</head>
<body>
<h2>Dialogs</h2>
<a href = "#" id = "alert">Alert Dialog</a><br>

<a href = "#" id = "confirm">Confirm Dialog</a><br>
<a href = "#" id = "prompt">Prompt Dialog</a><br>
<a href = "#" id = "labels">Custom Labels</a><br>
<a href = "#" id = "focus">Button Focus</a><br>
<a href = "#" id = "order">Button Order</a>
<h2>Ajax</h2>
<a href = "#" id = "ajax">Ajax - Multiple Dialog</a>
<h2>Logs</h2>
<a href = "#" id = "notification">Standard Log</a><br>

<a href = "#" id = "success">Success Log</a><br>
<a href = "#" id = "error">Error Log</a><br>
<a href = "#" id = "custom">Custom Log</a><br>
<a href = "#" id = "delay">Hide in 10 seconds</a><br>
<a href = "#" id = "forever">Persistent Log</a>
<h2>Themes</h2>
<a href = "#" id = "bootstrap">Bootstrap Theme</a>
<script src = "http://code.jquery.com/jquery-1.9.1.js"></script>

<script src = "alertify.min.js"></script>
<script>
function reset () {
$("#toggleCSS").attr("href", "alertify.default.css");
alertify.set({
labels : {
ok
: "OK",
cancel : "Cancel"
},
delay : 5000,
buttonReverse : false,
buttonFocus : "ok"
});
}
$("#alert").on( 'click', function () {

reset();
alertify.alert("This is an alert dialog");
return false;
});
$("#confirm").on( 'click', function () {

reset();
alertify.confirm("This is a confirm dialog", function (e) {

if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#prompt").on( 'click', function () {

reset();
alertify.prompt("This is a prompt dialog", function (e, str) {

if (e) {
alertify.success("You've clicked OK and typed: " + str);
} else {
}
}, "Default Value");
return false;
});
$("#ajax").on("click", function () {
reset();
alertify.confirm("Confirm?", function (e) {

if (e) {
alertify.alert("Successful AJAX after OK");
} else {
alertify.alert("Successful AJAX after Cancel");
}
});
});
$("#notification").on( 'click', function () {

reset();
alertify.log("Standard log message");
return false;
});
$("#success").on( 'click', function () {

reset();
alertify.success("Success log message");
return false;
});
$("#error").on( 'click', function () {

reset();
alertify.error("Error log message");
return false;
});
$("#delay").on( 'click', function () {

reset();
alertify.set({ delay: 10000 });
alertify.log("Hiding in 10 seconds");
return false;
});
$("#forever").on( 'click', function () {

reset();
alertify.log("Will stay until clicked", "", 0);
return false;
});
$("#labels").on( 'click', function () {

reset();
alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
alertify.confirm("Confirm dialog with custom button labels", function (e) {

if (e) {
} else {
}
});
return false;
});
$("#focus").on( 'click', function () {

reset();
alertify.set({ buttonFocus: "cancel" });
alertify.confirm("Confirm dialog with cancel button focused", function (e) {
if (e) {
} else {
}
});
return false;
});
$("#order").on( 'click', function () {

reset();
alertify.set({ buttonReverse: true });
alertify.confirm("Confirm dialog with reversed button order", function (e) {

if (e) {
} else {
}
});
return false;
});
$("#custom").on( 'click', function () {

reset();
alertify.custom = alertify.extend("custom");
alertify.custom("I'm a custom log message");
return false;
});
$("#bootstrap").on( 'click', function () {
reset();
$("#toggleCSS").attr("href", ".alertify.bootstrap.css");
alertify.prompt("Prompt dialog with bootstrap theme", function (e) {

if (e) {
} else {
}
}, "Default Value");
return false;
});
</script>
</body>
</html>

Click hereProgressbar.js is a jQuery plugin for showing progress bar
A Simple of progressbar example as shown below

<!doctype html>
<html>
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome = 1">
initial-scale = 1">
<link href = "http://www.jqueryscript.net/css/jquerysctipttop.css"

rel = "stylesheet" type = "text/css">
<link rel = "stylesheet" href = "jQuery-plugin-progressbar.css">

<script src = "jQuery-plugin-progressbar.js"></script>
</head>
<body>
<div class = "progress-bar position"></div>

<div class = "progress-bar position" data-percent = "40"
data-duration = "1000" data-color = "#ccc,yellow"></div>
<div class = "progress-bar position" data-percent = "90"
data-color = "#a456b1,#12b321"></div>
<input type = "submit" value="reload">
<script>
$(".progress-bar").loading();
$('input').on('click', function () {
$(".progress-bar").loading();
});
</script>
</body>
</html>
is a jQuery plugin for quickly and easily

implementing slide show of images or videos into your website.
Click
hereSlideshow.js
A Simple of slide show example as shown below

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8" />
<link rel = "stylesheet" href = "css/supersized.css"
type = "text/css" media = "screen" />
<link rel = "stylesheet" href = "theme/supersized.shutter.css"
type = "text/css" media = "screen" />

src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type = "text/javascript" src = "js/jquery.easing.min.js"></script>
<script type = "text/javascript" src = "js/supersized.3.2.7.min.js"></script>
<script type = "text/javascript" src = "theme/supersized.shutter.min.js"></script>

jQuery(function($){
$.supersized({
slideshow
: 1,
autoplay
: 1,
start_slide
: 1,
stop_loop
: 0,
random
: 0,
slide_interval : 3000,
transition
: 6,
transition_speed : 1000,
new_window
: 1,
pause_hover
: 0,
keyboard_nav
: 1,
performance
: 1,
image_protect
: 1,
min_width
: 0,
min_height
: 0,
vertical_center : 1,
horizontal_center: 1,
fit_always
fit_portrait
fit_landscape
slide_links
thumb_links
: 0,
: 1,
: 0,
: 'blank',
: 1,
thumbnail_navigation: 0,
slides : [{image : '
http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/sli
des/kazvan-1.jpg',
title : 'Sample demo', thumb :

http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thu
mbs/kazvan-1.jpg',
url : 'http://www.tutorialspoint.com'},
{image : '
http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/sli
des/kazvan-3.jpg',
title : 'Sample demo', thumb : '

http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/
thumbs/kazvan-3.jpg',
{image : '
slides/wojno-1.jpg',

thumbs/wojno-1.jpg',
{image : '

thumbs/wojno-2.jpg',
{image : '

thumbs/wojno-3.jpg', url : 'http://www.tutorialspoint.com'},
],
progress_bar : 1,
mouse_scrub : 0
});
});
</script>
</head>
<style type = "text/css">

ul#demo-block{ margin:0 15px 15px 15px; }
ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left;
clear:both; color:#aaa; background:url('img/bg-black.png');
font:11px Helvetica, Arial, sans-serif; }
ul#demo-block li a{ color:#eee; font-weight:bold; }
</style>
<body>
<div id = "prevthumb"></div>
<div id = "nextthumb"></div>
<a id = "prevslide" class = "load-item"></a>

<a id = "nextslide" class = "load-item"></a>
<div id = "thumb-tray" class = "load-item">

<div id = "thumb-back"></div>
<div id = "thumb-forward"></div>
</div>
<div id = "progress-back" class = "load-item">

<div id = "progress-bar"></div>
</div>
<div id = "controls-wrapper" class = "load-item">
<div id = "controls">
<a id = "play-button"><img id = "pauseplay"
src = "img/pause.png"/></a>
<div id = "slidecounter">
<span class = "slidenumber"></span> / <
span class = "totalslides"></span>
</div>
<div id = "slidecaption"></div>
<a id = "tray-button"><img id = "tray-arrow"
src = "img/button-tray-up.png"/></a>
<ul id = "slide-list"></ul>
</div>
</div>
</div>
</body>
</html>

Click hereDrawsvg.js is a jQuery plugin to draw svg images
A Simple of drawsvg example as shown below

<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "shortcut icon" type = "image/x-icon" href = "favicon.ico">
href = "https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "overlay">
<div class = "inner">
<h1>jQuery DrawSVG Sample</h1>
<div class = "items-wrapper">
<div class ="item active">

<svg viewBox = "0 0 201 146" class = "svgClass"
style = "background-color:#ffffff00"
xmlns = "http://www.w3.org/2000/svg" width = "201"
height = "146">
<g stroke = "#FFF" stroke-width = "1" fill = "none">

<path d = "M200.5 128.586c0 9.302-7.678
16.914-17.06 16.914H17.56C8.18 145.5.5
137.888.5 128.586V29.414C.5 20.112 8.178
12.5 17.56 12.5h165.88c9.382 0 17.06
7.612 17.06 16.914v99.172z"/>
<path d = "M183.828 80.118c0 26.467-21.644

47.924-48.34 47.924-26.698
0-48.342-21.457-48.342-47.924s21.644-47.924
48.34-47.924c26.698 0 48.342 21.457 48.342
47.924z"/>
<path d = "M171.98 80.118c0 19.978-16.338
36.177-36.493 36.177-20.15
0-36.49-16.2-36.49-36.177 0-19.98
16.34-36.177 36.49-36.177 20.155 0
36.494 16.2 36.494 36.178z"/>
<path d = "M50.18 48.637c0 6.49-5.304

11.747-11.852 11.747-6.543
0-11.847-5.258-11.847-11.747 0-6.488
5.305-11.746 11.848-11.746 6.548 0 11.852
5.26 11. 852 11.747z"/>
<path d = "M17.928 39.877c3.41-7.835

11.258-13.305 20.416-13.305 9.16 0 17.006
5.47 20.416 13.305"/>
<path d = "M46 12V4H26v8"/>

<path d = "M94.833 12l11.5-11.5h59.5l11.5 11.5"/>
<path d = "M26.333 92.5h35.5"/>
<path d = "M26.333 105.5h43"/>
<path d = "M26.333 117.5h52"/>
</g>
</svg>
</div>

<svg viewBox = "0 0 207 105" style = "background-color:#ffffff00"
height = "105">

<path d = "M127 63.496C127 85.306 144.455
103 165.998 103 187.538 103 205 85.306
205 63.496 205 41.682 187.537 24 165.998

24 144.455 24 127 41.682 127 63.496z"/>
<path d = "M195 63.497C195 47.206 182.015 34 166 34"/>
<path d = "M2 63.496C2 85.306 19.455 103

41.002 103 62.542 103 80 85.306 80 63.496
80 41.682 62.54 24 41.002 24 19.455 24 2
41.682 2 63.496z"/>
<path d = "M64.296 22.732C57.656 18.094

47.492 16 41.002 16c-6.49 0-12.675
1.33-18.3 3.732-5.622 2.404-10.686
5.88-14.938 10.178"/>
<path d = "M159.715 63.576c0 3.634 2.902

6.575 6.49 6.575 3.582 0 6.484-2.94
6.484-6.574 0-3.63-2.903-6.575-6.486-6.575-3.587
0-6.49 2.946-6.49 6.576z"/>
<path d = "M34.873 64.032c0 3.63 2.907

6.575 6.494 6.575 3.578 0 6.485-2.945
6.485-6.575 0-3.635-2.907-6.575-6.485-6.575-3.587
0-6.494 2.94-6.494 6.575z"/>
<path d = "M163.25 57.026L141.773 3"/>

<path d = "M98 63.5H48"/>
<path d = "M101.73 57.63L70.5 14.013"/>
<path d = "M70.49 14.5h76.646v-.206"/>
<path d = "M139.134 14.505L108.468 57.95"/>
<path d = "M70.894 15.05L42.834 57.05"/>
<path d = "M70.5 14V3"/>
<path d = "M141.427 3.23s19.83-7.71 19.83 6.344"/>
<path d = "M97.816 62.52c0 3.576 2.86 6.475

6.39 6.475s6.392-2.9
6.392-6.476c0-3.577-2.86-6.476-6.39
-6.476s-6.392 2.9-6.392 6.476z"/>
<path d = "M106.642 69.26l2.913 11.044"/>

<path d = "M105 83l10-5"/>
<path d = "M62.5 3.5h18"/>
</g>
</svg>
</div>

height = "116">

<path d = "M19.5 101.5V6.45C19.5 3.176 23.12.5
26.402.5H175.53c3.282 0 5.97 2.677 5.97
5.95v95.05"/>
<path d = "M171.5 89.5h-140v-77h140v77z"/>
<path d = "M200.5 107.526c0 1.635-1.344

2.974-2.985 2.974H3.485c-1.64
0-2.985-1.34-2.985-2.974v-3.052c0-1.635
1.344-2.974 2.985-2.974h194.03c1.64 0 2.985
1.34 2.9852.974v3.052z"/>
<path d = "M1 110l10.5 5.5"/>

<path d = "M11.604 115.5H189.46"/>
<path d = "M189.5 115.5l9.5-5.5"/>
<path d = "M99.5 7.5h5"/>
<path d = "M138.5 12.5l28 28"/>
<path d = "M148.5 12.5l18 18"/>
<path d = "M159.5 12.5l7 6"/>
</g>
</svg>
</div>

height = "155">

<path d="M161.996 151.39l-33.97-27.178-45.01
30.576-35.67-27.603L.36 154.245 38.662 20.04
80.893 4.034l39.066 17.41L161.995.213l37.792
22.932-37.792 128.246z"/>
<path d = "M47.346 127.185L80.892 4.035"/>

<path d = "M83.015 154.788l36.942-133.343"/>
<path d = "M128.025 124.212l33.97-124"/>
<path d = "M46.278 23.935L32.29 75.605"/>
<path d = "M95.802 45.718L81.19 97.225"/>
<path d = "M106.91 33.115l-22.26 81.39"/>
<path d = "M176.768 46.665c0 3.523-2.85

6.376-6.366 6.376-3.514 0-6.364-2.852
-6.364-6.375 0-3.512 2.85-6.37
6.364-6.37 3.516 0 6.366 2.858

6.366 6.37z"/>
<path d = "M180.9 52.392l-10.844

19.91-10.394-19.995s-1.143-3.215-1.
143-5.067c0-6.514 5.273-11.81 11.79-11.81
6.508 0 11.782 5.296 11.782 11.81
0 1.852-1.192 5.152-1.192 5.152z"/>
<path d = "M43.86 92.528c0 3.523-2.85

6.376-6.367 6.376-3.514 0-6.364-2.
853-6.364-6.376 0-3.512 2.85-6.37
6.363-6.37 3.517 0 6.366 2.858
6.366 6.37z"/>
<path d = "M47.99 98.255l-10.843 19.91L26.754

98.17s-1.143-3.215-1.
143-5.067c0-6.514 5.275-11.81
11.793-11.81 6.507 0 11.78 5.296
11.78 11.81 0 1.852-1.192
5.152-1.192 5.152z"/>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "fb-root"></div>
<script async src = "//assets.codepen.io/assets/embed/ei.js"></script>

<script src = "https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
<script
src =
"https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js"></script>
<script src = "jquery.drawsvg.min.js"></script>
<script>
$(function() {
var $doc = $(document),

$win = $(window);
var $intro = $('.intro'),

$items = $intro.find('.item'),
itemsLen = $items.length,
svgs = $intro.find('svg').drawsvg({
callback: animateIntro,
easing: 'easeOutQuart'
}),
currItem = 0;
function animateIntro() {
$items.removeClass('active').eq( currItem++ % itemsLen
).addClass('active').find('svg').drawsvg('animate');
}
animateIntro();
var $header = $('header'),

headerOffTop = $header.offset().top,
isFixed = false;
function menu() {
if ( $win.scrollTop() >= headerOffTop ) {
if ( !isFixed ) {
isFixed = true;
$header.addClass('affix');
}
} else if ( isFixed ) {
isFixed = false;
$header.removeClass('affix');
}
}
$win.on('scroll', menu);
menu();
$header.on('click', 'a[href^="#"]', function(e) {

e.preventDefault();
var hash = this.hash,

offset = $(hash).offset().top;
$('body, html').animate({
scrollTop: offset
}, 600, 'easeInOutQuart', function() {
document.location.hash = hash;
});
});
});
</script>
</body>
</html>

Tagsort.is a jQuery plugin for showing tags.
A Simple of tagsort Example as shown below
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Tagsort Demo</title>


<style>
html,body {
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.container {
width: 80%;
margin: 0 auto;
h1 > small a {
color: #AAA;
text-decoration: none;
font-size: 70%;
margin-left: 10px;
}
h1 > small a:hover {

color: #000;
}
.item {
box-sizing: border-box;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
width: 20%;
height: 360px;
max-height: 360px;
overflow: hidden;
.item .wrapper {
background-color: #f4f4f4;
padding: 8px;
height: 100%;
}
.item .wrapper img {

width: 100%;
}
.item .wrapper .item-tags {

color: #AAA;
font-size: 12px;
line-height: 1.8;
}
.tagsort-tags-container {
margin: 40px 0;
}
</style>
<link href = "styles/tagsort.min.css" rel = "stylesheet" type = "text/css"></link>
<script src = "scripts/jquery-2.1.3.min.js"

type = "text/javascript" charset = "utf-8"></script>
<script src = "scripts/tagsort.min.js"
type = "text/javascript" charset = "utf-8"></script>
<script>
$(function(){
$('div.tags-container').tagSort({selector:'.item', tagWrapper:'span',
displaySelector: '.item-tags', displaySeperator: ' / ', inclusive:
false, fadeTime:200});
});
</script>
</head>
<body>
<div class = "tags-container row"></div>
<div class = "item col-md-3" data-item-id = "1"

data-item-tags = "PHP,JavaScript,React,Memcached,RocksDB,Cassandra,Flux">
<div class = "wrapper">
<img src = "images/facebook.jpg" alt = "Facebook">
<h2>Facebook</h2>
<p class = "item-tags"></p>
</div>
</div>

data-item-tags =
"MySQL,JavaScript,jQuery,Memcached,Scala,Rails,Hadoop,Redis">
<img src = "images/twitter.jpg" alt = "Twitter">
<h2>Twitter</h2>
</div>
</div>

data-item-tags = "MySQL,Node.js,Python,JavaScript,React,Java,Cassandra">
<img src = "images/netflix.jpg" alt = "Netflix">
<h2>Netflix</h2>
</div>
</div>

data-item-tags = "MySQL,Node.js,Python,Java,ObjectiveC,PostgreSQL,Redis,MongoDB">
<img src = "images/uber.jpg" alt = "Uber">
<h2>Uber</h2>
</div>
</div>

data-item-tags = "MySQL,Python,Memcached,nginx">
<img src = "images/dropbox.jpg" alt = "Dropbox">
<h2>Dropbox</h2>
</div>
</div>

data-item-tags = "Python,Java,Cassandra,Hadoop,PostgreSQL,Hadoop">
<img src = "images/spotify.jpg" alt = "Spotify">
<h2>Spotify</h2>
</div>
</div>
<div class = " item col-md-3" data-item-id = "7"

data-item-tags = "MySQL,Javascript,jQuery,Ruby,Redis,nginx,Rails,SASS">
<img src = "images/kickstarter.jpg" alt = "Kickstarter">
<h2>Kickstarter</h2>
</div>
</div>

data-item-tags = "Go,Ruby,MySQL,Redis,Memcached,SASS,Rails,nginx">
<img src = "images/digitalocean.jpg" alt = "DigitalOcean">
<h2>DigitalOcean</h2>
</div>
</div>

data-item-tags = "Ruby,MySQL,Hadoop,nginx,PHP,Scala,Memcached,Redis">
<img src = "images/tumblr.jpg" alt = "Tumblr">
<h2>Tumblr</h2>
</div>
</div>

data-item-tags = "nginx,MySQL,Redis,Rails,Ruby,Hadoop">
<img src = "images/shopify.jpg" alt = "Shopify">
<h2>Shopify</h2>
</div>
</div>
data-item-tags = "JavaScript,jQuery,Redis,Java,Go,Cassandra,.NET">
<img src = "images/stackexchange.jpg" alt = "Stack Exchange">
<h2>Stack Exchange</h2>
</div>
</div>

data-item-tags =
"nginx,Redis,MongoDB,Python,Java,React,JavaScript,Scala,Cassandra">
<img src = "images/keenio.jpg" alt = "Keen IO">
<h2>Keen IO</h2>
</div>
</div>
</div>
</body>
</html>

Click hereLogosdistort.js is a jQuery plugin for quickly and easily
implementing of mouse over effect on images

A Simple of logosdistort example as shown below
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/fontawesome.min.css">
<link href = "assets/css/style.css" rel = "stylesheet" />
<link href = "assets/css/perspectiveRules.css" rel = "stylesheet" />
</head>
<body>
<div id = "min-max-tag"><i class = "fa fa-chevron-circle-left"></i></div>
<div id = "demo1">
<div id = "particle-target" ></div>
<img alt = "logo" src = "assets/images/logo.png" />
</div>
<script
<script src = "assets/js/jquery.logosDistort.min.js"></script>
<script src = "assets/js/jquery.particleground.min.js"></script>
<script>
var particles = true,
particleDensity,
options = {
effectWeight: 1,
outerBuffer: 1.08,
elementDepth: 220
};
$("#demo1").logosDistort(options);
if (particles) {
particleDensity = window.outerWidth * 7.5;
if (particleDensity < 13000) {
particleDensity = 13000;
} else if (particleDensity > 20000) {
particleDensity = 20000;
}
return $('#particle-target').particleground({
dotColor: '#1ec5ee',
lineColor: '#0a4e90',
density: particleDensity.toFixed(0),
parallax: false
});
}
});
</script>
</body>
</html>

Click hereFiler.js is a jQuery plugin for quickly and easily implementing of
uploading files.
A Simple of filer.js example as shown below
<head>

<link href = "css/jquery.filer.css" type = "text/css" rel = "stylesheet" />
<link href = "css/themes/jquery.filer-dragdropbox-theme.css"
type = "text/css" rel = "stylesheet" />


src = "http://code.jquery.com/jquery-latest.min.js"></script>
src = "js/jquery.filer.min.js"></script>

$('#input1').filer();
$('.file_input').filer({
showThumbs: true,
templates: {
box: '<ul class = "jFiler-item-list"></ul>',
item: '<li class = "jFiler-item">\
<div class = "jFiler-item-container">\

<div class = "jFiler-item-inner">\
<div class = "jFiler-item-thumb">\

<div class = "jFiler-item-status"></div>\
<div class = "jFiler-item-info">\
<span class = "jFiler-item-title"><
b title = "{{fi-name}}">{{fi-name |
limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class = "jFiler-item-assets jFiler-row">\

<ul class = "list-inline pull-left">\
<li><span class = "jFiler-item-others">
{{fi-icon}} {{fi-size2}}</span></li>\
</ul>\
<ul class = "list-inline pull-right">\

<li><a class = "icon-jfi-trash
jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class = "jFiler-item">\

<span class = "jFiler-item-title"><
b title = "{{fi-name}}">{{fi-name |
</div>\
{{fi-image}}\
</div>\

<span class = "jFiler-item-others">
{{fi-icon}} {{fi-size2}}</span>\
</ul>\

jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class = "bar"></div>',

itemAppendToEnd: true,
removeConfirmation: true,
_selectors: {
list: '.jFiler-item-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action',
}
},
addMore: true,
files: [{
name: "appended_file.jpg",
size: 5453,
type: "image/jpg",
file: "http://dummyimage.com/158x113/f9f9f9/191a1a.jpg",
},{
name: "appended_file_2.png",
size: 9503,
type: "image/png",
file: "http://dummyimage.com/158x113/f9f9f9/191a1a.png",
}]
});
$('#input2').filer({
limit: null,
maxSize: null,
extensions: null,
changeInput: '
<div class = "jFiler-input-dragDrop">

<div class = "jFiler-input-inner">
<div class = "jFiler-input-icon">

<i class = "icon-jfi-cloud-up-o"></i>
</div>
<div class = "jFiler-input-text">

<h3>Drag&Drop files here</h3>
<span style = "display:inline-block;
margin: 15px 0">or</span>
</div>
<a class = "jFiler-input-choose-btn blue">
Browse Files</a>
</div>
</div>',
showThumbs: true,
appendTo: null,
theme: "dragdropbox",
templates: {
box: '<ul class = "jFiler-item-list"></ul>',
item: '<li class = "jFiler-item">\


<span class = "jFiler-item-title">
<b title = "{{fi-name}}">{{fi-name |
</div>\
{{fi-image}}\
</div>\

<li>{{fi-progressBar}}</li>\
</ul>\

jFiler-item-trash-action"></a>
</li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class = "jFiler-item">\



<span class = "jFiler-item-title">
<b title = "{{fi-name}}">{{fi-name |
</div>\
{{fi-image}}\
</div>\

<span class = "jFiler-item-others">
{{fi-icon}} {{fi-size2}}</span>\
</ul>\

jFiler-item-trash-action"></a>
</li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class = "bar"></div>',

itemAppendToEnd: false,
removeConfirmation: false,
_selectors: {
list: '.jFiler-item-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action',
}
},
uploadFile: {
url: "./php/upload.php",
data: {},
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function(){},
success: function(data, el){

var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class = \"jFiler-item-others text-success\"
><i class = \"icon-jfi-check-circle\">
</i> Success
</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function(el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class = \"jFiler-item-others text-error\"
><i class = \"icon-jfi-minus-circle\">
</i> Error
</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: {},
onProgress: function(){},
},
dragDrop: {
dragEnter: function(){},
dragLeave: function(){},
drop: function(){},
},
addMore: true,
clipBoardPaste: true,
excludeName: null,
beforeShow: function(){return true},
onSelect: function(){},
afterShow: function(){},
onRemove: function(){},
onEmpty: function(){},
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large!
Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large!
Please upload files up to {{fi-maxSize}} MB."
}
}
});
});
</script>
<style>
.file_input{
display: inline-block;
padding: 10px 16px;

outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
white-space: nowrap;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
border-radius: 3px;
color: #008BFF;
border: 1px solid #008BFF;
vertical-align: middle;
background-color: #fff;
box-shadow: 0px 1px 5px rgba(0,0,0,0.05);

-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.file_input:hover,
.file_input:active {
background: #008BFF;
color: #fff;
}
</style>

</head>
<body>
<div>
<form action = "./php/upload.php" method = "post"
enctype = "multipart/form-data">


<input type = "file" multiple = "multiple"
name = "files[]" id = "input1">
<br>
<input type = "submit">
</form>
</div>
<br>
<hr>
<br>
<div>
<form action = "./php/upload.php" method = "post"
enctype = "multipart/form-data">

<a class = "file_input" data-jfiler-name = "files"

data-jfiler-extensions = "jpg, jpeg, png, gif">
<i class = "icon-jfi-paperclip"></i>
Attach a file</a>
<br>
<input type = "submit">
</form>
</div>
<br>
<hr>
<br>
<div style = "background: #f7f8fa;padding: 50px;">


<input type = "file" multiple = "multiple"
name = "files[]" id = "input2">
</div>
</body>
</html>

Click hereWhatsnearby.js is a jQuery plugin for quickly find the nearest
places.
A Simple of whatsnearby.js example as shown below
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src = "example/js/es5-shim.min.js"

<script src = "example/js/es5-sham.min.js"
<script
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
<script
src = "http://maps.googleapis.com/maps/api/js?
v=3.exp&sensor=false&libraries=places"></script>
<script src = "source/WhatsNearby.js"

$(document).ready(function(){
$("#wn2").whatsnearby({
zoom:15,
width:"100%",
address: "jublihills",
placesRadius: 500,
placesTypes: [ 'restaurant', 'cafe', 'gym' ]
});
});
</script>
</head>
<body>
<div class = "well">
<div id = "wn2">
<div class = "infowindow-markup">
<strong>{{name}}</strong><br/>
{{vicinity}}
</div>
</div>
</div>
</div>
</body>
</html>

Checkout.js is a jQuery plugin for easy to implementation of check out
for e-commerce websites.
A Simple of checkout.js example as shown below
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1" />
<title>Untitled Document</title>
<script type = "text/javascript" src = "jquery-1.3.2.js"></script>
<script type = "text/javascript" src = "jquery.livequery.js"></script>
<link href = "css.css" rel = "stylesheet" />
var Arrays = new Array();
$('#wrap li').mousemove(function(){
var position = $(this).position();
$('#cart').stop().animate({
left : position.left+'px',
},250,function(){
});
}).mouseout(function(){
});
$('#wrap li').click(function(){
var thisID = $(this).attr('id');
var itemname = $(this).find('div .name').html();

var itemprice = $(this).find('div .price').html();
if(include(Arrays,thisID)){
var price = $('#each-'+thisID).children(".shopp-price").

find('em').html();
var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
quantity = parseInt(quantity)+parseInt(1);
var total = parseInt(itemprice)*parseInt(quantity);
$('#each-'+thisID).children(".shopp-price").
find('em').html(total);
$('#each-'+thisID).children(".shopp-quantity").html(quantity);
var prev_charges = $('.cart-total span').html();

prev_charges = parseInt(prev_charges)-parseInt(price);
prev_charges = parseInt(prev_charges)+parseInt(total);
$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);
} else {
Arrays.push(thisID);

prev_charges = parseInt(prev_charges)+parseInt(itemprice);
$('#left_bar .cart-info').append('
<div class = "shopp" id = "each-'+thisID+'">
<div class = "label">'+itemname+'</div>
<div class = "shopp-price">
$<em>'+itemprice+'</em></div>
<span class = "shopp-quantity">1</span>
<img src = "remove.png" class = "remove" />
<br class = "all" />
</div>');
$('#cart').css({'-webkit-transform' :
'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });
}
setTimeout('angle()',200);
});
$('.remove').livequery('click', function() {
var deduct = $(this).parent().children(".shopp-price")

.find('em').html();
var thisID = $(this).parent().attr('id').replace('each-','');
var pos = getpos(Arrays,thisID);

Arrays.splice(pos,1,"0")
prev_charges = parseInt(prev_charges)-parseInt(deduct);
$(this).parent().remove();
});
$('#Submit').livequery('click', function() {
var totalCharge = $('#total-hidden-charges').val();
$('#left_bar').html('Total Charges: $'+totalCharge);
return false;
});
});
function include(arr, obj) {

for(var i = 0; i<arr.length; i++) {
if (arr[i] == obj) return true;
}
}
function getpos(arr, obj) {

for(var i = 0; i<arr.length; i++) {
if (arr[i] == obj) return i;
}
}
function angle(){$('#cart').css({'-webkit-transform' :
'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}
</script>
</head>
<body>
<div align = "left">
<div id = "wrap" align = "left">
<ul>
<li id = "1">
<img src = "a1.png" class = "items" height = "100" alt = "" />
<br clear = "all" />

<div><span class = "name">Learn Java:
Price</span>: $<span class = "price">
800</span> </div>
</li>
<li id = "2">
<img src = "5.png" class = "items" height = "100" alt = "" />

<div><span class = "name">Learn HTML
</span>: $<span class = "price">500
</span></div>
</li>
<li id="3">

<div><span class = "name">Learn Android
</span></div>
</li>
<li id = "4">

<div><span class = "name">Learn SVG
</span></div>
</li>
<li id = "5">

<div> <span class = "name">Learn Bootstrap
</span></div>
</li>
<li id = "6">

<div><span class = "name">Learn HTML
</span> </div>
</li>
<li id = "7">

<div><span class = "name"> Learn Bootstrap
</span></div>
</li>
<li id = "8">

<div><span class = "name">Learn SVG
</span></div>
</li>
<li id = "9">

<div><span class = "name">Learn Angular Js
</span></div>
</li>
</ul>
</div>
<div id = "left_bar">
<form action = "#" id="cart_form" name = "cart_form">
<div class = "cart-info"></div>
<div class = "cart-total">
<b>Total Charges:
</b>
$<span>0</span>
<input type = "hidden" name = "total-hidden-charges"

id = "total-hidden-charges" value = "0" />
</div>
<button type = "submit" id = "Submit">CheckOut</button>
</form>
</div>
</div>
</body>
</html>

Click hereBlockrain.js is a jQuery plugin for lets you embed the classic
Tetris game on your website.

A Simple of blockrain example as shown below
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<link href = 'http://fonts.googleapis.com/css?family=Play:400,700'

rel = 'stylesheet' type = 'text/css'>
<link rel = "stylesheet" href = "assets/css/style.css">
<link rel = "stylesheet" href = "src/blockrain.css">
</head>
<body>
<section id = "examples">
<article id = "example-slider">
<div class = "example">
<div class = "instructions">
Use only arrows
<div class = "keyboard">

<div class = "key key-up"></div>
<div class = "key key-left"></div>
<div class = "key key-down"></div>
<div class = "key key-right"></div>
</div>
</div>
<div class = "game" id = "tetris-demo"></div>

</div>
</article>
</section>
<script src = "assets/js/jquery-1.11.1.min.js"></script>

<script src = "src/blockrain.jquery.libs.js"></script>
<script src = "src/blockrain.jquery.src.js"></script>
<script src = "src/blockrain.jquery.themes.js"></script>
<script>
var $cover = $('#cover-tetris').blockrain({
autoplay: true,
autoplayRestart: true,
speed: 100,
autoBlockWidth: true,
autoBlockSize: 25,
theme: 'candy'
});
var versusSpeed = 500;
var $versus1 = $('#tetris-versus-1 .game').blockrain({

autoplay: true,
speed: versusSpeed,
onGameOver: function() {
$versus1.blockrain('restart');
var $score = $versus2.parent().find('.score');
$score.text( parseInt($score.text()) + 1 );
}
});
var $versus2 = $('#tetris-versus-2 .game').blockrain({

autoplay: true,
speed: versusSpeed,
onGameOver: function() {
var $score = $versus1.parent().find('.score');
$score.text( parseInt($score.text()) + 1 );
}
});
var $demo = $('#tetris-demo').blockrain({

speed: 20,
theme: 'black',
onStart: function() {
ga( 'send', 'event', 'tetris', 'started');
},
onLine: function() {
ga( 'send', 'event', 'tetris', 'line');
},
onGameOver: function(score){
ga( 'send', 'event', 'tetris', 'over', score);
}
});
$('#example-slider').find('.btn-next').click(function(event){
event.preventDefault();
switchDemoTheme(true);
});
$('#example-slider').find('.btn-prev').click(function(event){
event.preventDefault();
switchDemoTheme(false);
});
function switchDemoTheme(next) {
var themes = Object.keys(BlockrainThemes);
var currentTheme = $demo.blockrain('theme');

var currentIx = themes.indexOf(currentTheme);
if( next ) { currentIx++; }

else { currentIx--; }
if( currentIx > = themes.length ){ currentIx = 0; }

if( currentIx < 0 ){ currentIx = themes.length-1; }
$demo.blockrain('theme', themes[currentIx]);
$('#example-slider .theme strong').text( '"'+themes[currentIx]+'"' );
}
</script>
</body>
</html>
Click hereProducttour.js
is a jQuery plugin for quickly and easily

implementing of help guide into your website.
A Simple of producttour.js example as shown below
<!doctype html>
<html lang = "en" class = "no-js">
<head>
initial-scale = 1">
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/style.css">
<script src = "js/modernizr.js"></script>
</head>
<body background = "tp.png">
<div class = "cd-nugget-info">

<button id = "cd-tour-trigger" class = "cd-btn">Start tour</button>
</div>
<ul class = "cd-tour-wrapper">
<li class = "cd-single-step">

<span>Step 1</span>
<div class = "cd-more-info bottom">

<h2>Step Number 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Modi alias animi molestias in, aperiam.</p>
<img src = "img/step-1.png" alt = "step 1">
</div>
</li>

<span>Step 2</span>
<div class = "cd-more-info top">

<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Officia quasi in quisquam.</p>
</div>
</li>

<span>Step 3</span>
<div class = "cd-more-info right">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Optio illo non enim ut necessitatibus perspiciatis,
dignissimos.</p>
</div>
</li>
</ul>
<script src = "js/jquery-2.1.4.js"></script>

<script src = "js/jquery.mobile.min.js"></script>
<script src = "js/main.js"></script>
</body>
</html>

Click hereMegadropdown.js is a jQuery plugin for easy and quickly
implementing of drop down menu.

Example of Drop down menu as shown below
<!doctype html>
<html lang = "en" class = "no-js">
<head>
initial-scale = 1">
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/style.css">
<script src = "js/modernizr.js"></script>
</head>
<body>
<header>
<div class = "cd-dropdown-wrapper">
<a class = "cd-dropdown-trigger" href = "#0">Dropdown</a>
<nav class = "cd-dropdown">

<h2>Title</h2>
<a href = "#0" class = "cd-close">Close</a>
<ul class = "cd-dropdown-content">
<li>
<form class = "cd-search">
<input type = "search" placeholder = "Search...">
</form>
</li>
<li class = "has-children">

<a href = "">images</a>
<ul class = "cd-dropdown-gallery is-hidden">
<li class = "go-back"><a href = "#0">Menu<

/a></li>
<li class = "see-all"><a href = "">

Browse Gallery</a></li>
<li>
<a class = "cd-dropdown-item" href = "">
<img src = "img/img.png" alt = "Product Image">
<h3>Product #1</h3>
</a>
</li>
<li>
<h3>Product #2</h3>
</a>
</li>
<li>
<h3>Product #3</h3>
</a>
</li>
<li>
<h3>Product #4</h3>
</a>
</li>
</ul>
</li>
<li class = "has-children">

<a href = "">Services</a>
<ul class = "cd-dropdown-icons is-hidden">
<li class = "go-back"><a href = "#0">Menu<

/a></li>
<li class = "see-all"><a href = "">

Browse Services</a></li>
<li>
<a class = "cd-dropdown-item item-1" href = "">
<h3>Service #1</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<h3>Service #2</h3>
</a>
</li>
<li>
<h3>Service #3</h3>
</a>
</li>
<li>
<h3>Service #4</h3>
</a>
</li>
<li>
<h3>Service #5</h3>
</a>
</li>
<li>
<h3>Service #6</h3>
</a>
</li>
<li>
<h3>Service #7</h3>
</a>
</li>
<li>
<h3>Service #8</h3>
</a>
</li>
<li>
<h3>Service #9</h3>
</a>
</li>
<li>
<h3>Service #10</h3>
</a>
</li>
<li>
</a>
</li>
<li>
</a>
</li>
</ul>
</li>
<li class = "cd-divider">Divider</li>
<li><a href = "">Page 1</a></li>

</ul>
</nav>
</div>
</header>
<main class = "cd-main-content">
</main>
<script src = "js/jquery-2.1.1.js"></script>

<script src = "js/jquery.menu-aim.js"></script>
<script src = "js/main.js"></script>
</body>
</html>

Click hereWeather.js is a jQuery plugin to find the information about
weather details.
A Simple of Weather.js example as shown below
<!DOCTYPE html>
<html lang = "en">
<head>
initial-scale = 1">
href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/fontawesome.min.css">
href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link href = 'http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'
rel = 'stylesheet' type = 'text/css'>
<link rel = "stylesheet" type = "text/css" href = "weather.css">
</head>
<body id = "weather-background" class = "default-weather">

<canvas id = "rain-canvas">
</canvas>
<canvas id = "cloud-canvas">
</canvas>
<canvas id = "weather-canvas">
</canvas>
<canvas id = "time-canvas">
</canvas>
<canvas id = "lightning-canvas">
</canvas>
<div class = "page-wrap">

<header class = "search-bar">
<p class = "search-text"><span

class = "search-location-text">What's the weather
like in <input id="search-location-input"
class = "search-location-input" type = "text"
placeholder = "City"> ?</span></p>
<div class = "search-location-button-group">
<button id = "search-location-button"
class = "fa fa-search search-location-button search-button"
></button>

<button id = "geo-button" class = "geo-button fa
fa-location-arrow search-button"></button>
</div>
</header>
<div id = "geo-error-message" class = "geo-error-message hide">

<button id = 'close-error' class = 'fa fa-times
close-error'></button>Uh oh! It looks like we can't
find your location. Please type your city into the search
box above!
</div>
<div id = "front-page-description"
class = "front-page-description middle">
<h1>Blank Canvas Weather</h1>
</div>
<div class = "attribution-links hide"
id = "attribution-links">
<button id = 'close-attribution'
class = 'fa fa-times close-attribution'></button>
<h3>Icons from <a href = "https://thenounproject.com/">

Noun Project</a></h3>
<ul>
<li class = "icon-attribution">
<a href = "https://thenounproject.com/term/cloud/6852/">

Cloud</a> by Pieter J. Smits</li>

<a href = "https://thenounproject.com/term/snow/64/">
Snow</a> from National Park Service Collection</li>

<a href = "https://thenounproject.com/term/drop/11449/">
Drop</a> Alex Fuller</li>

<a href = "https://thenounproject.com/term/smoke/27750/">
Smoke</a> by Gerardo Martn Martnez</li>

<a href = "https://thenounproject.com/term/moon/13554/">
Moon</a> by Jory Raphael</li>

<a href = "https://thenounproject.com/term/warning/18974/">
Warning</a> by Icomatic</li>

<a href = "https://thenounproject.com/term/sun/13545/">
Sun</a> by Jory Raphael</li>

<a href = "https://thenounproject.com/term/windsock/135621/">
Windsock</a> by Golden Roof</li>
</ul>
</div>
<div id = "weather" class = "weather middle hide">
<div class = "location" id = "location"></div>
<div class = "weather-container">
<div id = "temperature-info" class = "temperature-info">

<div class = "temperature" id = "temperature">
</div>
<div class = "weather-description" id = "weather-description">
</div>
</div>
<div class = "weather-box">
<ul class = "weather-info" id = "weather-info">

<li class = "weather-item humidity">Humidity:
<span id = "humidity"></span>%</li>
<li class = "weather-item wind">Wind: <span
id = "wind-direction"></span> <span
id = "wind"></span> <span
id = "speed-unit"></span></li>
</ul>
</div>
<div class = "temp-change">

<button id = "celsius"
class = "temp-change-button celsius">C
</button><button id = "fahrenheit"
class = "temp-change-button fahrenheit">

F</button>
</div>
</div>
</div>
</div>
<script
src = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "weather.js"></script>
</div>
</body>
</html>

Click here

AJAX y JQUERY Manual

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

AJAX y JQUERY Manual

Caricato da

Copyright:

Formati disponibili

What is AJAX?

for Asynchronous JavaScript

Rich Internet Application Technology

AJAX is Based on Open Standards

Browser-based presentation using HTML and Cascading Style Sheets (CSS).

Data is stored in XML format and fetched from the server.

Behind-the-scenes data fetches using XMLHttpRequest objects in the

JavaScript to make everything happen.

AJAX cannot work independently. It is used in combination with other

Loosely typed scripting language.

JavaScript function is called when an event occurs in a page.

Glue for the whole AJAX operation.

API for accessing and manipulating structured documents.

Represents the structure of XML and HTML documents.

JavaScript object that performs asynchronous interaction with the server.

Difference in AJAX and Conventional CGI

NOTE: We have given a more complex example in AJAX Database

Mozilla Firefox 1.0 and above.

Netscape version 7.1 and above.

Apple Safari 1.2 and above.

Microsoft Internet Explorer 5 and above.

Opera 7.6 and above.

Writing Browser Specific Code

// Internet Explorer Browsers

// Something went wrong

In the above JavaScript code, we try three times to make our

ajaxRequest = new XMLHttpRequest();

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

If it doesn't work, then we can use a very outdated browser that

Steps of AJAX Operation

A client event occurs.

An XMLHttpRequest object is created.

The XMLHttpRequest object is configured.

The XMLHttpRequest object makes an asynchronous request to the

The Webserver returns the result containing XML document.

The HTML DOM is updated.

Let us take these steps one by one.

A Client Event Occurs

A JavaScript function is called as the result of an event.

Example: validateUserId() JavaScript function is mapped as an event

The XMLHttpRequest Object is Created

// Opera 8.0+, Firefox, Safari

// Internet Explorer Browsers

// Something went wrong

The XMLHttpRequest Object is Configured

// Here processRequest() is the callback function.

if (!target) target = document.getElementById("userid");

ajaxRequest.open("GET", url, true);

Making Asynchronous Request to the

Source code is available in the above piece of code. Code written in

// Here processRequest() is the callback function.

if (!target) target = document.getElementById("userid");

ajaxRequest.open("GET", url, true);

Webserver Returns the Result Containing

Get a request from the client.

Parse the input from the client.

Send the output to the client.

public void doGet(HttpServletRequest request, HttpServletResponse response) throws

if ((targetId != null) && !accounts.containsKey(targetId.trim()))

Callback Function processRequest() is Called

The HTML DOM is Updated