IMROKRAFTCrafting the future

Ph.no:(0471)6555744Site: http://www.imrokraft.com/

Akhil Krishnan R SArun Solomon

Imrokraft Solution

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.

WORKING PRINCIPLE

ASYNCHRONOUS WEB APPLICATION MODEL

• An asynchronous request doesn’t block the server, so it  can run another request by background

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

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");

}

EVENTS

Property Description

onreadystatechangeStores 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 established2: 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:

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:

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.

CONT..•  Using validation to check for the presence of an inputEg:

$( "#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 }});

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;    }});

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

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.

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.

AJAX USED IN

• Google maps• Google suggest• Gmail• Yahoo maps• Facebook• Twitter etc