Ajax Asynchronous and synchronus using jquery

What is jQuery

1-jQuery is a fast and concise JavaScript Library created by John Resig in2006with a nice motto-

2-Write less,do more.

3-jQuery simplifies HTML document traversing,event handling,animating,and Ajax interactions for rapid web development.

Following feature of jQuery:

1-DOM manipulation−The jQuery made it easy to select DOM elements,traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.

2-EventHandling:The jQuery offers an elegant way to capture a wide variety of events,such as click,over event,

3-Ajax Support:

jQuery support ajax technology,

4-Lightweight:he jQuery is very lightweight library-about19KB in size (Minified and gzipped ).

5-Animations−The jQuery comes with plenty of built-in animation effects.

6-Cross Browser Support−The jQuery has cross-browser support,and works well in IE and all.

AJAXstands forAsynchronous JavaScript and XML.

AJAX is a new technique for creating better,faster,and more interactive web applications with the help of XML,HTML,CSS,and Java Script

Before you start ajax you will be much and more knowledge about javascript,its important for us.ajax is not difficult it can be easily implementation.

Following advantage of ajax call:

1-Speed,

2-Interaction,

3-XMLHttpRequest,

4-Asynchronous call,

5-Form Validation,

6-Bandwidth Usage,

AJAX Disadvantages

1-Open Source:View source is allowed and anyone can view the code source written for AJAX,

2-It can increase design and development time,

3-Security is less in AJAX application as all files are downloaded at client side.

Synchronous (async:false )–

1-Script stops and waits for the server to send back a reply before continuing.There are some situations where Synchronous Ajax is mandatory.

In standard Web applications,the interaction between the customer and the server is synchronous.This means that one has to happen after the other.If a customer clicks a link,the request is sent to the server,which then sends the results back.

$.ajax({

url: "file.php",

type: "POST",

async:false,

success:function(data) {

//.....

}

});

Demo link :

http://freeteachnology.hol.es/jquerySynAjax/

Code Link :

https://drive.google.com/open?id=0BxmTZPVcu72fYkZOUXFkRGJCRjg

following example is very simple in ajax call only difference between synchronus call and asynchronus call async:false and async:true respectively.

both of exmple are same for ajax call.

Asynchronous (async:true )–

1-Where the script allows the page to continue to be processed and will handle the reply if and when it arrives.

2-If anything goes wrong in the request and/or transfer of the file,your program still has the ability to recognize the problem and recover from it.

3-Processing asynchronously avoids the delay while the retrieval from the server is taking place because your visitor can continue to interact with the web page and the requested information will be processed with the response updating the page as and when it arrives.

Demo Link :

http://freeteachnology.hol.es/jqueryAsynAjax/

Code Link :

https://drive.google.com/open?id=0BxmTZPVcu72fbXVySEh0bDBUU0k

$.ajax({

url: "file.php",

type: "POST",

async:true,

success:function(data) {

//.....

}

});

Processing asynchronously avoids the delay while the retrieval from the server is taking place because your visitor can continue to interact with the web page and the requested information will be processed with the response updating the page as and when it arrives

Events

This is the full list of Ajax events,and in the order in which they are triggered.The ajaxStart and ajaxStop events are events that relate to all Ajax requests together.

ajaxStart (Global Event)

This event is triggered if an Ajax request is started and no other Ajax requests are currently running.

beforeSend (Local Event)

This event,which is triggered before an Ajax request is started,allows you to modify the XMLHttpRequest object (setting additional headers,if need be.)

ajaxSend (Global Event)

This global event is also triggered before the request is run.

success (Local Event)

This event is only called if the request was successful (no errors from the server,no errors with the data).

ajaxSuccess (Global Event)

This event is also only called if the request was successful.

error (Local Event)

This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).

ajaxError (Global Event)

This global event behaves the same as the local error event.

complete (Local Event)

This event is called regardless of if the request was successful,or not.You will always receive a complete callback,even for synchronous requests.

ajaxComplete (Global Event)

This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

ajaxStop (Global Event)

This global event is triggered if there are no more Ajax requests being processed.

following file create :

1-index.php,

2-action.php,

3-header.php,

4-footer.php,

1-index.php file include header.php file and body tag contain html input field, in header section jquery as well as bootsrap file link, simply ajax function call on form submitonSubmit="return ajaxSubmit(this);” follwing ajax call on from submit.

