Prepared By : Uday Shah (HOD - IT)
E-Mail : rupareleducation@gmail.com
Contact No : 7600044051
Unit 3 : AJAX
Explain AJAX
·
Ajax means Asynchronous JavaScript and XML.
·
AJAX is not a new programming language, but a new technique
for creating better, faster and more
interactive web applications.
·
With AJAX , a JavaScript can communicate directly with the
server, with the XMLHttpRequest object, a JavaScript can trade data with a
server , without reloading the page.
·
AJAX uses asynchronous data transfer between the browser and
the web server, allowing web pages to request small bits of information from
the server instead of whole pages.
·
The AJAX techniques makes internet application smaller ,
faster and more user friendly.
The following
steps are to be considered in AJAX:
1.
User
makes initial request to the given URL.
2.
server
return the original html pages.
3.
Browser
render the page in the memory.
4.
User
activity causes subsequent request to the another url.
5.
Browser
returns data inside the existing page.
6.
Browser
display result and updates in memory with the new data.
7.
AJAX
is based on the following web standards
à Javascript
à XML
àCSS
àHTML
8.
AJAX
applications are browser and platform independent.
Explain How AJAX works with PHP?
This is a technology of web based , so that it also
works same as other web technology.
To start any web
application we need following steps,
1.
Platform
or form based user data.
2.
Server
side scripting language
3.
Client
side scripting language
In traditional JavaScript coding if we want to get any
information from a database or from a file or to send user information to the
server, you will have to make an html form and can GET or POST data to the
screen.
AJAX communicates with the server using
XMLHttpRequest object. .
As you can see in the above
example, XMLHttpRequest object plays an important role.
1. User sends a request from the
UI and a JavaScript call goes to XMLHttpRequest object.
2. HTTP Request is sent to the
server by XMLHttpRequest object.
3. Server interacts with the
database using JSP, PHP, Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON
data to the XMLHttpRequest callback function.
6. HTML and CSS data is displayed
on the browser.
Using JQuery
with PHP
JQuery is a JavaScript
framework, which purpose is to make it much easier to use JavaScript on your
website. You could also describe JQuery as an abstraction layer, since it takes
a lot of functionality that you would have to write many lines of JavaScript to
accomplish and wrap it into function with a single line code. With that in mind
you should be aware that you don’t need to be a JavaScript expert to use
JQuery. In fact JQuery tries to simplify a lot of the complicated things from
the JavaScript, like AJAX calls and DOM manipulation, so that you may do these
things without knowing a lot about JavaScript.
What is JQuery?
JQuery is the light weight version of JavaScript.
JQuery is fast, small and feature rich JavaScript
library.
The purpose of JQuery is to make it much easier to use
JavaScript on your website.
It’s features are working for things listed below with
ready and easy to use supported for all browsers.
The JQuery library contains the following features.
1.
HTML
manipulation
2.
CSS
manipulation
3.
Event
Handling
4.
Effect
and Animation
5.
AJAX
Here are some of
the reasons for giving being most popular.
1. Cross browser compatibility:
·
JQuery
team is aware of the cross browsers issues and they have written library, so
that JQuery works on all the major browsers.
·
There
are some of the plugins like parallax, 360 degree tour etc., which is supported
in some major browsers like Internet explorer 8, Google chrome, firefox, opera,
safari etc.
2. Fast and small foot print:
·
A lot
of common functionality has been omitted from the jquery library. So, that it
is very easy to include in your application and very fast as well.
3.
CSS3 selectors compliant:
·
JQuery
fully supports the css3 selector specifications.
4. JQuery UI:
·
JQuery
user interface (UI) separates out higher level constructs and is packaged into
a library, like sliders, dialog boxes, date pickers and more user interface is
used.
5. Lots of Plug-in:
·
By
including only a set of features while providing a framework for extending the
library, JQuery team
·
Made
it easy to create plug-in that it can be reused in JQuery projects.
Q-8: How JQuery
works and how it is used?
Ans: JQuery developers uses window.onload () function
to Initiate some action on page load. But there is some of using this function.
It does not fire until all the images are loaded.
A more modern approach, instead of downloading and
hosting JQuery yourself, is to include it from a CDN (content Delivery
Network). Both Google and Microsoft host several different versions of JQuery
and other JavaScript frameworks.
It saves you from
having to download and store the JQuery framework.
There are some of
the JQuery selectors, used with framework.
JQuery
Selectors:
·
The
first step to use scripting is, using selectors. Selectors can select an
element out of the DOM tree so that it can be manipulated in some way.
·
JQuery
provides a special utility function to select elements it is called $. Some of
the selectors are
·
$(document);//Active
JQuery for object
·
$(#maintable) // Element with ID maintable
·
$(p.first) //P tag with class first.
·
$(‘p[title=”Hello”]’) // P tag with title “Hello”
Explain JQuery
Events:
Mouse Events
|
Keyboard Events
|
Form Event
|
Document Events
|
Click
|
Keypress
|
Submit
|
Load
|
Dblclick
|
Keydown
|
Change
|
Resize
|
Mouseenter
|
Keyup
|
Focus
|
Scroll
|
Mouseleave
|
Blur
|
Unload
|
In JQuery most DOM
events have an equivalent JQuery Method. To assign a click event to all
paragraph on a page You can do this
$(“p”).click(function(){
//action goes here
});
Example:
<html>
<head>
<script src=http://code.jquery.com/jquery-latest.js>
</script>
<script>
$(document).ready(function()
{
$(“p”).click(function()
{
Alert(“The paragraph was clicked.”);
});
});
</script>
</head>
<body>
<p>Click on this paragraph</p>
</body>
</html>
Explanation of
above program:
·
JQuery
–latest is latest version of JQuery.js. Here we are using content delivery
network but instead can download and host JQuery yourself from jquery.com
website. It is the library file and you reference it with the html
<script> tag.
·
In
above example we have used selector as <p> tag, when user clicks on
paragraph it will show an alert box with Message “The paragraph was clicked”.
Simple Mail Transfer Protocol (SMTP) is an Internet
standard for email transmission.
Which is the protocol in widespread use today?
Although electronic mail servers and other mail transfer agents use
SMTP to send and receive mail messages, user-level client mail applications
typically use SMTP only for sending messages to a mail server for relaying.
For retrieving messages, client applications usually use either IMAP or POP3.
SMTP communication between mail servers uses TCP port 25.
Although proprietary systems such as Microsoft Exchange and IBM Notes
and webmail systems
such as Outlook.com, Gmail and Yahoo! Mail
use their own non-standard protocols to access mail box accounts on their own
mail servers, all use SMTP when sending or receiving email from outside their
own systems.
When you use the PHP mail
function, you are sending email directly from your web server. This
can cause issues if the FROM address isn’t set properly or if your email isn’t
hosted with DreamHost. Sending mail via SMTP is recommended as email is sent
from the mail server rather than the web server.
jQuery Effect Methods
The following table lists all the jQuery
methods for creating animation effects.
Method Description
animate() Runs a custom animation on the
selected elements
clearQueue () Removes all remaining queued functions from
the selected elements
delay () Sets a delay for all queued
functions on the selected elements
dequeue () Removes the next function from the
queue, and then executes the function
fadeIn () Fades in the selected elements
fadeOut () Fades out the selected elements
fadeTo () Fades in/out the selected elements to
a given opacity
fadeToggle () Toggles between the fadeIn() and fadeOut()
methods
finish () Stops, removes and completes all
queued animations for the selected elements
hide() Hides the selected elements
show() Shows the selected elements
slideDown() Slides-down (shows) the selected elements
slideToggle() Toggles between the slideUp() and
slideDown() methods
slideUp() Slides-up (hides) the selected
elements
stop() Stops the currently running
animation for the selected elements
toggle() Toggles between the hide() and
show() methods
jQuery Selectors
jQuery selectors allow you to
select and manipulate HTML element(s).
jQuery
selectors are used to "find" or select HTML elements based on their
name, id, classes, types, attributes, values of attributes and much more. It's
based on the existing CSS Selectors, and in addition, it has some own
custom selectors.
All selectors in jQuery start
with the dollar sign and parentheses: $().
#id $("#lastname") The element with id="lastname"
.class $(".intro") All elements with
class="intro"
element $("p") All
<p> elements
The
jQuery element selector selects elements based on the element name.
You can select all <p>
elements on a page like this:
$("p")
Working with AJAX as
background process
Frequently
in web applications, we may have a request to the back end system which may
trigger a long running process such as searching huge amount of data or a long
running database process. Then the front end webpage may hang and wait for the
process to be finished. During this process, if we can provide the user some
information about the progress of the back end process, it may improve user
experience. Unfortunately, in web applications, this seems not an easy task
because web scripting languages don't support multithreading and HTTP is
stateless. We now can have AJAX to simulate real time process. Today we
will use PHP+jQuery to simulate a process to get the progress of a long running
process dynamically.
Best Of Luck
Please Share and Comment it. Thank You
