Understanding Javascript AJAX - Imrokraft
Download as PPTX, PDF•1 like•315 views
The document provides an overview of AJAX (Asynchronous JavaScript and XML) and its role in creating dynamic web applications without reloading pages. It discusses the working principles, key components such as XMLHttpRequest, and methods for data handling and client-side validation. Additionally, it touches on AJAX security concerns and applications in popular platforms like Google Maps and Gmail.
Understanding Javascript AJAX - Imrokraft
- 1. IMROKRAFT Crafting the future Ph.no:(0471)6555744 Site: http://www.imrokraft.com/ Akhil Krishnan R S Arun Solomon Imrokraft Solution
- 2. INTRODUCTION • AJAX(Asynchronous JavaScript and XML) • It is used to create asynchronous Web application for creating fast and dynamic web pages • Without reloading a webpage the contents are automatically generated. • JSON(JavaScript Object Notation) is often used in Ajax. • Both HTML and CSS combined to markup and style information.
- 4. ASYNCHRONOUS WEB APPLICATION MODEL • An asynchronous request doesn’t block the server, so it can run another request by background
- 5. AJAX TECHNOLOGY • Ajax is not a technology but it is grop of inter-related technology • HTML/XHTML and CSS • These technologies are used for displaying content and style. It is mainly used for presentation. • DOM • It is used for dynamic display and interaction with data. • XML or JSON • For carrying data to and from server. • XMLHttpRequest • For asynchronous communication between client and server • JavaScript • It is used to bring above technologies together. And also for client side validation
- 6. Ajax XMLHttp Request • The keystone of AJAX is the XMLHttpRequest object. • Syntax:- variable = new XMLHttpRequest(); Eg: var xhttp; if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
- 7. EVENTS Property Description onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: "OK" 404: Page not found • The common properties of XMLHttpRequest object are as follows:
- 8. CONT.. Method Description void open(method, URL) opens the request specifying get or post method and url. void open(method, URL, async) same as above but specifies asynchronous or not. void open(method, URL, async, username, password) same as above but specifies username and password. void send() sends get request. void send(string) send post request. setRequestHeader(header,value) it adds request headers. • The important methods of XMLHttpRequest object are as follows:
- 9. AJAX AND FORMS • Ajax capable for deal with forms. • Which helps to provide serialization, using two methods .serialize() and .serializeArray(). Eg: $(“#myForm”).serialize(); $(“#myForm”).serializeArray(); // #myForm is Form id • To simple client side validation.
- 10. CONT.. • Using validation to check for the presence of an input Eg: $( "#form" ).submit(function( event ) { // If .required's value's length is zero if ( $( ".required" ).val().length === 0 ) { // Usually show some kind of error message here // Prevent the form from submitting event.preventDefault(); } else { // Run $.ajax() here } });
- 11. CONT.. • Prefiltering is a way to modify the ajax options before each request is sent. Eg: // Using a proxy with a prefilter $.ajaxPrefilter(function( options, originalOptions, jqXHR ) { if ( options.crossDomain ) { options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ); options.crossDomain = false; } });
- 12. AJAX EXAMPLE WITH DATABASE Steps to create ajax example with database through jsp • load the org.json.jar file • create input page to receive any text or number • create server side page to process the request
- 13. AJAX SECURITY • AJAX Security: Server Side • Ajax implements declarative and programmatic security through specifying authentication, authorization, and data protection. • AJAX-based Web applications are subject to the same security threats as regular Web applications.
- 14. CONT.. AJAX Security: Client Side • JavaScript code is visible to a user/hackers, so they can easly 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.
- 15. AJAX USED IN • Google maps • Google suggest • Gmail • Yahoo maps • Facebook • Twitter etc