function ajaxSubmit(){

var fname = $.trim($('#fname').val());

var lname = $.trim($('#lname').val());

$.ajax({

type: "POST",

url: "action.php",

async: true,

data: {fname:fname,lname:lname},

success: function(html) {

var result=$.parseJSON(html);

if(result.status==2) {

alert('First name is empty.');

} else if(result.status==3) {

alert('Last name is empty.');

} else if(result.status==1) {

$("label[for='fnamelb']").html(result.fname);

$("label[for='lnamelb']").html(result.lname);

} else {

alert('Something goes wrong.');

}

});

return false;

}

</script>

only async value true or false

index.php full code here :

<?php include('header.php'); ?>

<body>

<strong>Hi..</strong> jQuery Asynchronous Ajax Call.

</div>

<label for="name">First Name</label>

</br>

<button type="submit" name="submit" id="submit" class="btn btn-primary">Singup</button>

</form>

</div>

First Name :<label for="fnamelb"></label>

Last Name : <label for="lnamelb"></label>

</div>

</br>

<?php include('footer.php'); ?>

function ajaxSubmit()

{

var fname = $.trim($('#fname').val());

var lname = $.trim($('#lname').val());

$.ajax({

type: "POST",

url: "action.php",

async: true,

data: {fname:fname,lname:lname},

success: function(html) {

var result=$.parseJSON(html);

if(result.status==2) {

alert('First name is empty.');

} else if(result.status==3) {

alert('Last name is empty.');

} else if(result.status==1) {

$("label[for='fnamelb']").html(result.fname);

$("label[for='lnamelb']").html(result.lname);

} else {

alert('Something goes wrong.');

}

});

return false;

}

</script>

2-action.php :

action .php file check form submit value is empty or not if the value is empty alert will be generated and if firstname and last name is filled then json_encode() function encode post value in array with response and post value send to index.php page

Code :

<?php

*Post value::-

$fname=$_POST['fname'];

$lname=$_POST['lname'];

if(empty($fname)) {

$post_array=array('status'=>2);

echo json_encode($post_array);

die();

} else if(empty($lname)) {

$post_array=array('status'=>3);

echo json_encode($post_array);

die();

} else if(!empty($fname) && !empty($lname)) {

$post_array=array('status'=>1,'fname'=>$fname,'lname'=>$lname);

echo json_encode($post_array);

die();

}else

{

$post_array=array('status'=>0);

echo json_encode($post_array);

die();

}

3-header.php :

<head>

<title>jQuery Asynchronous Ajax Call</title>

</head>

<body>

<a class="navbar-brand" href="#">Free Teachnology</a>

</div>

<li><a href="#">About us</a></li>

<li><a href="#">Contact us</a></li>

</ul>

</div>

</div>

</nav>

</br></br></br>

4-footer.php :

// $(".errorMsg").alert('close');

$(".errorMsg").slideUp(2000);

</script>

<a href="https://freeteachnology.blogspot.in/" >Free Teachnology</a>

</div>

</ul>

</div>

</footer>

.footer-bottom {

margin-top:220px;

background: #E3E3E3;

border-top: 1px solid #DDDDDD;

padding-top: 10px;

padding-bottom: 10px;

}

.footer-bottom p.pull-left {

padding-top: 6px;

}

</style>

</body>
</html>

using PDO database connection add,update,delete,edit operation

PDO advantage : 1-Object Oriented 2-Bind parameters in statements (security) 3-Allows for prepared statements and rollback functionality (consistency) 4-Throws catcheable exceptions for better error handling (quality) 5-Exception mode; no need to check error state after each API call. It's best to tell PDO how you'd like the data to be fetched. You have the following options: 1-PDO::FETCH_ASSOC: returns an array indexed by column name. 2-PDO::FETCH_BOTH: (default):returns an array indexed by both column name and number. 3-PDO::FETCH_BOUND:Assigns the values of your columns to the variables set with the ->bindColumn() method. 4-PDO::FETCH_CLASS: Assigns the values of your columns to properties of the named class. It will create the properties if matching properties do not exist. 5-PDO::FETCH_INTO:Updates an existing instance of the named class. 6-PDO::FETCH_LAZY: Combines. 7-PDO::FETCH_BOTH/PDO:FETCH_OBJ, creating the object variable names as t...

FT

Search This Blog

Ajax Asynchronous and synchronus using jquery

Labels

Comments

Popular posts from this blog

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links

using PDO database connection add,update,delete,edit operation

GUID for globally unique identifier