introduction about-ajax-framework

18
Ajax technology you do something without reloading

Upload: sakthi-bro

Post on 08-Apr-2017

76 views

Category:

Presentations & Public Speaking


0 download

TRANSCRIPT

Page 1: Introduction about-ajax-framework

Ajax technologyyou do something without reloading

Page 2: Introduction about-ajax-framework

It has a collection of hard disk for storing web pages

Each hard disk have 1TB storage capacity

Its connected to network via the computer

Web server

Page 3: Introduction about-ajax-framework

Server Side: information is sent to a server to be processed With server-side scripting, completing an activity

involves sending information to another computer (server) across the internet. The server then runs a program that process the information and returns the results, typically a webpage.

Server-side scripting languages include ASP and PHP,PYTHON, coldfusion

Client side: Client-side scripting generally refers to the class of

computer programs on the web that are executed client-side, by the user's web browser, instead of server-side (on the web server).

Client side scripting languages include html,css,javascript,ajax,jquery

Page 4: Introduction about-ajax-framework

how does web server work

Page 5: Introduction about-ajax-framework

Web server html .xml .xhtml, files are accessed another computer via the http request and response protocol.

HTTP request? (its load all page)

Whenever your web browser fetches a file (a page, a picture, etc) from a web server, it does so using HTTP - that's "Hypertext Transfer Protocol".  HTTP is a request/response protocol, which means your computer sends a request for some file (e.g. "Get me the file 'home.html'"), and the web server sends back a response ("Here's the file", followed by the file itself).

xml http request its load particlular pages without reloading

web page

Client request and sever response:

Page 6: Introduction about-ajax-framework

AJAX = Asynchronous JavaScript and XML. AJAX is the art of with exchanging data a server, and updating

parts of a web page - without reloading the whole page.

AJAX technology

HTML (or XHTML) and CSS for presentation The Document Object Model (DOM) for dynamic display of and

interaction with data XML for the interchange of data, and XSLT for its manipulation The XMLHttpRequest object for asynchronous communication JavaScript to bring these technologies together

What is ajax

Page 7: Introduction about-ajax-framework

How Ajax works

Page 8: Introduction about-ajax-framework

Ajax work flow

First of all need to trigger a EVENT like onclick,double cllick,mouse over like that,,

Send xmlhttprequest to server and request will be processing

Response will be store in html file id with out reloading using DOM object

Page 9: Introduction about-ajax-framework

Send a Request To a Server

To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:

xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();

Description

xmlhttp.open(method,url,async);

Specifies the type of request, the URL, and if the request should be handled asynchronously or not.

method: the type of request: GET or POSTurl: the location of the file on the serverasync: true (asynchronous) or false (synchronous)

send(string) Sends the request off to the server.

Page 10: Introduction about-ajax-framework

Server Response To get the response from a server, use the responseText or responseXML

property of the XMLHttpRequest object.sever response data format has xml type

Server response status 404-page not found 403-forbidden

property descresponseText get the response data as a

stringresponseXml get the response data as a

xml docs

code desc1xx Server connection

established2xx Req result3xx Process request4xx Client error5xx Server error

Page 11: Introduction about-ajax-framework

DOM Object for display result It s mainly used javascript appalication.its change the content

dynamically

Dom object is used to store the response of the server in the inner HTML

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Page 12: Introduction about-ajax-framework

Better interactivity

This is pretty much the most striking benefit behind why several developers and webmasters are switching to AJAX for their websites. AJAX allows easier and quicker interaction between user and website as pages are not reloaded for content to be displayed.

Easier navigationAJAX applications on websites can be built to allow easier navigation to users in comparison to using the traditional back and forward button on a browser.

CompactWith AJAX, several multi purpose applications and features can be handled using a single web page, avoiding the need for clutter with several web pages. For our use of AJAX on goedkope-zomervakantie.com, it took just a few lines of code!

Backed by reputed brandsAnother assuring reason to use AJAX on your websites is the fact that several complex web applications are handled using AJAX, Google Maps is the most impressive and obvious example, other powerful, popular scripts such as the vBulletin forum software has also incorporated AJAX into their latest version.

Advantages of Ajax

Page 13: Introduction about-ajax-framework

The back and refresh button are rendered uselessWith AJAX, as all functions are loaded on a dynamic page without the page being reloaded or more importantly a URL being changed (except for a hash symbol maybe), clicking the back or refresh button would take you to an entirely different web page or to the beginning of what your dynamic web page was processing. This is the main drawback behind AJAX but fortunately with good programming skills this issue can be fixed.

It is built on javascriptWhile javascript is secure and has been heavily used by websites for a long period of time, a percentage of website surfers prefer to turn javascript functionality off on their browser rendering the AJAX application useless, a work around to this con is present as well, where the developer will need to code a parallel non-javascript version of the dynamic web page to cater to these users.

Disadvantages of ajax

Page 14: Introduction about-ajax-framework

REAL TIME APPLICATIOLNN OF AJAX

Page 16: Introduction about-ajax-framework

Tips for making dynamic application

Dont need for typing code..simply search the plugin for ajax in google

Download it

Link the jquery file

Trigger the jquery file then use it

\\ Simply done..no coding . ..

No tension........

Page 17: Introduction about-ajax-framework

Any doubt ? Ask me

Page 18: Introduction about-ajax-framework

Thank You